Начало создания веб-сайта с AngularJS + Express JS

Начиная с марта мне поручили новую задачу, связанную с разработкой UI, с использованием таких технологий, как AngularJS и Express JS. Поэтому я воспользовался возможностью изучать новые технологии на выходных.

Архитектура UI продукта нашей команды выглядит следующим образом:

Фронтенд в основном использует фреймворк AngularJS в сочетании сBootstrapмножеством предоставляемых им элементов управления, а также JQuery. Бэкенд в основном использует веб-сервер, построенный на Express JS. Express JS очень удобно работает с Nginx.

В результате, когда проект был не загружен, у меня было время и интерес изучать AngularJS и Express JS.

В то же время я реализовал очень простой пример веб-сайта с использованием AngularJS + Express JS.

I. AngularJS

AngularJS — это проект, разработанный сотрудниками Google и впоследствии поддерживаемый Google. Скачать последнюю версию 1.4 и стабильную версию 1.3.15 можно с https://angularjs.org/. Чтобы изучить AngularJS, посетитеУчебник по AngularJS 。

Проще говоря, AngularJS — этоJavaScript-фреймворк, работающий на стороне клиента.Его две основные особенности — это расширение HTML с помощьюдирективи с помощьювыраженийпривязки данных к HTML. Он также предоставляет контроллеры, фильтры Filter, сервисы Factory и т. д.

Поскольку AngularJS работает на стороне клиента,его можно комбинировать с любой серверной технологией,и он отлично сочетается с Express JS.

AngularJS был создан для решения недостатков манипулирования DOM на статических веб-страницах,и подходит для разработки динамических веб-приложений.。

Принцип работы AngularJS можно понять по следующей схеме:

Вот несколько важных концепций AngularJS:

1. Контроллер

Чтобы динамически управлять данными на веб-странице, мы можем написать контроллер для HTML-страницы. Контроллер по сути является методом JavaScript. Например, для каждой HTML-страницы мы можем написать соответствующий метод JavaScript в качестве контроллера для управления данными на странице. Как показано ниже:

index.html

<!doctype html>
<html ng-app="myApp">
    <head>
        <script src="lib/angular-1.3.15/angular.js.html"></script>
        <script src="lib/angular-1.3.15/angular-route.js.html"></script>
        <script src="js/controller.js.html"></script>
        <script src="js/angularMainApp.js.html"></script>
    </head>
    <body ng-view>
        <div>
            <p>Hello {{name}}</p>
        </div>
    </body>
</html>

Это страница, написанная с использованием контроллера AngularJS. Укажите приложение AngularJS как myApp. Обратите внимание на выражение {{name}}; name — динамическая переменная. Откуда берётся значение name? Оно присваивается name в соответствующем контроллере, чтобы при посещении пользователями страницы index.html они могли увидеть реальное значение name.

controller.js

// Declare angular JS level module wich depends on filters, and services
var myControllers = angular.module('myControllers', []);

// controller
myControllers.controller('indexContrl', ['$scope', function ($scope) {
    $scope.name = "Kevin";
}]);

В controller.js мы определяем контроллер с именем indexContrl, который присваивает значение name в index.html. Конечно, в реальной разработке код контроллера обязательно будет большим. Я рекомендую размещать каждый контроллер, подобный indexContrl, в отдельном JS-файле — это более стандартизировано и проще в сопровождении.

Возникает вопрос:Как indexContrl связан с index.html? Откуда AngularJS знает, что мы хотим использовать indexContrl для управления index.html?

Есть два способа. Один — указать его напрямую в index.html:

        <div ng-controller="indexContrl">
            <p>Hello {{name}}</p>
        </div>

Но этот подход слишком неудобен для больших сайтов. Рекомендуется использовать другой способ — задействовать другой модуль AngularJSng-routeдля управления маршрутизацией. Для разных путей определяйте соответствующие контроллеры в одном файле. Вот так:

myAngularApp.js

// Declare angular JS level module wich depends on filters, and services
var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);

