MEAN.JS - Szybki przewodnik

Czym jest MEAN.js?

Termin MEAN.jsto pełne rozwiązanie JavaScript typu open source, używane do tworzenia dynamicznych witryn i aplikacji internetowych. ŚREDNIA to akronim, który oznaczaMongoDB, Express, Node.js i AngularJS, które są kluczowymi komponentami stosu MEAN.

Zasadniczo został opracowany, aby rozwiązać typowe problemy z łączeniem tych frameworków (Mongo, Express Nodejs, AngularJS), zbudować solidną strukturę obsługującą codzienne potrzeby programistyczne i pomóc programistom w stosowaniu lepszych praktyk podczas pracy z popularnymi komponentami JavaScript.

Stos oznacza korzystanie z bazy danych i serwera WWW na zapleczu, w środku będziesz mieć logikę i kontrolę nad aplikacją i interakcją użytkownika z przodu.

• MongoDB - System baz danych

• Express - Back-end Web Framework

• Node.js - Platforma serwera internetowego

• AngularJS - Front-end Framework

Historia

Nazwa MEAN została wymyślona przez Valeri Karpov , programistę MongoDB.

Dlaczego używać MEAN.js?

• Jest to platforma open source, z której można korzystać bezpłatnie.

• Może być używany jako samodzielne rozwiązanie w całej aplikacji.

• Zapewnia niższe koszty rozwoju i zwiększa elastyczność i wydajność dewelopera.

• Obsługuje wzorzec MVC i używa JSON do przesyłania danych.

• Zapewnia dodatkowe frameworki, biblioteki i moduły wielokrotnego użytku w celu przyspieszenia rozwoju.

Zanim zaczniemy od dalszych koncepcji, zobaczymy podstawowe elementy składowe aplikacji MEAN.JS.

Wprowadzenie do MongoDB

W średnim akronimie,Moznacza MongoDB, czyli bazę danych NoSQL typu open source, która zapisuje dane w formacie JSON. Korzysta z modelu danych zorientowanego na dokumenty do przechowywania danych, zamiast używać tabel i wierszy, jak używamy w relacyjnych bazach danych. Przechowuje dane w binarnym formacie JSON (JavaScript Serialized Object Notation), aby łatwo przekazywać dane między klientem a serwerem. MongoDB pracuje nad koncepcją kolekcji i dokumentu. Aby uzyskać więcej informacji, skorzystaj z tego łącza MongoDB .

Wprowadzenie do Express

W średnim akronimie,Eoznacza Express , który jest elastycznym środowiskiem aplikacji internetowych Node.js używanym w celu ułatwienia procesu programowania. Jest łatwy w konfiguracji i dostosowywaniu, co pozwala na tworzenie bezpiecznych, modułowych i szybkich aplikacji. Określa trasy aplikacji w zależności od metod HTTP i adresów URL. Możesz łatwo łączyć się z bazami danych, takimi jak MongoDB, MySQL, Redis. Aby uzyskać więcej informacji, skorzystaj z tego łącza Express .

Wprowadzenie do AngularJS

W średnim akronimie,Aoznacza AngularJS , który jest frameworkiem JavaScript dla frontendu WWW. Pozwala na tworzenie dynamicznych, jednostronicowych aplikacji w czysty sposób Model View Controller (MVC). AngularJS automatycznie obsługuje kod JavaScript odpowiedni dla każdej przeglądarki. Aby uzyskać więcej informacji, skorzystaj z tego łącza AngularJS .

Wprowadzenie do Node.js.

W średnim akronimie,Noznacza Node.js , platformę po stronie serwera używaną do tworzenia aplikacji internetowych, takich jak witryny do strumieniowego przesyłania wideo, aplikacje jednostronicowe i inne aplikacje internetowe. Udostępnia bogatą bibliotekę różnych modułów JavaScript, co w dużym stopniu upraszcza tworzenie aplikacji internetowych przy użyciu Node.js. Jest zbudowany na silniku JavaScript V8 przeglądarki Google Chrome, dzięki czemu jest bardzo szybki w wykonywaniu kodu. Aby uzyskać więcej informacji, zapoznaj się z tym linkiem node.js .

