Node.js
Node.js (express.js) с угловым.js Пример кода
Поиск…
Вступление
В этом примере показано, как создать базовое экспресс-приложение, а затем выполнить функцию AngularJS.
Создание нашего проекта.
Мы готовы пойти так, мы бежим, снова с консоли:
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, управляющее интерфейсом приложения.