Введение в MEAN Stack

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

MEAN означает:

1. M - MongoDB
2. E - Экспресс
3. A - Угловой
4. N - Node.js

Этот стек ускоряет разработку, а также развертывание веб-приложения. Angular - это среда разработки Frontend, тогда как Node.js, Express и MongoDB используются для разработки Backend, как показано на рисунке ниже.

Поток данных в приложении MEAN Stack: здесь каждый модуль обменивается данными с другими, чтобы иметь поток данных от сервера / бэкэнда к клиенту / клиентскому интерфейсу.

Начало работы с каждой технологией с примерами: описание каждой технологии в этом стеке, а также ссылки для их изучения приведены ниже:

1. Node.js: Node.js используется для написания серверного кода в Javascript. Одним из наиболее важных моментов является то, что он запускает код JavaScript вне браузера. Он кроссплатформенный и с открытым исходным кодом.

• Предварительные требования для изучения Node.js - JavaScript / TypeScript
• Перейдите в раздел Загрузки Node.js и нажмите кнопку «Загрузить», чтобы получить последнюю версию и установить в соответствии с вашей операционной системой.
• Убедитесь, что он установлен правильно, проверив версию:

   узел -v

  Если версия не получена, значит она установлена неправильно.

• Проверьте версию npm (по умолчанию она устанавливается вместе с узлом):

   npm -v

• Создайте файл index.js внутри папки проекта и скопируйте в него следующий код:
  
  

  
  
  

  var http = require( "http" ); http.createServer( function (request, response) { response.writeHead(200, { 'Content-Type' : 'text/plain' }); // Send the response text as "Hello World" response.end( 'Hello World ' ); }).listen(3100); console.log( 'Server running at http://127.0.0.1:3100/ ' );

• Теперь откройте терминал и выполните следующую команду:

   узел index.js

• В консоли терминала вы увидите журнал, в котором говорится:

   Сервер работает по адресу http://127.0.0.1:3100/

• Перейдите в браузер и введите URL-адрес: http://127.0.0.1:3100/, вы увидите результат, как показано ниже:
  
• Ссылки, чтобы узнать больше о Node.js:
  1. Введение в Node.js
  2. Руководства по Node.js
  3. Ознакомьтесь с последней версией Node.js

2. AngularJS: Angular - это интерфейсная среда с открытым исходным кодом, разработанная командой Google. Этот фреймворк пересмотрен таким образом, что сохраняется обратная совместимость (если есть какие-либо критические изменения, Angular сообщает об этом очень рано). Angular-проекты легко создавать с помощью инструмента Angular CLI (Command Line Interface), разработанного командой Angular.

• Предпосылки для изучения Angular:
  1. Машинопись
  2. Препроцессор CSS
  3. Код шаблона (Angular Material, HTML 5 и т. Д.)
• Установка Angular CLI - Интерфейс командной строки с использованием npm (Node Package Manager)

   npm install -g @ angular / cli

• Теперь проверьте, правильно ли он был установлен, используя следующую команду:

   ng --version

  Должно появиться что-то вроде:
  

• Теперь создайте новый проект, используя команду ниже:

   ng новое имя_проекта

• Перейдите в каталог проекта, используя команду ниже:

   cd имя_проекта

• Запустите приложение Angular, используя команду ниже:

   нг подавать

• Приложение запустится на http: // localhost: 4200, вы увидите следующее:
  
• Теперь внесите изменения в файл app.component.html и сохраните файл, приложение перезагрузится автоматически, и соответствующие изменения будут отражены.
• Ссылки на статьи по Angular:
  1. AngularJS
  2. Введение в Angular 7
  3. Установка Angular 7
  4. Angular 7 Data Services и наблюдаемые объекты
  5. Приложение Angular 7 Simple To do
  6. Узнайте о последней версии Angular

3. MongoDB: MongoDB - это база данных NoSQL. У него есть документы типа JSON. Это база данных, ориентированная на документы.

• Предварительные условия для изучения MongoDB:
  1. Что такое база данных
  2. Недостатки базы данных SQL
• Создание базы данных:

   используйте имя_базы_данных;

• Создать коллекцию:

   db.createCollection ("первая_коллекция");

• Вставить запись в Коллекцию:

   db.first_collection.insertOne (
      {name: "Гики для гиков"}
  );

• Распечатайте все записи в коллекции:

   db.first_collection.find () 

  

• Ссылки, касающиеся MongoDB:
  1. Введение в MongoDB
  2. Начало работы с MongoDB
  3. Определение, создание и удаление коллекции MongoDB.
  4. Как работает MongoDB?
  5. Ознакомьтесь с последней версией MongoDB.

4. ExpressJS: Express - это веб-фреймворк, построенный на Node.js и используемый для создания API и создания веб-приложений.

• Предварительные условия для изучения Express:
  1. JavaScript / TypeScript
  2. Node.js
• Инициализируйте проект, набрав в терминале следующую команду:

   npm init

• Он задаст несколько вопросов. Нажмите Enter, чтобы установить все параметры по умолчанию. Это создаст файл package.json, как показано ниже:
  
  

  
  
  

  { "name" : "gfg-express" , "version" : "1.0.0" , "description" : "Basic Express Node.js Application" , "main" : "index.js" , "scripts" : { "test" : "echo "Error: no test specified" && exit 1" }, "author" : "" , "license" : "ISC" , }

• Установите экспресс, используя команду ниже:

   npm install express --save 

  

• Теперь файл package.json будет изменен, чтобы добавить зависимости, как показано ниже:
  
  

  
  
  

  { "name" : "gfg-express" , "version" : "1.0.0" , "description" : "Basic Express Node.js Application" , "main" : "index.js" , "scripts" : { "test" : "echo "Error: no test specified" && exit 1" }, "author" : "" , "license" : "ISC" , "dependencies" : { "express" : "^4.17.1" } }

• Создайте файл index.js и добавьте в него приведенный ниже код:
  
  

  
  
  

  const express = require( 'express' ) const app = express() const PORT = 3000 app.get( '/' , (req, res) => res.send( 'Hello World!' )) app.listen(PORT, () => console.log( `Example app listening at http: //localhost:${PORT}`))

• Запустите экспресс-сервер, используя команду ниже:

   узел index.js

• Перейдите по адресу http: // localhost: 3000, чтобы увидеть результат, как показано ниже:
  
• Ссылки для изучения ExpressJS:
  1. Введение в Express
  2. Создайте первое приложение с помощью Express