MEAN to framework JavaScript typu open source, używany do tworzenia dynamicznych witryn i aplikacji internetowych. Obejmuje następujące cztery bloki konstrukcyjne do zbudowania aplikacji.

• MongoDB - Jest to baza danych dokumentów, która przechowuje dane w elastycznych dokumentach podobnych do JSON.

• Express - Jest to framework aplikacji internetowych dla Nodejs.

• Node.js- To platforma serwera WWW. Udostępnia bogatą bibliotekę różnych modułów JavaScript, co upraszcza tworzenie aplikacji internetowych.

• AngularJS- Jest to web frontendowy framework JavaScript. Pozwala na tworzenie dynamicznych, jednostronicowych aplikacji w czysty sposób Model View Controller (MVC).

Więcej informacji na ten temat można znaleźć w rozdziale Omówienie . Poniższy diagram przedstawia architekturę aplikacji stosu MEAN.

Jak pokazano na powyższym obrazku, mamy AngularJS jako język po stronie klienta, który przetwarza żądanie klienta.

• Za każdym razem, gdy użytkownik zgłasza żądanie, jest ono najpierw przetwarzane przez AngularJS.

• Następnie żądanie przechodzi do drugiego etapu, w którym mamy Node.js jako język po stronie serwera i ExpressJS jako backend web framework.

• Node.js obsługuje żądania klienta / serwera, a ExpressJS wysyła żądanie do bazy danych.

• W ostatnim etapie MongoDB (baza danych) pobiera dane i wysyła odpowiedź do ExpressJS.

• ExpressJS zwraca odpowiedź do Nodejs iz kolei do AngularJS, a następnie wyświetla odpowiedź użytkownikowi.

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.

Możesz zainstalować najnowszą wersję Node.js, odwiedzając witrynę Node.js pod adresem Node.js (dotyczy 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 -

W tym rozdziale pokazano, jak budować trasę dla aplikacji z Node i Express.

W poprzednim rozdziale stworzyliśmy aplikację node-express. Przejdź do katalogu projektu o nazwie mean-demo . Przejdź do katalogu za pomocą poniższego polecenia -

$ cd mean-demo

Konfigurowanie tras

Trasy są używane jako usługa mapowania przy użyciu adresu URL żądania przychodzącego. Otworzyćserver.js plik i skonfiguruj routing, jak pokazano poniżej -

// modules =================================================
const express = require('express');
const app = express();

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

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

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

Uruchomiona aplikacja

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

$ npm start

Otrzymasz potwierdzenie, jak pokazano na poniższym obrazku -

Teraz przejdź do przeglądarki i wpisz http://localhost:3000/myroute. Otrzymasz stronę, jak pokazano na poniższym obrazku -

W tym rozdziale pokażemy, jak używać modelu danych w naszej aplikacji Node-express.

MongoDB to baza danych NoSQL typu open source, która zapisuje dane w formacie JSON. Korzysta z modelu danych zorientowanego na dokumenty do przechowywania danych, zamiast używać tabel i wierszy, jak używamy w relacyjnych bazach danych. W tym rozdziale używamy Mongodb do budowania modelu danych.

Model danych określa, jakie dane są obecne w dokumencie i jakie dane powinny znajdować się w dokumencie. Zapoznaj się z oficjalną instalacją MongoDB , aby zainstalować MongoDB.

Użyjemy naszego poprzedniego kodu rozdziału. Możesz pobrać kod źródłowy w tym linku . Pobierz plik zip; wyodrębnij go w swoim systemie. Otwórz terminal i uruchom poniższe polecenie, aby zainstalować zależności modułów npm.

$ cd mean-demo
$ npm install

Dodawanie Mongoose do aplikacji

Mongoose to biblioteka do modelowania danych, która określa środowisko i strukturę danych, zwiększając możliwości MongoDB. Możesz zainstalować Mongoose jako moduł npm za pomocą wiersza poleceń. Przejdź do folderu głównego i uruchom poniższe polecenie -

$ npm install --save mongoose

Powyższe polecenie pobierze nowy pakiet i zainstaluje go w folderze node_modules . Flagą --save flaga będzie dodać ten pakiet do package.json pliku.

{
   "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",
      "mongoose": "^5.5.13"
   }
}

