Автор оригинала: Ethan Nwankwo.
Это продолжение Средняя серия Отказ Если вы чувствуете необходимость начать с основ, продолжайте и изучите Часть 1 серии.
В этой части мы настроим файл сервера и определите маршруты для обслуживания нашего приложения в браузере. Мы также посмотрим на несколько концепций Angularjs и как они работают вместе с Node.js на спине, чтобы облегчить нашу жизнь.
Мы будем писать наш код JavaScript, используя Ecmascript 6 ( ES6 ) так ждите много Const , Пусть, карта и Функции стрелки Отказ Не стесняйтесь проверить ресурс на ES6, если эти термины звучат странно или если вы чувствуете, что ваш JavaScript становится ржавым. Надеюсь, вы получите некоторую мотивацию от изучения всех прохладных вещей, которые мы можем сделать, используя ES6 Отказ
Установка экспресс-сервера и подключение MongoDB
Давайте создадим нашу точку входа приложения. Для этого мы создаем server.js Файл в корневом каталоге проекта со следующим фрагментом кода:
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();
// Connect to mongoDB database
const mongoURL = 'mongodb://:@:/';
mongoose.connect(mongoURL);
// Routing
// Configure port
const port = 8080;
// Listen to port
app.listen(port);
console.log(`Server is running on port: ${port}`);
Заменить < DBUSER > , _ < dbpassword >, < хозяин >,
Примечание:
- Если вы используете MongoDB локально, ваш хост, скорее всего, будет localhost Отказ Если у вас нет набора имени пользователя и пароля, ваша строка подключения может просто выглядеть так:
mongodb://localhost/
- Это автоматически создает базу данных с именем, указанным в строке подключения, когда вы выполняете запрос вставки.
- Если вы используете онлайн-версию Mongodb, предоставленные MLAB Вам нужно будет войти в свою учетную запись, создать базу данных и пользователь базы данных и получить соединительную строку, которая обычно выглядит:
mongodb://: @dsXXXXX.mlab.com:XXXX/
Мы пройдем, как хранить соединительную строку вместе с другими конфиденциальными данными, в Переменная среды в следующем руководстве. Это помешает вам под угрозу безопасность нашего приложения и базы данных. В этом руководстве мы позвольте эти данные существовать в server.js ради простоты, но Не пытайтесь это в производстве Отказ
Следующее – начать приложение на терминал, используя:
node server.js
Это будет регистрировать следующее на терминал, если успешно:
Server is running on port: 8080
Если вы видите это сообщение, то подключение сервера на MongoDB было успешно, и наше приложение началось успешно. Теперь мы будем приступить к добавлению некоторых маршрутов и служить некоторые статические страницы.
Маршруты сервера/Backend
На этом этапе мы создадим автономный маршрут для приложения, чтобы он мог общаться с нашим сервером. Чтобы достичь этого, мы собираемся изменить server.js Файл, который мы создали ранее, и добавьте следующий фрагмент чуть ниже Маршрутизация :
// server.js
. . .
// Routing
router.get('/', (request, response) => {
response.status(200).send({message: 'Hello World!'});
});
// Set app to use express back-end router
app.use(router);
. . .
Теперь мы перезагрузим наше приложение, откройте браузер и перейдите к http://localhost: 8080/
В окне вашего браузера вы должны увидеть сообщение:
{"message":"Hello World!"}
Если вы видите это отображаемое, наш заднешний маршрут работает. Потрясающие!!!
Теперь мы создадим HTML-файлы для отображения в браузере. Для этого мы запустим следующую команду Unix из корневого каталога проекта:
mkdir public && touch public/index.js && touch public/index.html
Это создаст публичный каталог и создать index.js и index.html Файлы в нем.
Наша структура каталогов должна выглядеть:
> node_modules> public -- index.html -- index.js-- package.json-- server.js
В index.js Файл мы добавим следующий фрагмент:
// index.js
angular.module('angularApp', []) .controller('indexCtrl', function($scope) {
// Initialize variables
$scope.name1 = '';
this.name2 = '';
$scope.greeting1 = `Hello ${$scope.name1}`;
this.greeting2 = `Hi ${this.name2}`;
})
Обратите внимание, что мы определяем две переменные, которые, кажется, делают то же самое, но выглядят немного по-другому. Вы найдете несколько разных школ мысли о наилучшем способе определить переменные и методы в контроллере Angularjs: $ Scope Был во время некоторого времени, а это только что присоединился к вечеринке после угнта 1.2.
Я использую оба в зависимости от того, как я чувствую. Angularss Компонент Док Также использует оба. Какой бы вы ни выбрали, я думаю, что они оба достигают одинаковых результатов. Однако всякий раз, когда вы используете это Вам придется создавать контроллер в виде переменной в виду, например: NG-Controller = "indexctrl как приложение" Используется ниже, а если вы используете $ Case, тебе нужно только NG-Controller = "indexctrl" Отказ
Если вы чувствуете себя очарованным $ Scope против это Дебаты, не стесняйтесь исследовать дальше в него и дайте мне знать ваши выводы в разделе комментариев.
На данный момент мы сосредоточимся на их использовании. Я буду использовать это Для большинства из этого учебника, потому что я чувствую себя как это. Просто шучу. Я использую это Потому что я думаю, что это уменьшает шансы с запутанным чистым текстом для угловых переменных в HTML.
В нашем index.html Файл, мы добавим следующий фрагмент:
Hello {{name1}}
Hi {{app.name2}}
Теперь мы обновим наш возвратный маршрут для рендеринга статических страниц в общественном каталоге. Для этого мы добавим следующий фрагмент для нашего server.js Файл чуть выше Маршрутизация определен ранее:
// Serve static files
app.use(express.static('public'));
Мы также обновим наш начальный бэк-центр, чтобы указать на /API Отказ
Теперь наши файлы будут выглядеть так:
server.js:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();
// Connect to mongoDB database assuming our database name is "angular-app"
const mongoURL = 'mongodb://localhost/angular-app';
mongoose.connect(mongoURL);
// Serve frontend view
app.use(express.static('public'));
// Specify backend route
router.get('/api', (request, response) => {
response.status(200).send({message: 'Hello World!'});
});
app.use(router);
// Configure port
const port = 8080;
// Listen to port
app.listen(port);
console.log(`Server is running on port: ${port}`);
index.js:
angular.module('angularApp', [])
.controller('indexCtrl', function($scope) {
// Initialize variables
$scope.name1 = '';
this.name2 = '';
$scope.greeting1 = `Hello ${$scope.name1}`;
this.greeting2 = `Hi ${this.name2}`;
});
index.html:
Welcome!
Enter your name below:
Hello {{name1}}
Hi {{app.name2}}
Как только у нас есть файлы выше, мы пойдем вперед и перезагрузим наше приложение, затем перейдите к http://localhost: 8080/ на браузере.
Мы найдем пустые входные поля, где мы можем ввести текст и иметь Привет/Привет Сообщения отображаются в браузере.
Мы также можем перейти к http://localhost: 8080/ API и доступа к нашему маршруту API API.
Концепции Angularjs:
Скрипт выше показал несколько угловых концепций. Давайте немного поговорим о них.
Мы не будем слишком глубоко погрузиться в эти концепции, чтобы избежать потерянного в теоретических вещах. Если вы заинтересованы в том, чтобы узнать больше, я рекомендую вам занять момент, чтобы узнать о них больше. Я просто укажу несколько соответствующих концепций.
Модули:
Угловой модуль представляет собой контейнер для различных частей нашего применения. Это определено с angular.module Ключевое слово (то есть ангелапп в нашем случае).
Модуль делит угловое приложение на более мелкие многоразовые компоненты. Все контроллеры и функции в приложении должны принадлежать модулю. Модуль может быть зависит от других модулей – это достигается с использованием концепции, называемой Зависимость впрыска (ди) Отказ
Каждый вид веб-страницы в приложении может быть создан с помощью модуля с помощью NG-App Директива, как используется в нашем index.html выше.
Директивы:
Это домо-манипуляторы. Они рассказывают угловой компилятор, что приписывает, чтобы прикрепить к элементу DOM. Они начинаются с NG- приставка.
В приведенном выше примере мы видели такие директивы, как NG-App , NG-контроллер , NG-модель и NG-если Отказ Есть другие, такие как: NG-View , NG-шоу , NG-варианты , NG-Repeat , NG-SRC , NG-нажмите , NG-изменить , NG-форма , NG-init , NG-Switch , NG-HREF , так далее.
Эти директивы просто потрясающие. С ними мы можем заставить DOM делать все, что мы хотим. Мы даже можем создавать наши собственные директивы. Как это круто?
Директивы также могут быть указаны в камеру. Проверьте Угловые документы Для списка директив и всех прохладных вещей мы можем сделать с ними.
Связывание двусторонней передачи данных:
Это оставляет нас одним из самых крутых особенностей Angularjs – возможность синхронизации данных между моделью и видом, что подразумевает, что любые изменения с одной стороны сразу влияют на другие. Мы замечаем, что в нашем приложении, когда мы вводим значение в поле ввода, оно сразу отражается на браузере. Это двустороннее привязка, и это достигается с использованием NG-модель Директива.
Резюме
Мы видели, как подключить Express Server до MongoDB, создавать резервные маршруты, а также подавать статические файлы. Мы также видели некоторые из прохладных вещей, которые мы можем сделать с Angularjs и насколько легко манипулировать операциями DOM, используя угловые директивы. Все это всего лишь верхушка айсберга – мы можем сделать много намного больше со средним. Мы просто начинаем.
В нашем следующем уроке мы сосредоточимся на создании вызовов базы данных и выполнения операций создания, чтения, обновления и удаления (CRUD), используя Redful API Отказ Мы также посмотрим, как автоматизировать наши задачи и настроить WebPack свернуть наши зависимости.
Мы также узнаем, как использовать Номемон Чтобы прослушать изменения и горячую перезагрузку сервера. Обратите внимание, что мы использовали CDN для импорта Angularjs в наш проект – это изменится с WebPack. Мы также будем хранить наши данные о приложении в .env предотвратить безопасность компромиссов.
Не стесняйтесь оставлять свои комментарии, предложения и/или вопросы ниже, и я буду рад вернуться к вам.
Ресурсы:
Этот пост изначально опубликован автором здесь Отказ Эта версия была отредактирована для ясности и может появиться отличаться от исходного поста.