Содержание


MEAN-программирование

знакомство со стеком MEAN

Разработка современных, полнофункциональных веб-проектов двадцать первого века — от начала и до конца

Comments

Серия контента:

Этот контент является частью # из серии # статей: MEAN-программирование

Следите за выходом новых статей этой серии.

Этот контент является частью серии:MEAN-программирование

Следите за выходом новых статей этой серии.

В своей книге, вышедшей в 2002 году, Дэвид Вайнбергер назвал бурно развивающийся веб-контент набором мелких слабо связанных элементов. Эта метафора мне запомнилась, потому что легко впасть в заблуждение, представляя себе веб как монолитный технологический комплекс. На самом же деле каждый веб-сайт, который вы посещаете, — это результат уникального сочетания всевозможных библиотек, языков и веб-платформ.

Одним из первых наборов веб-технологий с открытым исходным кодом, получивших широкую известность, стал стек LAMP. Для создания веб-страниц на основе HTML использовались операционная система Linux®, веб-сервер Apache, база данных MySQL и язык программирования Perl (или Python, или PHP). Эти технологии не предназначались для совместной работы. Это отдельные проекты, которые собрал воедино один целеустремленный инженер-программист — а затем другой, и еще, и еще. С тех пор мы стали свидетелями «кембрийского взрыва» размножения веб-стеков. Пожалуй, каждый современный язык программирования имеет свою веб-среду (а то и две), в которой собран пестрый набор технологий для быстрого и простого создания нового веб-сайта.

В последнее время в веб-сообществе много говорят о новом стеке MEAN: MongoDB, Express, AngularJS, Node.js. Стек технологий MEAN отражает современный подход к веб-разработке: когда на каждом уровне приложения, от клиента до сервера и персистентности, применяется один и тот же язык (JavaScript). В этой серии статей показано, как выглядит проект веб-разработки MEAN, выходящий за рамки простого синтаксиса, от начала и до конца. Эта первая часть посвящена практическому введению в технологии компонентов стека, включая процессы их установки и настройки. Пример кода приведен в разделе Загрузки.

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

От LAMP к MEAN

MEAN — это больше, чем простая перестановка начальных букв и новых технологий. Смещение базовой платформы с ОС (Linux) к среде исполнения JavaScript (Node.js) несет с собой независимость от ОС: Node.js работает на Windows® и OS X так же, как и на Linux.

Node.js заменяет Apache из стека LAMP. Но Node.js — это гораздо больше, чем просто веб-сервер. На самом деле готовое приложение не развертывается на отдельном веб-сервере; вместо этого сам веб-сервер включается в приложение и автоматически устанавливается в составе стека MEAN. В результате процесс развертывания значительно упрощается, так как требуемая версия веб-сервера явно определена вместе с остальными зависимостями времени выполнения.

Переход от традиционной базы данных, такой как MySQL, к бессхемному, документо-ориентированному NoSQL-хранилищу, такому как MongoDB, представляет собой фундаментальный сдвиг в стратегии персистенции. Программист тратит меньше времени на написание операторов SQL и больше — на написание функций map/reduce на JavaScript. При этом исключаются огромные пласты логики преобразования, так как MongoDB изначально выдает формат JavaScript Object Notation (JSON). В результате предельно упрощается написание веб-сервисов REST.

Но главный сдвиг между LAMP и MEAN заключается в переходе от традиционного генерирования страниц на стороне сервера к ориентации на одностраничные приложения (SPA) на стороне клиента. Express позволяет управлять и маршрутизацией / генерацией страниц на стороне сервера, но теперь — благодаря AngularJS — упор делается на представления на стороне клиента. Эта перемена означает не просто перенос ваших артефактов модель-представление-контроллер (MVC) с сервера в клиентское устройство. Это также скачок от менталитета синхронности к менталитету, носящему событийно-управляемый, принципиально асинхронный характер. И, пожалуй, самое главное, — это движение от странично-ориентированных приложений к компонентно-ориентированным.

Стек MEAN не «заточен» на мобильные приложения — AngularJS одинаково хорошо работает на настольных компьютерах и ноутбуках, смартфонах и планшетах и даже на смарт-телевизорах, — но он и не относится к мобильным устройствам как к гражданам второго сорта. И тестирование больше не откладывается на потом: с помощью платформ тестирования мирового класса, таких как MochaJS, JasmineJS и KarmaJS, можно писать тщательные и всеобъемлющие наборы тестов для своих MEAN-приложений.

