MEAN-програмування: знайомство зі стеком MEAN

MEAN-програмування

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

Серія контенту:

Цей контент є частиною # з серії # статей: MEAN-програмування

http://www.ibm.com/developerworks/library/?search_by=mastering+mean:

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: MEAN-програмування

Слідкуйте за виходом нових статей цієї серії.

У своїй книзі, що вийшла в 2002 році, Девід Вайнбергер назвав бурхливо розвивається веб-контент набором дрібних слабо пов'язаних елементів . Ця метафора мені запам'яталася, тому що легко впасти в оману, представляючи себе веб як монолітний технологічний комплекс. Насправді ж кожен веб-сайт, який ви відвідуєте, - це результат унікального поєднання всіляких бібліотек, мов та веб-платформ.

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

Останнім часом в веб-співтоваристві багато говорять про новий стек MEAN: MongoDB , Express , AngularJS , Node.js . Стек технологій MEAN відображає сучасний підхід до веб-розробки: коли на кожному рівні додатку, від клієнта до сервера і персистентності, застосовується один і той же мова (JavaScript). У цій серії статей показано, як виглядає проект веб-розробки MEAN, що виходить за рамки простого синтаксису, від початку і до кінця. Ця перша частина присвячена практичного запровадження в технології компонентів стека, включаючи процеси їх установки і настройки. Приклад коду наведено в розділі завантаження .

Про цю серії статей

Стек технологій MEAN (MongoDB, Express, AngularJS, Node.js) - це сучасний суперник популярного стека LAMP для створення професійних веб-сайтів за допомогою ПЗ з відкритим вихідним кодом. MEAN знаменує собою важливий зрушення в галузі архітектури та способу мислення в сфері програмування - від реляційних баз даних до NoSQL і від схеми «модель-уявлення-контролер» на стороні сервера до клієнтських односторінковим додатків. З цієї серії статей ви дізнаєтеся, як технології з стека MEAN доповнюють один одного і як використовувати цей стек для створення сучасних повнофункціональних веб-додатків JavaScript двадцять першого століття.

Від LAMP до MEAN

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

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

Більше ніж MEAN

Хоча ця серія статей присвячена чотирьом основним «планетам» «сонячної системи» MEAN, ми також облетим кілька менших (але не менш важливих) супутникових технологій:

Yeoman : Поєднання з трьох інструментів розробки на основі командного рядка для побудови каркасу ( Yo ), Створення сценаріїв ( Grunt ) І управління залежностями на стороні клієнта ( Bower ).
Bootstrap : Бібліотека CSS, яка забезпечує адаптивний веб-дизайн для підтримки мобільних пристроїв.
Бібліотеки тестування: крім Mocha, Jasmine і Karma, ціла плеяда бібліотек тестування, призначених для імітації викликів Ajax ( Chai ), Демонстрації тестового покриття ( Istanbul ) І автоматизації функціональних тестів для роботи в реальних браузерах ( Protractor ).

Перехід від традиційної бази даних, такий як 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 з командного рядка, а не з браузера.

Доступ до інструментів розробки браузера

Для зручності можна використовувати інструменти розробки в своєму звичному браузері. Я протягом цієї серії статей буду використовувати Google Chrome, але вам ніщо не заважає вибрати Firefox, Safari або навіть Internet Explorer.

У Google Chrome виберіть Tools> JavaScript Console.
У Firefox - Tools> Web Developer> Browser Console.
У Safari - Develop> Show Error Console. (Якщо ви не бачите меню Develop, натисніть кнопку Show Develop menu in menu bar на сторінці Advanced preferences.)
В Internet Explorer виберіть Developer Tools> Script> Console.

Мої студенти посміялися над ідеєю запускати 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 в браузері

MEAN-програмування Розробка сучасних, повнофункціональних веб-проектів двадцять першого століття - від початку і до кінця Серія контенту: Цей контент є частиною # з серії # статей: MEAN-програмування http://www

На малюнку 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. У міру ускладнення додатків можливість управління транзитивними залежностями швидко стає життєво важливою вимогою.

CommonJS

Проект CommonJS, як і випливає з назви, визначає загальний формат модулів (в числі інших специфікацій JavaScript поза браузера). Node.js являє собою одну з багатьох існуючих реалізацій CommonJS. RingoJS (сервер додатків, аналогічний Node.js, який працює в середовищі виконання JavaScript JDK Rhino / Nashorn) теж заснований на CommonJS, як і популярні сховища персистенції NoSQL CouchDB і MongoDB.

Модулі - з нетерпінням очікувана особливість наступної основної версії 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 виконують такі дії.

Створення нового HTTP-сервера.
Призначення функції для обробки відповідей.
Запуск перехоплювача вхідних запитів 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

Сторінка результатів містить короткий опис модуля ( «Інструмент 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 не виконається.

СКОРОЧЕННЯ синтаксис SemVer

В лістінгу 7 зверніть увагу на знак тильда (~) у багатьох версіях залежностей. Це еквівалентно 1.0.x (також допустимий синтаксис), що означає «основна версія повинна бути 1, проміжна версія повинна бути 0, але можна встановити останню версію виправлення, яку ви знайдете». У SemVer мається на увазі, що версії виправлень ніколи не вносять критичних змін в API (зазвичай це виправлення для існуючих функцій), а проміжні версії вносять додаткову функціональність (наприклад, нові виклики функцій), не порушуючи існуючої.

Крім необхідної платформи, цей файл 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:

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

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

Малюнок 5. Приклад домашньої сторінки додатка MEAN.JS

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

Малюнок 6. Сторінка заміток 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 з попереднім йому стеком.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Js?
Com/developerworks/library/?
Отже, ви готові до освоєння MEAN?
Js?
Мої студенти посміялися над ідеєю запускати JavaScript з командного рядка: «Навіщо потрібен JavaScript, коли немає HTML-коду?
Що таке модулі?
Що таке NPM?
What would you like to call your application?
Test [?
How would you describe your application?

Nav view search

Навигация

Курсы

бесплатные приколы

шаблоны joomla 1.7

Дополнительная информация

Новости

Учебный центр "Магнат"...

Дизаин интерьера и...

web-дизайн

Практическая...

Курсы массажа