Konfigurowanie pliku połączenia

Do pracy z modelem danych będziemy używać folderu app / models . Stwórzmy model Students.js jak poniżej -

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

Możesz skonfigurować plik połączenia, tworząc plik i używając go w aplikacji. Utwórz plik o nazwie db.js w config / db.js . Zawartość pliku jest jak poniżej -

module.exports = {
   url : 'mongodb://localhost:27017/test'
}

Tutaj test jest nazwą bazy danych.

Tutaj zakłada się, że zainstalowałeś lokalnie MongoDB. Po zainstalowaniu uruchom Mongo i utwórz bazę danych według nazwy testu. Ta baza danych będzie miała kolekcję według nazw uczniów. Wstaw trochę danych do tej kolekcji. W naszym przypadku wstawiliśmy rekord za pomocą db.students.insertOne ({nazwa: 'Manisha', miejsce: 'Pune', kraj: 'Indie'});

Przenieś plik db.js do aplikacji, tj . Do server.js . Zawartość pliku jest taka, jak pokazano poniżej -

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});
// 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 -

Teraz przejdź do przeglądarki i wpisz http://localhost:3000/api/students. Otrzymasz stronę, jak pokazano na poniższym obrazku -

W tym rozdziale zobaczymy, jak nasza aplikacja współdziała za pośrednictwem REST API z naszą bazą danych przy użyciu metod HTTP. Termin REST oznacza REpresentational State Transfer, który jest stylem architektonicznym zaprojektowanym do komunikacji z usługami sieciowymi, a API to skrót od Application Program Interface, który umożliwia interakcję między aplikacjami.

Najpierw stworzymy RESTful API, aby pobrać wszystkie elementy, stworzyć element i usunąć element. Dla każdego elementu identyfikator _id zostanie wygenerowany automatycznie przez MongoDB. Poniższa tabela opisuje, w jaki sposób aplikacja powinna żądać danych z API -

Metoda HTTP	Ścieżka URL	Opis
DOSTAĆ	/api/students	Służy do pobrania wszystkich uczniów z kolekcji Student.
POCZTA	/api/students/send	Służy do tworzenia rekordu ucznia w kolekcji Student.
USUNĄĆ	/api/students/student_id	Służy do usuwania rekordu ucznia z kolekcji Student.

RESTful API Routes

Najpierw omówimy metodę Post w RESTful API Routes.

POCZTA

Najpierw utwórzmy rekord w kolekcji Student za pośrednictwem naszego REST API. Kod dla tego konkretnego przypadku można znaleźć w pliku server.js . W celach informacyjnych wklejono tutaj część kodu -

app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         res.json({ message: 'student created!' });
   });
});

Wykonanie

Możesz pobrać kod źródłowy tej aplikacji w tym linku . Pobierz plik zip; wyodrębnij go w swoim systemie. Otwórz terminal i uruchom poniższe polecenie, aby zainstalować zależności modułów npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Aby przeanalizować żądanie, potrzebowalibyśmy pakietu analizatora treści. Dlatego uruchom poniższe polecenie, aby uwzględnić je w swojej aplikacji.

npm install --save body-parser

Załączony kod źródłowy ma już tę zależność, dlatego nie ma potrzeby uruchamiania powyższego polecenia, jest to tylko dla twojej informacji.

Aby uruchomić aplikację, przejdź do nowo utworzonego katalogu projektu i uruchom za pomocą polecenia podanego poniżej -

npm start

Otrzymasz potwierdzenie, jak pokazano na poniższym obrazku -