Итак, вы готовы к освоению MEAN?

Установка Node.js

Для работы с примером приложения в этой серии статей вам понадобится действующая установка Node.js, так что сейчас самое время установить Node, если вы еще этого не сделали.

Для UNIX®-подобной ОС (Linux, Mac OS X и т.п.) я рекомендую использовать Node Version Manager (NVM). (В противном случае нажмите кнопку Install на домашней странице Node.js, чтобы загрузить инсталлятор для своей ОС, и примите значения по умолчанию.) С помощью NVM легко скачать Node.js и переключаться между различными версиями из командной строки. Это помогает мне в начале каждого нового проекта плавно переходить на следующую версию Node.js.

После установки NVM введите команду nvm ls-remote, чтобы посмотреть, какие версии Node.js доступны для установки, как показано в листинге 1.

Листинг 1. Список доступных версий Node.js в NVM
$ nvm ls-remote

v0.10.20

v0.10.21
v0.10.22
v0.10.23
v0.10.24
v0.10.25
v0.10.26
v0.10.27
v0.10.28

Команда nvm ls показывает, какие версии Node.js у вас уже установлены и какая версия используется в настоящее время.

На момент написания этой статьи на веб-сайте Node в качестве последней стабильной версии была указана версия v0.10.28. Введите команду nvm install v0.10.28, чтобы установить ее локально.

После установки Node.js (через NVM или установщиком для конкретной платформы) введите команду node --version, чтобы убедиться, что вы используете текущую версию:

$ node --version

v0.10.28

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

Node.js — это автономная среда исполнения JavaScript. Практически это тот же механизм JavaScript (называемый V8), который работает в Google Chrome, за исключением того, что Node.js позволяет запускать JavaScript из командной строки, а не из браузера.

Мои студенты посмеялись над идеей запускать JavaScript из командной строки: «Зачем нужен JavaScript, когда нет HTML-кода?» JavaScript действительно впервые появился в веб-браузере (Netscape Navigator 2.0), поэтому этим скептикам можно простить их близорукость и наивность.

На самом же деле у языка программирования JavaScript нет встроенных возможностей для манипуляций с Document Object Model (DOM) или для создания запросов Ajax. Браузеры обеспечивают API-интерфейсы DOM, что позволяет JavaScript делать такого рода вещи, но вне браузера JavaScript теряет эту способность.

Вот пример. Откройте консоль JavaScript в своем браузере (см. боковую врезку Доступ к инструментам разработки браузера). Наберите navigator.appName. Получив ответ, наберите navigator.appVersion. Вы получите результат, аналогичный показанному на рисунке 1.

Рисунок 1. Использование объекта navigator JavaScript в веб-браузере
Использование объекта JavaScript navigator в веб-браузере
Использование объекта JavaScript navigator в веб-браузере

На рисунке 1 ответом на команду navigator.appName служит Netscape, а ответом на команду navigator.appVersion — загадочная строка агента пользователя, знакомая опытным веб-разработчикам. На рисунке 1 (скриншот Chrome на OS X) эта строка выглядит так: 5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36.

Теперь создайте файл с именем test.js. Введите те же команды в файл, упаковав каждую в вызов console.log():

console.log(navigator.appName);
console.log(navigator.appVersion);

Сохраните файл и введите команду node test.js, чтобы запустить его, как показано в листинге 2.

Листинг 2. Сообщение об ошибке в Node.js: navigator is not defined
$ node test.js 