// route
myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when(
                '/',
                {
                    templateUrl: 'index.html',
                    controller: 'indexContrl'
                }
        ).
        otherwise( {
            redirectTo: '/404'
        });
    }
]);

Стоит отметить, что необходимо подключить ng-route в модуле myApp, а также включить файл angular-route.js на вашу страницу, иначе это не будет работать.

Таким образом, данные на странице index.html будут контролироваться функцией indexContrl. Это всего лишь простая демонстрация; для получения дополнительных возможностей нужно прочитать документацию.

2. Фильтр

AngularJS предоставляет функциональность фильтров. По сути, мы определяем некоторые общие методы для форматирования данных, выводимых на странице. Это очень удобно.

При разработке рекомендуется помещать их в отдельный файл Filter.js.

3. Фабричный сервис

Он также позволяет нам определять некоторые общие методы как сервисы. Однако все сервисы создаются лениво; они инстанцируются только при использовании или зависимости от них, и все они являются синглтонами.

Рекомендуется размещать их в отдельном файле Factory.js во время разработки.

II. Express JS

Во фронтенде примера мы использовали фреймворк AngularJS для разработки HTML-страниц и соответствующих JS-файлов. Но бэкенд сайта требует других технологий. Если мы хотим использовать Node.js в качестве бэкенда, это очень просто; достаточно http.createServer. Однако в реальной разработке сайтов Express JS больше подходит.

Express JS в настоящее время — самый популярный фреймворк веб-разработки на основе Node.js, предоставляющий различные модули, такие как session и cookie, и позволяющий быстро создать полнофункциональный сайт.

По сути, Express JSразработан на основе встроенного http-модуля Node.js.

Express JS очень удобно использовать вместе с обратным прокси-сервером Nginx.

Здесь важная концепция Express JS — этоmiddleware, вы можете загружать и использовать многие модули, предоставляемые Express JS или другими модулями, как middleware. Его роль — обрабатывать HTTP-запросы. После того как одно middleware завершает обработку, оно может передать управление следующему middleware.

Вы можете скачать Express JS с помощью NPM.

npm install express

Если вы хотите быстро использовать Express JS для создания бэкенда сайта, я рекомендую инструмент под названием express-generator. Он поможет вам быстро создать проект Express JS и сгенерировать необходимые файлы.

npm install -g express-generator

Но здесь я обнаружил, что express-generator использует довольно много других модулей, таких как Jade для рендеринга представлений, что немного сложно. Тем не менее я использовал его как ориентир и сам создал простейший проект Express JS.

Путь следующий:

Папка public содержит файлы, связанные с UI, следующим образом:

Среди них app.js — это входной файл Express JS, эквивалентный функции main.

app.js

var express = require('express');
var http    = require('http');
var path    = require('path');
var routes  = require('./routes/index');

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

http.createServer(app).listen(3000);

Здесь мы используем Express JS для создания сервера. Обратите внимание, что строка 8 задаёт папку для страниц, а строка 10 определяет информацию о маршруте для пути / в индексном файле в папке routes.Порядок этих двух строк не может быть неправильным.。

routes/index

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;

Это означает, что для запросов к пути / он ищет файл index.html в папке public.

Таким образом, с помощью одной команды,

node app.js

можно запустить сайт.

III. Пример результатов и итогов

Наконец, откройте сайт, и вы увидите правильный результат. Сайт работает, а переменные на странице были заменены на правильные данные контроллером AngularJS.

Позвольте упомянуть одну маленькую деталь. Во время первоначального теста переменные на странице никак не заменялись. Я потратил часы, менял библиотеку AngularJS, менял код контроллера — всё безрезультатно. Наконец, после проверки справочников и документации я обнаружил, что только когда на странице естьng-view, это сработает. Вот так вот... Какая боль...

В этой статье приводится лишь очень простой пример создания сайта с помощью AngularJS + Express JS. Надеюсь, это будет вам полезно.

Оригинальная статья: http://www.cnblogs.com/KevinSong/p/4495729.html

Начало создания веб-сайта с использованием AngularJS + Express JS

Категория Технологии программирования

I. AngularJS

II. Express JS

III. Пример результатов и итогов