Istnieje wiele narzędzi do testowania wywołań API, tutaj używamy jednego z przyjaznych dla użytkownika rozszerzeń dla Chrome o nazwie Postman REST Client .

Otwórz klienta REST Postman, wprowadź adres URL jako http://localhost:3000/api/students/send, wybierz metodę POST . Następnie wprowadź dane żądania, jak pokazano poniżej -

Zauważ, że wysyłamy dane nazwy jako x-www-form-urlencoded . Spowoduje to wysłanie wszystkich naszych danych do serwera Node jako ciągi zapytań.

Kliknij przycisk Wyślij , aby utworzyć rekord ucznia. Pojawi się komunikat o powodzeniu, jak pokazano poniżej -

DOSTAĆ

Następnie pobierzmy wszystkie rekordy uczniów z mongodb. Należy zapisać następującą trasę. Możesz znaleźć pełny kod w pliku server.js .

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});

Następnie otwórz klienta REST Postman, wprowadź adres URL jako

http://localhost:3000/api/students, wybierz metodę GET i kliknij przycisk Wyślij, aby pobrać wszystkich uczniów.

USUNĄĆ

Następnie zobaczmy, jak usunąć rekord z naszej kolekcji mongo za pomocą wywołania REST api.

Należy zapisać następującą trasę. Możesz znaleźć pełny kod w pliku server.js .

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

Następnie otwórz klienta REST Postman, wprowadź adres URL jako

http://localhost:3000/api/students/5d1492fa74f1771faa61146d

(tutaj 5d1492fa74f1771faa61146d to rekord, który usuniemy z kolekcji Student).

Wybierz metodę USUŃ i kliknij przycisk Wyślij , aby pobrać wszystkich uczniów.

Możesz sprawdzić MongoDB pod kątem usuniętych danych, wykonując wywołanie GET http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

W tym rozdziale dodamy do aplikacji komponenty kątowe. Jest to framework JavaScript frontendu WWW, który umożliwia tworzenie dynamicznych, jednostronicowych aplikacji przy użyciu wzorca Model View Controller (MVC). W rozdziale poświęconym architekturze MEAN.JS widzieliśmy, jak AngularJS przetworzy żądanie klienta i uzyska wynik z bazy danych.

Poznajemy AngularJS

AngularJS to platforma aplikacji internetowych typu open source, która wykorzystuje HTML jako język szablonów i rozszerza składnię HTML, aby wyraźnie przedstawić komponenty aplikacji. AngularJS zapewnia podstawowe funkcje, takie jak powiązanie danych, model, widoki, kontrolery, usługi itp. Aby uzyskać więcej informacji o AngularJS, skorzystaj z tego łącza .

Możesz uczynić stronę aplikacją Angular, dodając Angular na stronie. Można go dodać za pomocą zewnętrznego pliku JavaScript, który można pobrać lub można do niego odwoływać się bezpośrednio w wersji CDN.

Rozważ, że pobraliśmy plik i odwołaliśmy się do niego lokalnie, dodając do strony w następujący sposób -

<script src="angular.min.js"></script>

Teraz musimy powiedzieć Angularowi, że ta strona jest aplikacją Angular. Dlatego możemy to zrobić, dodając atrybut ng-app do tagu <html> lub <body>, jak pokazano poniżej -

<html ng-app>
or
<body ng-app>

Aplikację ng-app można dodać do dowolnego elementu na stronie, ale często umieszcza się ją w tagu <html> lub <body>, dzięki czemu Angular może działać w dowolnym miejscu na stronie.

Aplikacja kątowa jako moduł

Aby pracować z aplikacją Angular, musimy zdefiniować moduł. Jest to miejsce, w którym można pogrupować komponenty, dyrektywy, usługi itp., Które są związane z aplikacją. Do nazwy modułu odwołuje się atrybut ng-app w kodzie HTML. Na przykład powiemy nazwę modułu aplikacji Angular jako myApp i można ją określić w tagu <html>, jak pokazano poniżej -

<html ng-app="myApp">

