MEAN.JS - Краткое руководство

Что такое MEAN.js?

Срок MEAN.js- это полное решение с открытым исходным кодом на JavaScript, используемое для создания динамических веб-сайтов и веб-приложений. MEAN - это аббревиатура, обозначающаяMongoDB, Express, Node.js и AngularJS, которые являются ключевыми компонентами стека MEAN.

Он был в основном разработан для решения общих проблем с подключением этих фреймворков (Mongo, Express Nodejs, AngularJS), создания надежного фреймворка для поддержки повседневных потребностей разработки и помощи разработчикам в использовании передовых методов при работе с популярными компонентами JavaScript.

Стек означает использование базы данных и веб-сервера в задней части, в середине у вас будет логика и контроль для приложения и взаимодействия пользователя во внешнем интерфейсе.

• MongoDB - Система баз данных

• Express - Внутренняя веб-платформа

• Node.js - Платформа веб-сервера

• AngularJS - Интерфейсный фреймворк

История

Название MEAN было придумано Валерием Карповым , разработчиком MongoDB.

Зачем использовать MEAN.js?

• Это платформа с открытым исходным кодом, которую можно использовать бесплатно.

• Его можно использовать как отдельное решение для всего приложения.

• Это обеспечивает более низкую стоимость разработки и увеличивает гибкость и эффективность разработчика.

• Он поддерживает шаблон MVC и использует JSON для передачи данных.

• Он предоставляет дополнительные фреймворки, библиотеки и повторно используемые модули для увеличения скорости разработки.

Прежде чем мы начнем с дальнейших концепций, мы увидим основные строительные блоки приложения MEAN.JS.

Введение в MongoDB

В сокращении MEAN ,Mозначает MongoDB, базу данных NoSQL с открытым исходным кодом, которая сохраняет данные в формате JSON. Он использует документно-ориентированную модель данных для хранения данных вместо использования таблиц и строк, как мы используем в реляционных базах данных. Он хранит данные в двоичном формате JSON (JavaScript Serialized Object Notation), чтобы легко передавать данные между клиентом и сервером. MongoDB работает над концепцией коллекции и документа. Для получения дополнительной информации перейдите по этой ссылке MongoDB .

Введение в Express

В сокращении MEAN ,Eрасшифровывается как Express , который представляет собой гибкую структуру веб-приложений Node.js, которая упрощает процесс разработки. Его легко настроить и настроить, что позволяет создавать безопасные, модульные и быстрые приложения. Он определяет маршруты приложения в зависимости от методов HTTP и URL-адресов. Вы можете легко подключаться к таким базам данных, как MongoDB, MySQL, Redis. Для получения дополнительной информации перейдите по этой ссылке Express .

Введение в AngularJS

В сокращении MEAN ,Aрасшифровывается как AngularJS , веб-интерфейс JavaScript. Он позволяет создавать динамические одностраничные приложения с использованием чистого контроллера представления модели (MVC). AngularJS автоматически обрабатывает код JavaScript, подходящий для каждого браузера. Для получения дополнительной информации перейдите по этой ссылке AngularJS .

Введение в Node.js

В сокращении MEAN ,Nозначает Node.js , серверную платформу, используемую для разработки веб-приложений, таких как сайты потокового видео, одностраничные приложения и другие веб-приложения. Он предоставляет богатую библиотеку различных модулей JavaScript, которая в значительной степени упрощает разработку веб-приложений с использованием Node.js. Он построен на движке JavaScript V8 Google Chrome, поэтому очень быстро выполняет код. Для получения более подробной информации, обратитесь к этой ссылке Node.js .

MEAN - это платформа JavaScript с открытым исходным кодом, используемая для создания динамических веб-сайтов и веб-приложений. Он включает следующие четыре строительных блока для создания приложения.

• MongoDB - Это база данных документов, в которой данные хранятся в гибких документах типа JSON.

• Express - Это фреймворк веб-приложений для Nodejs.

• Node.js- Это платформа веб-сервера. Он предоставляет богатую библиотеку различных модулей JavaScript, которая упрощает разработку веб-приложений.

• AngularJS- Это веб-интерфейс JavaScript. Он позволяет создавать динамические одностраничные приложения с использованием чистого контроллера представления модели (MVC).

Для получения дополнительной информации об этом вы можете обратиться к обзорной главе. На диаграмме ниже изображена архитектура приложения стека MEAN.

