Введение в MEAN Stack

Это было давно, так как аббревиатура LAMP (Linux Apache MySql PHP) была создана. Сегодня другим очень распространенным стеком является MEAN-стек. Вероятно, не все из вас знают, что означает аббревиатура «MEAN», поэтому давайте начнем с основного. MEAN означает MongoDB , Express , AngularJS и Node.js. Он занимается полным стеком JavaScript-решения для создания веб-сайтов и веб-приложений. От базы данных до внутреннего кода и внешнего кода все написано с использованием JavaScript. Если вы не знакомы с технологиями, используемыми стеком MEAN, вы можете найти краткое введение в эти технологии в следующем разделе.

Вы можете найти весь исходный код этой статьи на GitHub . Не стесняйтесь раскошелиться и поиграть с ним.

ЖАДНЫЙ

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

E обозначает Express , легкий, минималистский фреймворк, созданный для Node.js. Он был создан для веб-приложений и API и поставляется с множеством средств HTTP для разработчика.

A обозначает AngularJS , модель-представление-независимо от JS-фреймворка, созданного Google. AngularJS делает использование API настолько простым, насколько это возможно, поэтому использование его в качестве клиентской части MEAN очень полезно для каждого разработчика. Более того, AngularJS оптимизирован для мобильной разработки, поэтому, используя ту же базу кода в браузере, вы уже создали мобильное приложение для разрабатываемого веб-приложения.

N означает Node.js , основа Express. Он работает на движке Chrome V8 и способен к неблокирующим событиям ввода-вывода. Приложение Node.js будет обрабатывать несколько запросов в одном сервисе, не блокируя друг друга (следовательно, не блокируя).

Предпосылки

Перед началом убедитесь, что у вас установлены MongoDB и Node.js. Node.js поставляется с менеджером пакетов npm , который мы будем использовать для управления пакетами (зависимостями). Если у вас есть опыт работы с PHP, npm является эквивалентом Composer , а Packagist будет npmjs.org . Там вы найдете практически эквивалентный пакет для каждого используемого вами пакета PHP, что упрощает переход к веб-приложению Node.js.

Первый Экспресс Сервер

Прежде всего, запустите следующую команду на вашем терминале:

 npm init 

После ответа на вопросы он создаст файл package.json с необходимой информацией. Вот мой:

 { "name": "sp-mean", "version": "0.1.0", "description": "An introduction to MEANstack for SitePoint", "main": "server.js", "scripts": { "start": "node ./server" }, "author": , "license": "None" } 

"main": "server.js" означает, что основным файлом, который будет выполняться на сервере, является server.js .

В качестве второго шага давайте добавим express как зависимость, выполнив команду:

 npm install express --save 

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

На этом этапе следующим шагом является написание приложения Express, которое будет действовать как сервер:

 var express = require('express'), app = express(); app.get('/', function(req, res) { res.send("Hello from Express"); }); app.listen(3000, function() { console.log("Server ready. Listening on port 3000"); }); 

npm start команду npm start сервер перейдет на http: // localhost: 3000 и отправит Hello from Express когда вы перейдете к индексу.

 npm install monk --save 

 mongo 

 use starwars; db.character.insert({ name: "Luke", surname: "Skywalker", side: "Light", weapon: "Lightsaber" }); db.character.insert({ name: "Yoda", side: "Light", weapon: "Lightsaber" }); db.character.insert({ sith_name: "Vader", side: "Dark", weapon: "Lightsaber" }); db.character.insert({ sith_name: "Sidious", side: "Dark", weapon: "Force lightning" }); 

 var monk = require('monk'); 

 var swChars = monk('localhost:27017/starwars').get('character'); 

 var db = monk('localhost:27017/starwars'); var swChars = db.get('character'); 

 app.get('/character', function (req, res) { swChars.find({}, function (err, docs) { if (err == null) { res.json(docs); } else { console.log(err); } }); }); 

 app.get('/jedi', function (req, res) { swChars.find({side: "Light"}, function (err, docs) { if (err == null) { res.json(docs); } else { console.log(err); } }); }); 

 # create a bower.json file to store dependencies bower init bower install angular#1.4.3 --save 

 активы / JS / ngapp.js
 активы / JS / контроллеры
 активы / JS / услуги

 var app = angular.module('starwars', []); 

 app.factory('StarWarsFactory', function ($http) { return { characters: function () { return $http.get('/character'); }, jedi: function () { return $http.get('/jedi'); } } }); 

 app.controller('MainCtrl',function(StarWarsFactory) { var self = this; StarWarsFactory.characters().success(function(data) { self.charList = data; }); }); 

 <div ng-controller="MainCtrl as m"> <ul> <li ng-repeat="item in m.charList"> <span ng-if="item.side === 'Light'"> {{item.name}} {{item.surname}} uses {{item.weapon}} </span> <span ng-if="item.side === 'Dark'"> Darth {{item.sith_name}} uses {{item.weapon}} </span> </li> </ul> </div> 

 app.use('/', express.static(__dirname + '/')); app.get('/', function (req, res) { res.sendFile(path.join(__dirname + "/index.html")); });