Możemy stworzyć definicję aplikacji, używając poniższej instrukcji w zewnętrznym pliku JavaScript -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Definiowanie kontrolera

Aplikacja AngularJS opiera się na kontrolerach kontrolujących przepływ danych w aplikacji. Kontroler jest definiowany za pomocą dyrektywy ng-controller .

Na przykład, dołączymy kontroler do ciała za pomocą dyrektywy ng-controller, wraz z nazwą kontrolera, którego chcesz użyć. W poniższej linii używamy nazwy kontrolera jako „myController”.

<body ng-controller="myController">

Możesz dołączyć kontroler (myController) do modułu Angular (myApp), jak pokazano poniżej -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Lepiej jest używać funkcji nazwanej zamiast funkcji anonimowej ze względu na czytelność, możliwość ponownego użycia i testowalność. W poniższym kodzie używamy nowej nazwanej funkcji "myController" do przechowywania kodu kontrolera -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Aby uzyskać więcej informacji na temat kontrolerów, skorzystaj z tego łącza .

Definiowanie zakresu

Zakres to specjalny obiekt JavaScript, który łączy kontroler z widokami i zawiera dane modelu. W kontrolerach dostęp do danych modelu uzyskuje się za pośrednictwem obiektu $ scope. Funkcja kontrolera przyjmuje parametr $ scope, który został stworzony przez Angulara i daje bezpośredni dostęp do modelu.

Poniższy fragment kodu określa, jak zaktualizować funkcję kontrolera, aby otrzymać parametr $ scope i ustawia wartość domyślną -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Aby uzyskać więcej informacji na temat kontrolerów, skorzystaj z tego łącza . W następnym rozdziale zaczniemy tworzyć aplikację jednostronicową za pomocą Angulara.

W stosie MEAN, Angular jest znany jako drugi framework JavaScript, który umożliwia tworzenie aplikacji jednostronicowych w czysty sposób kontrolera widoku modelu (MVC).

AngularJS jako front-end Framework wykorzystuje następujące rzeczy -

• Używa Bower do instalowania plików i bibliotek

• Używa kontrolerów i usług dla struktury aplikacji Angular

• Tworzy różne strony HTML

• Wykorzystuje moduł ngRoute do obsługi routingu i usług dla aplikacji AngularJS

• Używa Bootstrap, aby uatrakcyjnić aplikację

Konfigurowanie naszej aplikacji kątowej

Zbudujmy prostą aplikację, która ma zaplecze Node.js i nakładkę AngularJS. Do naszej aplikacji Angular będziemy chcieli -

• Dwie różne strony (domowa, studencka)

• Dla każdego inny kontroler kątowy

• Brak odświeżania strony podczas przełączania stron

Bower i wciąganie komponentów

Będziemy potrzebować pewnych plików dla naszej aplikacji, takich jak bootstrap i angular. Powiemy Bowerowi, żeby przyniósł nam te komponenty.

Najpierw zainstaluj bower na swoim komputerze, wykonując poniższe polecenie na terminalu poleceń -

npm install -g bower

Spowoduje to zainstalowanie bower i udostępnienie go globalnie w systemie. Teraz umieść pliki .bowerrc i bower.json w swoim katalogu głównym. W naszym przypadku tak jestmean-demo. Zawartość obu plików jest jak poniżej -

.bowerrc - To powie Bowerowi, gdzie umieścić nasze pliki -

{
   "directory": "public/libs"
}

bower.json - Jest to podobne do pliku package.json i powie Bowerowi, które pakiety są potrzebne.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Następnie zainstaluj komponenty Bower za pomocą poniższego polecenia. Możesz zobaczyć, jak bower wyciąga wszystkie pliki w public / libs .

$ bower install

Nasza struktura katalogów wyglądałaby następująco -

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Kontrolery kątowe

Nasz kontroler (public / js / controllers / MainCtrl.js) jest następujący -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

Kontroler public / js / controllers / StudentCtrl.js wygląda następująco -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Trasy kątowe

Nasz plik tras (public / js / appRoutes.js) wygląda następująco -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