Как показано на изображении выше, у нас есть AngularJS в качестве клиентского языка, который обрабатывает запрос клиента.

• Каждый раз, когда пользователь делает запрос, он сначала обрабатывается AngularJS.

• Затем запрос переходит на второй этап, где у нас есть Node.js в качестве языка на стороне сервера и ExpressJS в качестве серверной веб-инфраструктуры.

• Node.js обрабатывает запросы клиент / сервер, а ExpressJS делает запрос к базе данных.

• На последнем этапе MongoDB (база данных) извлекает данные и отправляет ответ ExpressJS.

• ExpressJS возвращает ответ Nodejs и, в свою очередь, AngularJS, а затем отображает ответ пользователю.

В этой главе рассказывается о создании и настройке приложения MEAN. Мы используем NodeJS и ExpressJS вместе для создания проекта.

Предпосылки

Прежде чем мы начнем создавать приложение MEAN, нам нужно установить необходимые предварительные условия.

Вы можете установить последнюю версию Node.js, посетив веб-сайт Node.js по адресу Node.js (это для пользователей Windows). Когда вы загружаете Node.js, npm автоматически устанавливается в вашей системе. Пользователи Linux могут установить Node и npm по этой ссылке .

Проверьте версию Node и npm с помощью следующих команд -

$ node --version
$ npm --version

Команды будут отображать версии, как показано на изображении ниже -

Создание экспресс-проекта

Создайте каталог проекта с помощью команды mkdir, как показано ниже -

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

Вышеупомянутый каталог является корнем приложения узла. Теперь, чтобы создать файл package.json, выполните следующую команду -

$ cd webapp-demo
$ npm init

Команда init проведет вас через создание файла package.json -

Эта утилита проведет вас через создание файла package.json. Он охватывает только самые распространенные элементы и пытается угадать разумные значения по умолчанию.

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

Нажмите Да, и будет создана структура папок, как показано ниже -

-mean-demo
   -package.json

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"
}

Теперь, чтобы настроить проект Express в текущую папку и установить параметры конфигурации для фреймворка, используйте следующую команду -

npm install express --save

Перейдите в каталог своего проекта и откройте файл 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",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Здесь вы можете увидеть, что в файл добавлена ​​явная зависимость. Теперь структура проекта следующая -

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

Запуск приложения

Перейдите в каталог только что созданного проекта и создайте файл server.js с приведенным ниже содержимым.

// 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}!`));

Затем запустите приложение с помощью следующей команды -

$ npm start

Вы получите подтверждение, как показано на изображении ниже -

Сообщает, что приложение Express запущено. Откройте любой браузер и войдите в приложение, используяhttp://localhost:3000. Вы увидите Добро пожаловать в Tutorialspoint! текст, как показано ниже -

В этой главе демонстрируется построение маршрута для приложения с Node и Express.

В предыдущей главе мы создали приложение node-express. Перейдите в каталог проекта под названием mean-demo . Перейдите в каталог с помощью команды ниже -

$ cd mean-demo

Настройка маршрутов

Маршруты используются в качестве картографической службы с использованием URL-адреса входящего запроса. Открытьserver.js файл и настройте маршрутизацию, как показано ниже -

// 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}!`));

Запуск приложения

Затем запустите приложение с помощью следующей команды -

$ npm start

Вы получите подтверждение, как показано на изображении ниже -

Теперь перейдите в браузер и введите http://localhost:3000/myroute. Вы получите страницу, как показано на изображении ниже -

В этой главе мы продемонстрируем, как использовать модель данных в нашем приложении Node-express.

MongoDB - это база данных NoSQL с открытым исходным кодом, которая сохраняет данные в формате JSON. Он использует документно-ориентированную модель данных для хранения данных вместо использования таблиц и строк, как мы используем в реляционных базах данных. В этой главе мы используем Mongodb для построения модели данных.

Модель данных определяет, какие данные присутствуют в документе и какие данные должны быть в документе. Обратитесь к официальной установке MongoDB , чтобы установить MongoDB.

Мы будем использовать наш код предыдущей главы. Вы можете скачать исходный код по этой ссылке . Загрузите zip-файл; извлеките его в свою систему. Откройте терминал и выполните команду ниже, чтобы установить зависимости модуля npm.

$ cd mean-demo
$ npm install

Добавление Mongoose в приложение

