MEAN.JS - MEAN Project Setup

W tym rozdziale opisano tworzenie i konfigurowanie aplikacji MEAN. Do stworzenia projektu używamy razem NodeJS i ExpressJS.

Wymagania wstępne

Zanim zaczniemy tworzyć aplikację MEAN, musimy zainstalować wymagane wymagania wstępne.

Najnowszą wersję Node.js można zainstalować, odwiedzając witrynę internetową Node.js pod adresem Node.js (dotyczy to użytkowników systemu Windows). Gdy pobierzesz Node.js, npm zostanie automatycznie zainstalowany w twoim systemie. Użytkownicy systemu Linux mogą zainstalować Node i npm za pomocą tego linku .

Sprawdź wersję Node i npm za pomocą poniższych poleceń -

$ node --version
$ npm --version

Polecenia wyświetlą wersje, jak pokazano na poniższym obrazku -

Tworzenie projektu ekspresowego

Utwórz katalog projektu za pomocą polecenia mkdir, jak pokazano poniżej -

$ mkdir mean-demo //this is name of repository

Powyższy katalog jest katalogiem głównym aplikacji węzła. Teraz, aby utworzyć plik package.json, uruchom poniższe polecenie -

$ cd webapp-demo
$ npm init

Polecenie init przeprowadzi Cię przez proces tworzenia pliku package.json -

To narzędzie przeprowadzi Cię przez proces tworzenia pliku package.json. Obejmuje tylko najbardziej typowe elementy i próbuje odgadnąć rozsądne wartości domyślne.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

Kliknij tak, a zostanie wygenerowana struktura folderów jak poniżej -

-mean-demo
   -package.json

Plik package.json będzie zawierał następujące informacje -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Teraz, aby skonfigurować projekt Express w bieżącym folderze i zainstalować opcje konfiguracji dla frameworka, użyj poniższego polecenia -

npm install express --save

Przejdź do katalogu swojego projektu i otwórz plik package.json, zobaczysz poniższe informacje -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Tutaj możesz zobaczyć wyraźną zależność dodaną do pliku. Teraz struktura projektu jest jak poniżej -

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

Uruchomiona aplikacja

Przejdź do nowo utworzonego katalogu projektu i utwórz plik server.js z poniższą zawartością.

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Następnie uruchom aplikację za pomocą poniższego polecenia -

$ npm start

Otrzymasz potwierdzenie, jak pokazano na poniższym obrazku -

Informuje, że aplikacja Express jest uruchomiona. Otwórz dowolną przeglądarkę i uzyskaj dostęp do aplikacji za pomocąhttp://localhost:3000. Zobaczysz Witamy w Tutorialspoint! tekst, jak pokazano poniżej -