Node.js
Node.js (express.js) с угловым.js Пример кода

Вступление

Создание нашего проекта.

Мы готовы пойти так, мы бежим, снова с консоли:

mkdir our_project
cd our_project

Теперь мы находимся там, где будет жить наш код. Чтобы создать главный архив нашего проекта, вы можете запустить

Хорошо, но как мы создаем проект экспресс-скелета?

Это просто:

npm install -g express express-generator

Linux-дистрибутивы и Mac должны использовать sudo для установки, потому что они установлены в каталоге nodejs, доступ к которому доступен только пользователю root . Если все будет хорошо, мы сможем, наконец, создать скелет экспресс-приложения, просто запустите

express

Эта команда создаст внутри нашей папки приложение для экспресс-примера. Структура следующая:

bin/
public/
routes/
views/
app.js
package.json

Теперь, если мы запустим npm, запустите go to http: // localhost: 3000, мы увидим, что экспресс-приложение работает и работает, справедливо, что мы создали экспресс-приложение без особых проблем, но как мы можем смешать это с AngularJS? ,

Как работает экспресс, ненадолго?

Express - это структура, построенная поверх Nodejs , вы можете увидеть официальную документацию на Express Site . Но для нашей цели нам нужно знать, что Express является ответственным, когда мы печатаем, например, http: // localhost: 3000 / home для рендеринга домашней страницы нашего приложения. Из созданного недавно созданного приложения мы можем проверить:

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Этот код говорит нам, что когда пользователь переходит на http: // localhost: 3000, он должен отображать представление индекса и передавать JSON с свойством title и значением Express. Но когда мы проверяем каталог views и открываем index.jade, мы можем видеть это:

extends layout
block content
    h1= title
    p Welcome to #{title}

Это еще одна мощная функция Express, механизмы шаблонов , они позволяют отображать контент на странице, передавая ему переменные или наследуя другой шаблон, чтобы ваши страницы были более компактными и более понятными для других. Расширение файла .jade, насколько я знаю, Джейд изменил имя для Pug , в основном это тот же движок шаблонов, но с некоторыми обновлениями и модификациями ядра.

Установка мошенника и обновление шаблона Express.

Хорошо, чтобы начать использовать Pug в качестве механизма шаблонов нашего проекта, нам нужно запустить:

npm install --save pug

Это установит Pug как зависимость от нашего проекта и сохранит его в package.json . Чтобы использовать его, нам нужно изменить файл app.js :

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

И замените линию движка с помощью мопса, и все. Мы снова можем запустить наш проект с запуском npm, и мы увидим, что все работает нормально.

Как AngularJS вписывается во все это?

AngularJS - это Javascript MVW (Model-View-Whatever) Framework, который в основном используется для создания приложения SPA (Simple Page Application), довольно прост, вы можете перейти на сайт AngularJS и загрузить последнюю версию, которая является v1.6.4 .

После того, как мы загрузили AngularJS, когда нужно скопировать файл в нашу общедоступную / javascripts папку внутри нашего проекта, небольшое объяснение, это папка, которая служит для статических ресурсов нашего сайта, изображений, css, javacript файлов и так далее. Конечно, это можно настроить через файл app.js , но мы будем держать его простым. Теперь мы создаем файл с именем ng-app.js , файл, в котором наше приложение будет жить, внутри нашей общей папки javascripts, где находится AngularJS. Чтобы привести AngularJS вверх, нам нужно изменить содержимое views / layout.pug следующим образом:

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

Что мы здесь делаем ?, мы включаем в себя ядро ​​AngularJS и наш недавно созданный файл ng-app.js, поэтому, когда шаблон визуализируется, он будет вызывать AngularJS, обратите внимание на использование директивы ng-app , это говорит AngularJS, что это наше имя приложения, и он должен придерживаться этого.
Итак, содержание нашего ng-app.js будет:

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

Мы используем самую основную функцию AngularJS здесь, двустороннюю привязку данных , это позволяет нам мгновенно обновлять содержимое нашего представления и контроллера, это очень простое объяснение, но вы можете провести исследование в Google или StackOverflow, чтобы увидеть как это работает.

Итак, у нас есть основные блоки нашего приложения AngularJS, но есть что-то, что нам нужно сделать, нам нужно обновить нашу страницу index.pug, чтобы увидеть изменения нашего углового приложения, давайте сделаем это:

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

Здесь мы просто привязываем вход к нашему определенному имени свойства в области AngularJS внутри нашего контроллера:

$scope.name = 'sigfried';

Цель этого заключается в том, что всякий раз, когда мы меняем текст во вводе, вышеприведенный абзац обновляет его содержимое внутри {{name}}, это называется интерполяцией , снова другая функция AngularJS для отображения нашего контента в шаблоне.

Итак, все настроено, теперь мы можем запустить npm, перейдем к http: // localhost: 3000 и посмотрим наше экспресс-приложение, обслуживающее страницу, и AngularJS, управляющее интерфейсом приложения.