Mongoose - это библиотека моделирования данных, которая определяет среду и структуру данных, делая MongoDB мощным. Вы можете установить Mongoose как модуль npm через командную строку. Перейдите в корневую папку и выполните следующую команду -

$ npm install --save mongoose

Приведенная выше команда загрузит новый пакет и установит его в папку node_modules . --Save флаг добавит этот пакет 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",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

Настройка файла подключения

Для работы с моделью данных мы будем использовать папку app / models . Давайте создадим модель student.js, как показано ниже -

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: ''}
});

Вы можете настроить файл подключения, создав файл и используя его в приложении. Создайте файл с именем db.js в конфигурации / db.js . Содержимое файла показано ниже -

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

Здесь test - это имя базы данных.

Здесь предполагается, что вы установили MongoDB локально. После установки запустите Mongo и создайте базу данных по имени test. Эта база данных будет иметь коллекцию по именам студентов. Вставьте данные в эту коллекцию. В нашем случае мы вставили запись с помощью db.students.insertOne ({name: 'Manisha', place: 'Pune', country: 'India'});

Доведите db.js файл в приложении, то есть, в server.js . Содержание файла показано ниже -

// 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}!`));

Затем запустите приложение с помощью следующей команды -

$ npm start

Вы получите подтверждение, как показано на изображении ниже -

Теперь перейдите в браузер и введите http://localhost:3000/api/students. Вы получите страницу, как показано на изображении ниже -

В этой главе мы увидим, как наше приложение взаимодействует через REST API с нашей базой данных с помощью методов HTTP. Термин REST означает REpresentational State Transfer, который представляет собой архитектурный стиль, разработанный для взаимодействия с веб-службами, а API означает интерфейс прикладных программ, который позволяет взаимодействовать приложениям друг с другом.

Сначала мы создадим RESTful API, чтобы получить все элементы, создать элемент и удалить элемент. Для каждого элемента _ID будет сгенерирован автоматически MongoDB. В таблице ниже описано, как приложение должно запрашивать данные из API.

HTTP метод	URL-путь	Описание
ПОЛУЧИТЬ	/api/students	Используется для получения всех учеников из коллекции Student.
ПОСЛЕ	/api/students/send	Используется для создания студенческой записи в коллекции Student.
УДАЛЯТЬ	/api/students/student_id	Используется для удаления студенческой записи из коллекции Студент.

RESTful API-маршруты

Сначала мы обсудим метод публикации в маршрутах RESTful API.

ПОСЛЕ

Сначала создадим запись в коллекции Student через наш REST API. Код для этого конкретного случая можно найти в файле server.js . Для справки сюда вставлена ​​часть кода -

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!' });
   });
});

Исполнение

Вы можете скачать исходный код этого приложения по этой ссылке . Загрузите zip-файл; извлеките его в свою систему. Откройте терминал и запустите приведенную ниже команду, чтобы установить зависимости модуля npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Для синтаксического анализа запроса нам понадобится пакет парсера тела. Следовательно, запустите приведенную ниже команду, чтобы включить ее в свое приложение.

npm install --save body-parser

Прилагаемый исходный код уже имеет эту зависимость, поэтому нет необходимости запускать указанную выше команду, это только для вашей информации.

Чтобы запустить приложение, перейдите в каталог только что созданного проекта и запустите его с помощью приведенной ниже команды -

npm start

Вы получите подтверждение, как показано на изображении ниже -

Существует множество инструментов для тестирования вызовов API, здесь мы используем одно из удобных расширений для Chrome под названием Postman REST Client .

Откройте клиент REST Postman, введите URL-адрес как http://localhost:3000/api/students/send, выберите метод POST . Затем введите данные запроса, как показано ниже -

Обратите внимание, что мы отправляем данные имени как x-www-form-urlencoded . Это отправит все наши данные на сервер Node в виде строк запроса.

Нажмите кнопку « Отправить» , чтобы создать запись об ученике. Появится сообщение об успехе, как показано ниже -

ПОЛУЧИТЬ

Теперь давайте получим все студенческие записи из mongodb. Необходимо написать следующий маршрут. Вы можете найти полный код в файле 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
   });
});

Затем откройте клиент REST Postman, введите URL-адрес как

http://localhost:3000/api/students, выберите метод GET и нажмите кнопку «Отправить», чтобы получить всех учащихся.

УДАЛЯТЬ

Затем давайте посмотрим, как удалить запись из нашей коллекции mongo с помощью вызова REST api.