/test.js:1
ion (exports, require, module, __filename, __dirname) { console.log(navigator.
                                                                    ^
ReferenceError: navigator is not defined
    at Object.<anonymous> (/test.js:1:75)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

Как видите, navigator доступен в браузере, но недоступен из Node.js. (Извините за то, что ваш первый сценарий Node.js провалился на ваших глазах, но я хочу, чтобы вы убедились, что выполнение JavaScript в браузере — не то же самое, что в Node.js).

Согласно трассировке стека, не загружается нужный модуль. (Модули — это еще одно важное различие между работой JavaScript в браузере и в Node.js. Подробнее о модулях мы поговорим позже). Чтобы получить аналогичную информацию из Node.js, измените содержимое файла test.js следующим образом:

console.log(process.versions)
console.log(process.arch)
console.log(process.platform)

Снова наберите node test.js, и вы увидите результат, подобный приведенному в листинге 3.

Листинг 3. Использование модуля процесса в Node.js
$ node test.js
 
{ http_parser: '1.0',
  node: '0.10.28',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.27',
  zlib: '1.2.3',

  modules: '11',
  openssl: '1.0.1g' }
x64
darwin

Теперь, когда вы выполнили свой первый успешный сценарий Node.js, пришло время познакомиться со следующей важной концепцией: модулями.

Что такое модули?

В JavaScript можно создавать специализированные функции, но — в отличие от Java, Ruby или Perl — нет возможности объединить несколько функций в единый модуль или «пакет», который можно импортировать и экспортировать. Конечно, любой исходный файл JavaScript можно включить с помощью элемента <script>, но этот проверенный временем метод уступает нормальной декларации модуля по двум важным статьям.

Во-первых, любой JavaScript, включенный с помощью элемента <script>, загружается в глобальное пространство имен. С модулями можно ограничить импортируемые функции переменной в локальном пространстве имен. Во-вторых, и это главное, модули позволяют явно объявить зависимости, а элемент <script> — нет. В результате при импорте модуля А транзитивно импортируются зависимые модули B и C. По мере усложнения приложений возможность управления транзитивными зависимостями быстро становится жизненно важным требованием.

Модули — с нетерпением ожидаемая особенность следующей основной версии JavaScript (ECMAScript 6), но до широкого внедрения этой версии Node.js использует свою собственную версию модулей на основе спецификации CommonJS.

Включите модуль CommonJS в свой сценарий с помощью ключевого слова require. Например, листинг 4 — это слегка измененная версия сценария Hello World, который можно найти на главной странице Node.js. Создайте файл с именем example.js и скопируйте в него код из листинга 4.

Листинг 4. Hello World в Node.js
var http = require('http');
var port = 9090;
http.createServer(responseHandler).listen(port);
console.log('Server running at http://127.0.0.1:' + port + '/');

function responseHandler(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<html><body><h1>Hello World</h1></body></html>');
}

Наберите node example.js, чтобы запустить свой новый веб-сервер, и откройте в веб-браузере страницу http://127.0.0.1:9090.

Посмотрите на первые две строки в листинге 4. Скорее всего, вы сотни (или тысячи) раз писали простые инструкции типа var port = 9090;. Эта инструкция определяет переменную с именем port и присваивает ей значение 9090. Импорт модуля CommonJS, как это сделано в первой строке (var http = require('http');), ничем не отличается. Он вводит модуль http и назначает его локальной переменной. Все сопутствующие модули, на которые опирается http, также вызываются оператором require.

Последующие строки example.js выполняют следующие действия.

  1. Создание нового HTTP-сервера.
  2. Назначение функции для обработки ответов.
  3. Запуск перехватчика входящих запросов HTTP для указанного порта.

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

Модуль http — это стандартная часть любой установки Node.js. В число других стандартных модулей Node.js входят модули ввода-вывода файлов, чтения данных, вводимых пользователем в командной строке, низкоуровневых запросов TCP и UDP и многие другие. В разделе Модули документации Node.js содержится полный список стандартных модулей и описание их возможностей.

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

Что такое NPM?

NPM — расшифровывается как Node Packaged Modules. На веб-сайте NPM имеется список более чем из 75 000 общедоступных сторонних модулей Node. Найдите на этом сайте модуль yo. Результаты показаны на рисунке 2.

Рисунок 2. Подробная информация о модуле yo
Скриншот результатов поиска в NPM модуля yo
Скриншот результатов поиска в NPM модуля yo

Страница результатов содержит краткое описание модуля («Инструмент CLI для подготовки структуры проектов Yeoman»); количество загрузок за прошедший день, неделю и месяц; имя автора; зависимые модули (если есть) и многое другое. Самое главное, что страница результатов дает синтаксис командной строки для установки модуля.

Чтобы получить аналогичную информацию о модуле yo из командной строки, введите npm info yo. (Если вы еще не знаете официального названия модуля, можно ввести npm search yo для поиска любого модуля, имя которого содержит строку yo.) Команда npm info выводит содержимое файла package.json модуля.

Разбор файла package.json

С каждым модулем Node.js должен быть связан корректный файл package.json, поэтому стоит ближе познакомиться с содержимым этого файла. В листингах 5, 6 и 7 показано содержимое файла package.json для модуля yo, разделенное на три части.

Первые элементы, показанные в листинге 5, — это обычно name, description и массив доступных версий versions в формате JSON.

Листинг 5. Package.JSON, часть 1
$ npm info yo

{ name: 'yo',
  description: 'CLI tool for scaffolding out Yeoman projects',
  'dist-tags': { latest: '1.1.2' },
  versions: 
   [ 
     '1.0.0',
     '1.1.0',
     '1.1.1',
     '1.1.2' ],

Чтобы установить последнюю версию модуля, необходимо ввести npm install package. Команда npm install package@version устанавливает определенную версию.

Далее, как показано в листинге 6, следуют имена авторов, сопровождающих и адрес хранилища GitHub, где находится исходный код.

Листинг 6. Package.JSON, часть 2
author: 'Chrome Developer Relations',
repository: 
 { type: 'git',
   url: 'git://github.com/yeoman/yo' },
homepage: 'http://yeoman.io',
keywords: 
 [ 'front-end',
   'development',
   'dev',
   'build',
   'web',
   'tool',
   'cli',
   'scaffold',
   'stack' ],

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

Наконец, вы видите список зависимостей с явным указанием номеров версий, как показано в листинге 7. Эти номера версий соответствуют общему шаблону основная версия.промежуточная версия.версия исправления, который называется SemVer (от Semantic Versioning).

Листинг 7. Package.JSON, часть 3
engines: { node: '>=0.8.0', npm: '>=1.2.10' },
dependencies: 
 { 'yeoman-generator': '~0.16.0',
   nopt: '~2.1.1',
   lodash: '~2.4.1',
   'update-notifier': '~0.1.3',
   insight: '~0.3.0',
   'sudo-block': '~0.3.0',
   async: '~0.2.9',
   open: '0.0.4',
   chalk: '~0.4.0',
   findup: '~0.1.3',
   shelljs: '~0.2.6' },
peerDependencies: 
 { 'grunt-cli': '~0.1.7',
   bower: '>=0.9.0' },
devDependencies: 
 { grunt: '~0.4.2',
   mockery: '~1.4.0',
   'grunt-contrib-jshint': '~0.8.0',
   'grunt-contrib-watch': '~0.5.3',
   'grunt-mocha-test': '~0.8.1' },

Этот файл package.json указывает на то, что его нужно устанавливать на экземпляр Node.js версии 0.8.0 или выше. В противном случае команда npm install не выполнится.

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

  • блок dependencies содержит список зависимостей времени выполнения;
  • блок devDependencies содержит список модулей, необходимых в процессе разработки;
  • блок peerDependencies позволяет автору определить «коллегиальные» связи между проектами. Эта возможность часто используется для указания связи между базовым проектом и его плагинами, но в данном случае он указывает на два других проекта (Grunt и Bower), которые составляют проект Yeoman наряду с Yo.

Если ввести команду npm install без имени модуля, то npm ищет в текущем каталоге файл package.json и устанавливает все его зависимости, перечисленные в трех описанных выше блоках.

Следующий шаг к получению действующего стека MEAN — установка Yeoman и соответствующего генератора Yeoman-MEAN.

Установка Yeoman

Как Java-разработчик, я не могу представить себе начало нового проекта без системы сборки, такой как Ant или Maven. Аналогично, Groovy- и Grails-разработчики опираются на Gant (реализация Ant для Groovy) или Gradle. Эти инструменты помогают собрать новую структуру каталогов, динамически загрузить зависимости и подготовить проект к распространению.

В мире чистой веб-разработки эту роль играет Yeoman. Это набор из трех инструментов Node.js и JavaScript для подготовки структуры (Yo), управления клиентскими зависимостями (Bower) и подготовки проекта к распространению (Grunt). Как вам уже известно из листинга 7, при установке Yo устанавливаются и его собратья Grunt и Bower — благодаря блоку peerDependencies в файле package.json.

Как правило, чтобы установить модуль yo и обновить блок dependencies в файле package.json, следует ввести npm install yo --save (npm install yo --save-dev обновляет блок devDependencies). Но три зависимых модуля Yeoman на самом деле не относятся к проекту — это утилиты командной строки, а не зависимости времени выполнения. Чтобы установить пакет NPM глобально, нужно добавить к команде install флаг -g.

Установите Yeoman на свою систему:

npm install -g yo

После установки пакета введите yo --version, чтобы проверить, что все работает.

Имея Yeoman и всю остальную инфраструктуру, вы готовы к установке стека MEAN.

Установка MeanJS

Устанавливать вручную каждую часть стека MEAN было бы утомительно. К счастью, Yeoman предлагает простой способ установки с помощью своих генераторов.

Генератор Yeoman — это простейший способ начать новый веб-проект. Генератор «вытягивает» базовые пакеты и все их зависимости. И, как правило, включает в себя действующий сценарий сборки со всеми связанными плагинами. Генератор часто также включает в себя пример приложения с тестами.

Существует более 1000 генераторов Yeoman. Некоторые из них написаны и поддерживаются разработчиками основного проекта Yeoman — ищите в столбце авторов The Yeoman Team. Но большинство генераторов все же написано членами сообщества.

Для загрузки вашего первого приложения MEAN мы воспользуемся генератором сообщества MEAN.JS.

На домашней странице MEAN.JS выберите пункт меню Yo Generator или перейдите непосредственно на страницу Generator, часть которой показана на рисунке 3.

Рисунок 3. Генератор Yeoman MEAN.JS
Генератор Yeoman MEAN.JS
Генератор Yeoman MEAN.JS

Инструкции на этой странице предписывают, во-первых, сначала установить Yeoman, что мы уже сделали. Следующий шаг заключается в том, чтобы глобально установить генератор MEAN.JS:

npm install -g generator-meanjs

Когда генератор на месте, можно приступать к созданию своего первого приложения MEAN. Создайте каталог с именем test, войдите в него командой cd и введите yo meanjs, чтобы создать приложение. На последние два вопроса ответьте, как показано в листинге 8. (На первые четыре можно дать свои собственные ответы.)

Листинг 8. Работа с генератором Yeoman MEAN.JS
$ mkdir test
$ cd test
$ yo meanjs
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------�  |    Welcome to Yeoman,    |
    ( _�U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 �   `  |� � Y `

You're using the official MEAN.JS generator.
[?] What would you like to call your application? 
Test
[?] How would you describe your application? 
Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js
[?] How would you describe your application in comma separated key words?
MongoDB, Express, AngularJS, Node.js
[?] What is your company/author name? 
Scott Davis
[?] Would you like to generate the article example CRUD module? 
Yes
[?] Which AngularJS modules would you like to include? 
ngCookies, ngAnimate, ngTouch, ngSanitize

Ответив на последний вопрос, вы увидите бурную деятельность NPM по загрузке всех зависимостей со стороны сервера (в том числе Express). Когда NPM закончит, Bower загрузит все зависимости со стороны клиента (в том числе AngularJS, Bootstrap и jQuery).

Теперь у вас есть установленный стек EAN (Express, AngularJS и Node.js) — не хватает только М (MongoDB). Если прямо сейчас набрать grunt, чтобы запустить приложение без MongoDB, вы увидите сообщение об ошибке, подобное показанному в листинге 9.

Листинг 9. Попытка запустить MeanJS без MongoDB
events.js:72
        throw er; // Необработанное событие «Ошибка»
              ^
Error: failed to connect to [localhost:27017]
    at null.<anonymous> 
(/test/node_modules/mongoose/node_modules/mongodb/lib/mongodb/connection/server.js:546:74)

[nodemon] app crashed — waiting for file changes before starting...

Если вы запустили приложение и увидели это сообщение об ошибке, нажмите клавиши Ctrl+C, чтобы остановить приложение.

Теперь нужно установить MongoDB, чтобы MEAN-приложение заработало.

Установка MongoDB

MongoDB — это хранилище персистентности NoSQL. Оно не написано на JavaScript и не является пакетом NPM. Его необходимо установить отдельно, чтобы ваш стек MEAN стал полным и заработал.

Зайдите на домашнюю страницу MongoDB, загрузите инсталлятор для своей платформы и установите MongoDB, приняв все параметры по умолчанию.

Когда установка завершится, введите mongod, чтобы запустить демон MongoDB.

Генератор MeanJS Yeoman уже установил модуль клиента MongoDB, называемый Mongoose; вы можете убедиться в этом, проверив свой файл package.json. Я подробно расскажу о MongoDB и Mongoose в следующей статье.

Когда MongoDB установлен и запущен, можно, наконец, запустить и рассмотреть MEAN-приложение.

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

Чтобы запустить вновь установленное MEAN-приложение, убедитесь, что вы находитесь в каталоге test, созданном перед запуском генератора MeanJS Yeoman. Набрав grunt, вы должны увидеть результат, подобный показанному в листинге 10.

Листинг 10. Запуск приложения MEAN.JS
$ grunt

Running "jshint:all" (jshint) task
>> 46 files lint free.

Running "csslint:all" (csslint) task
>> 2 files lint free.

Running "concurrent:default" (concurrent) task
Running "watch" task
Waiting...
Running "nodemon:dev" (nodemon) task
[nodemon] v1.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: app/views/**/*.* gruntfile.js server.js config/**/*.js app/**/*.js
[nodemon] starting `node --debug server.js`
debugger listening on port 5858

 NODE_ENV is not defined! Using default development environment

MEAN.JS application started on port 3000

Модули jshint и csslint (оба установлены генератором) гарантируют, что исходный код синтаксически и стилистически корректен. Пакет nodemon следит за файловой системой и автоматически перезапускает сервер, когда обнаруживает любое изменение в исходном коде — это огромное благо для разработчиков, которые часто вносят изменения в базу кода. (Пакет nodemon работает только на этапе разработки; для внесения изменений в рабочее приложение необходимо заново развернуть его и перезапустить Node.js.)

Как указано в выходных данных консоли, откройте страницу http://localhost: 3000 и рассмотрите свое новое MEAN-приложение.

На рисунке 4 показан пример домашней страницы приложения MEAN.JS.

Рисунок 4. Пример домашней страницы приложения MEAN.JS
Пример домашней страницы приложения MEAN.JS
Пример домашней страницы приложения MEAN.JS

Нажмите кнопку Signup в строке меню, чтобы создать новую учетную запись пользователя. Заполните все поля на странице Sign-up (см. рисунок 5) и нажмите кнопку Sign up. В одном из следующих руководств мы рассмотрим, как организовать OAuth-вход через Facebook, Twitter и т.п.

Рисунок 5. Пример домашней страницы приложения MEAN.JS
Пример домашней страницы приложения MEAN.JS
Пример домашней страницы приложения MEAN.JS

Теперь у вас есть учетные данные пользователя, хранящиеся в локальном экземпляре MongoDB, и можно приступать к написанию новых заметок. Выберите пункт меню Articles (который не появится до тех пор, пока вы не войдете) и напишите несколько примеров заметок. Страница Articles показана на рисунке 6.

Рисунок 6. Страница заметок MeanJS
Скриншот страницы заметок MeanJS
Скриншот страницы заметок MeanJS

Это было крещение вашего первого MEAN-приложения. Добро пожаловать в компанию!

Заключение

В этом руководстве вы кое-что сделали. Вы установили Node.js и написали свой первый сценарий Node.js. Вы узнали о модулях и воспользовались NPM для установки нескольких дополнительных модулей. Вы установили Yeoman, чтобы создать прочную платформу веб-разработки, состоящую из утилиты для построения структуры (Yo), генератора сценариев (Grunt) и утилиты для управления зависимостями со стороны клиента (Bower). Вы установили генератор MeanJS Yeoman и воспользовались им для создания своего первого MEAN-приложения. Вы установили MongoDB и клиентскую библиотеку Node.js Mongoose. Наконец, вы запустили свое первое MEAN-приложение.

В следующий раз мы подробно рассмотрим исходный код примера приложения, чтобы было видно, как все четыре планеты солнечной системы MEAN — MongoDB, Express, AngularJS и Node.js — взаимодействуют друг с другом.


Ресурсы для скачивания


Похожие темы

  • Оригинал статьи: Mastering MEAN: Introducing the MEAN stack.
  • Build a real-time polls application with Node.js, Express, AngularJS, and MongoDB (developerWorks, июнь 2014 г.): познакомьтесь с проектом разработки MEAN, развернутым в облачной среде IBM Bluemixtrade™.
  • Node.js for Java developers (developerWorks, ноябрь 2011 г.): введение в Node.js и рассказ о том, почему его событийно-управляемый параллелизм вызвал интерес даже среди твердых приверженцев Java-разработки.
  • MongoDB: A NoSQL datastore with (all the right) RDBMS moves (developerWorks, сентябрь 2010 г.): о настраиваемом API MongoDB, интерактивной оболочке и поддержке как динамических запросов СУБД-стиля, так и коротких, простых расчетов MapReduce.
  • Get started with the JavaScript language (developerWorks, апрель и август 2011 г.): статья из двух частей, посвященная основам JavaScript.
  • JavaScript for Java developers (developerWorks, апрель 2011 г.): статья, объясняющая, почему JavaScript является важным инструментом современного Java-разработчика, и помогающая освоить переменные, типы, функции и классы JavaScript.
  • Introduction to LAMP technology (developerWorks, май 2005 г.): сравнение MEAN с предшествующим ему стеком.

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Open source
ArticleID=1008850
ArticleTitle=MEAN-программирование: знакомство со стеком MEAN
publish-date=06182015