Teraz, gdy mamy nasze kontrolery i trasy, połączymy je wszystkie i wstrzykniemy te moduły do ​​naszego głównego publicznego / js / app.js w następujący sposób -

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

Zobaczyć plik

Angular używa pliku szablonu, który można wstawić do <div ng-view> </div> w pliku index.html. Dyrektywa ng-view tworzy element zastępczy, w którym można umieścić odpowiedni widok (widok HTML lub szablon ng-template) na podstawie konfiguracji. Aby uzyskać więcej informacji na temat widoków kątowych, odwiedź ten link .

Kiedy będziesz gotowy do routingu, utwórz mniejsze pliki szablonów i wstaw je do pliku index.html . Plik index.html będzie zawierał następujący fragment kodu -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Uruchomiona aplikacja

Wykonanie

Możesz pobrać kod źródłowy tej aplikacji w tym linku . Pobierz plik zip; wyodrębnij go w swoim systemie. Otwórz terminal i uruchom poniższe polecenie, aby zainstalować zależności modułów npm.

$ cd mean-demo
$ npm install

Następnie uruchom poniższe polecenie -

$ node start

Otrzymasz potwierdzenie, jak pokazano na poniższym obrazku -

Teraz przejdź do przeglądarki i wpisz http://localhost:3000. Otrzymasz stronę, jak pokazano na poniższym obrazku -

Kliknij łącze Uczniowie , zobaczysz ekran jak poniżej -

Nasza nakładka Angular użyje pliku szablonu i wstawi go do <div ng-view> </div> w naszym pliku index.html . Zrobi to bez odświeżania strony.

W poprzednim rozdziale widzieliśmy tworzenie pojedynczej strony aplikacji meanjs przy użyciu Angularjs. W tym rozdziale zobaczmy, jak aplikacja Angular wykorzystuje API do pobierania danych z Mongodb.

Możesz pobrać kod źródłowy tej aplikacji w tym linku . Pobierz plik zip; wyodrębnij go w swoim systemie.

Struktura katalogów naszego kodu źródłowego jest następująca -

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -server.js

W tej aplikacji stworzyliśmy widok (home.html), który będzie zawierał listę wszystkich uczniów z kolekcji Student, co pozwoli nam stworzyć nowy studentrekord i pozwól nam usunąć rekord ucznia. Wszystkie te operacje są wykonywane za pośrednictwem wywołań REST API.

Otwórz terminal i uruchom poniższe polecenie, aby zainstalować zależności modułów npm.

$ npm install

Następnie zainstaluj komponenty Bower za pomocą poniższego polecenia. Możesz zobaczyć, jak bower wyciąga wszystkie pliki w public / libs.

$ bower install

Konfiguracja węzła dla aplikacji zostanie zapisana w pliku server.js. To jest główny plik aplikacji węzła i skonfiguruje całą aplikację.

// modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// set our port
const port = 3000;
// configuration ===========================================
// configure body parser
app.use(bodyParser.json()); // parse application/json

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students); // return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Definiowanie trasy frontendu

Plik public / index.html będzie zawierał następujący fragment kodu -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Napisaliśmy usługę do wykonywania wywołań API i wykonywania żądań API. Nasza usługa StudentService wygląda jak poniżej -

angular.module('StudentService', [])
// super simple service
// each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

Nasz kod kontrolera (MainCtrl.js) wygląda jak poniżej -

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
   // CREATE 
   // when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
      // validate the formData to make sure that something is there
      // if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
         // call the create function from our service (returns a promise object)
         Student.create($scope.formData)
         // if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

Uruchomiona aplikacja

Przejdź do katalogu projektu i uruchom poniższe polecenie -

$ npm start

Teraz przejdź do http://localhost:3000 a otrzymasz stronę, jak pokazano na poniższym obrazku -

Wprowadź tekst w polu tekstowym i kliknij Addprzycisk. Rekord zostanie dodany i wyświetlony w następujący sposób -

Możesz usunąć rekord, zaznaczając pole wyboru.