Необходимо написать следующий маршрут. Вы можете найти полный код в файле 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' });
   });
});

Затем откройте клиент REST Postman, введите URL-адрес как

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

(здесь 5d1492fa74f1771faa61146d - это запись, которую мы будем удалять из коллекции Student).

Выберите метод УДАЛИТЬ и нажмите кнопку « Отправить» , чтобы получить всех студентов.

Вы можете проверить MongoDB на наличие удаленных данных, выполнив GET-вызов http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

В этой главе мы добавим в приложение компоненты angular. Это интерфейс JavaScript для веб-интерфейса, который позволяет создавать динамические одностраничные приложения с использованием шаблона Model View Controller (MVC). В главе об архитектуре MEAN.JS вы видели, как AngularJS обрабатывает клиентский запрос и получает результат из базы данных.

Знакомство с AngularJS

AngularJS - это платформа веб-приложений с открытым исходным кодом, которая использует HTML в качестве языка шаблонов и расширяет синтаксис HTML для четкого выражения компонентов вашего приложения. AngularJS предоставляет некоторые базовые функции, такие как привязка данных, модель, представления, контроллеры, службы и т. Д. Для получения дополнительной информации об AngularJS перейдите по этой ссылке .

Вы можете сделать страницу приложением Angular, добавив на страницу Angular. Его можно добавить, просто используя внешний файл JavaScript, который можно либо загрузить, либо на него можно напрямую ссылаться в версии CDN.

Предположим, мы загрузили файл и сослались на него локально, добавив на страницу следующее:

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

Теперь нам нужно сообщить Angular, что эта страница является приложением Angular. Следовательно, мы можем сделать это, добавив атрибут ng-app к тегу <html> или <body>, как показано ниже -

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

Приложение ng-app можно добавить к любому элементу на странице, но его часто помещают в теги <html> или <body>, чтобы Angular мог работать где угодно на странице.

Angular приложение как модуль

Для работы с приложением Angular нам нужно определить модуль. Это место, где вы можете сгруппировать компоненты, директивы, службы и т. Д., Которые связаны с приложением. На имя модуля ссылается атрибут ng-app в HTML. Например, мы назовем имя модуля приложения Angular как myApp и можем указать его в теге <html>, как показано ниже -

<html ng-app="myApp">

Мы можем создать определение для приложения, используя инструкцию ниже во внешнем файле JavaScript -

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

Определение контроллера

Приложение AngularJS полагается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller .

Например, мы прикрепим контроллер к телу с помощью директивы ng-controller вместе с именем контроллера, который вы хотите использовать. В строке ниже мы используем имя контроллера как «myController».

<body ng-controller="myController">

Вы можете присоединить контроллер (myController) к модулю Angular (myApp), как показано ниже -

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

Лучше использовать именованную функцию вместо анонимной для удобства чтения, повторного использования и тестирования. В приведенном ниже коде мы используем новую именованную функцию «myController» для хранения кода контроллера -

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

Для получения дополнительной информации о контроллерах перейдите по этой ссылке .

Определение объема

Область видимости - это специальный объект JavaScript, который связывает контроллер с представлениями и содержит данные модели. В контроллерах доступ к данным модели осуществляется через объект $ scope. Функция контроллера принимает параметр $ scope, который был создан Angular, и предоставляет прямой доступ к модели.

В приведенном ниже фрагменте кода указано, как обновить функцию контроллера для получения параметра $ scope и установить значение по умолчанию -

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

Для получения дополнительной информации о контроллерах перейдите по этой ссылке . В следующей главе мы начнем создавать одностраничное приложение с помощью Angular.

В стеке MEAN Angular известен как вторая структура JavaScript, которая позволяет создавать одностраничные приложения с использованием чистого контроллера представления модели (MVC).

AngularJS в качестве интерфейсной структуры использует следующие вещи:

• Использует Bower для установки файлов и библиотек

• Использует контроллеры и сервисы для структуры приложения Angular

• Создает разные HTML-страницы

• Использует модуль ngRoute для обработки маршрутизации и сервисов для приложения AngularJS

• Использует Bootstrap, чтобы сделать приложение привлекательным

Настройка нашего приложения Angular

Давайте создадим простое приложение с серверной частью Node.js и интерфейсом AngularJS. Для нашего приложения Angular нам понадобится -

• Две разные страницы (Домашняя, Студенческая)

• Разный угловой контроллер для каждого

• Нет обновления страницы при переключении страниц

Бауэр и вытягивание компонентов

Нам понадобятся определенные файлы для нашего приложения, такие как bootstrap и angular. Мы попросим беседку принести нам эти компоненты.

Сначала установите bower на свой компьютер, выполнив следующую команду на своем командном терминале -

npm install -g bower

Это установит bower и сделает его доступным глобально в вашей системе. Теперь поместите файлы .bowerrc и bower.json в корневую папку. В нашем случае этоmean-demo. Содержание обоих файлов показано ниже -

.bowerrc - Это скажет Бауэру, где разместить наши файлы -

{
   "directory": "public/libs"
}

bower.json - Это похоже на package.json и сообщает Bower, какие пакеты необходимы.

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

Затем установите компоненты Bower, используя следующую команду. Вы можете увидеть, как bower вытягивает все файлы в public / libs .

$ bower install

Наша структура каталогов будет следующей -

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

Угловые контроллеры

Наш контроллер (public / js / controllers / MainCtrl.js) выглядит следующим образом:

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

Контроллер public / js / controllers / StudentCtrl.js выглядит следующим образом:

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

Угловые маршруты

Наш файл маршрутов (public / js / appRoutes.js) выглядит следующим образом:

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);
}]);

Теперь, когда у нас есть контроллеры и маршруты, мы объединим их все и внедрим эти модули в наш основной общедоступный / js / app.js следующим образом:

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

Посмотреть файл

Angular использует файл шаблона, который можно вставить в <div ng-view> </div> в файле index.html. Директива ng-view создает заполнитель, в который может быть помещено соответствующее представление (представление HTML или ng-template) в зависимости от конфигурации. Для получения дополнительной информации об угловых представлениях перейдите по этой ссылке .

Когда вы будете готовы к маршрутизации, создайте файлы шаблонов меньшего размера и вставьте их в файл index.html . Index.html файл будет иметь следующий фрагмент кода -

<!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>

Запуск приложения

Исполнение

Вы можете скачать исходный код этого приложения по этой ссылке . Загрузите zip-файл; извлеките его в свою систему. Откройте терминал и запустите приведенную ниже команду, чтобы установить зависимости модуля npm.

$ cd mean-demo
$ npm install

Затем запустите следующую команду -

$ node start

Вы получите подтверждение, как показано на изображении ниже -

Теперь перейдите в браузер и введите http://localhost:3000. Вы получите страницу, как показано на изображении ниже -

Щелкните ссылку Студенты , вы увидите экран, как показано ниже -

Наш интерфейс Angular будет использовать файл шаблона и вставлять его в <div ng-view> </div> в нашем файле index.html . Это будет сделано без обновления страницы.

В предыдущей главе мы видели создание одностраничного приложения meanjs с использованием Angularjs. В этой главе давайте посмотрим, как приложение Angular использует API для получения данных из Mongodb.

Вы можете скачать исходный код этого приложения по этой ссылке . Загрузите zip-файл; извлеките его в свою систему.

Структура каталогов нашего исходного кода выглядит следующим образом -

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

В этом приложении мы создали представление (home.html), в котором будут перечислены все студенты из коллекции Student, что позволит нам создать новый studentзаписать и разрешить нам удалить студенческую запись. Все эти операции выполняются через вызовы REST API.

Откройте терминал и запустите приведенную ниже команду, чтобы установить зависимости модуля npm.

$ npm install

Затем установите компоненты Bower, используя следующую команду. Вы можете увидеть, как bower вытягивает все файлы в public / libs.

$ bower install

Конфигурация узла для приложения будет сохранена в файле server.js. Это основной файл приложения узла, он будет настраивать все приложение.

// 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}!`));

Определение Frontend Route

Общественности / index.html файл будет иметь следующий фрагмент кода -

<!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>

Мы написали сервис для выполнения вызовов API и выполнения запросов API. Наш сервис, StudentService, выглядит следующим образом -

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);
      }
   }
}]);

Код нашего контроллера (MainCtrl.js) выглядит следующим образом:

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
      });
   };
}]);

Запуск приложения

Перейдите в каталог вашего проекта и выполните команду, указанную ниже -

$ npm start

Теперь перейдите к http://localhost:3000 и вы получите страницу, как показано на изображении ниже -

Введите текст в текстовое поле и нажмите Addкнопка. Запись добавляется и отображается следующим образом -

Вы можете удалить запись, установив флажок.