AngularJS

Андрей Кулешов

AngularJS
Фреймворк для создание приложений на HTML/JS
SPA, MVC, MVVM и другие акронимы

Вновь рассказ будет начинаться с самого начала
▪ Сначала был HTML
Слабо стандартизованный и с небольшими возможностями
▪ Ещѐ были LiveScript, JavaScript и JScript, но это совсем грустная сказка…

▪ Веб-приложений тогда ещѐ не было и не планировалось
Были веб-странички

Потом был GMail, появилась jQuery…
(несколько эпох пропущено)

▪ Это были одни из нескольких веховых событий, когда программисты стали
думать, что кроме веб-страничек они могут писать ещѐ и веб-сайты
А самые отчаянные стали замахиваться на веб-приложения
▪ Число их начало расти, сложность - увеличиваться

Чего ещѐ нужно для счастья?
▪ Разметка и код получаются чрезмерно размазанными и слабо
структурированными
▪ Каждый разработчик может придумывать под себя свои правила того, где и
как писать какой код
▪ В новой эре веб-приложений, написанных на JavaScript, встали проблемы
управления сложностью

AngularJS
▪ Релиз в 2009
▪ Изначально опенсурсный проект, сделанные сотрудниками Гугл,
работавшими над проектом Google Feedback

▪ Текущая стабильная версия 1.2.3 (27 ноября 2013 г.)
▪ Размер библиотеки в минимизированном виде - 97 кБ

Какие цели и задачи
▪ Декларативное расширение HTML новыми элементами / аттрибутами директивами
▪ Построение UI на основе шаблонов, связанных с моделью ($scope в
терминологии AngularJS – «область видимости»)
$scope.userGroup = {
name: "GetDev.NET“
};
<div>Hello, {{UserGroup.name}}!</div>
▪ Любое изменение UI – должно быть следствием изменения модели
Работа с DOM страницы напрямую из контроллера – признак того, что что-то
идѐт не так
▪ Описывают себя как MV*-фреймворк
Паттерн MVC – основная структурная единица
Работает по принципу MVVM, но этот слово было придумано в
Майкрософт, и если его употребит разработчик из Гугл – то сгорит

Сложные семейные
отношения внутри
AngularJS
Angular
Directives
ngClass,
ngShow,
ngModel, …

Module
Module
MyApp
MyApp

Service
Directive
Warninger
gd-name

Service
Service
Warninger
Warninger

Model ($scope)

DOM
<html> … </html>

Module
Module
OtherModule1
Module
OtherModule1
OtherModule1

Service
Controller
Warninger
EventsCtrl

Angular Services
$http, $cookie, …

С чего начинается AngularJS-приложение?
▪ Сначала мы пишем страницу на обычном HTML(5)
▪ Потом мы подключаем к нему скрипт Angular
▪ И в разметке указываем, что это – Angular-приложение
<html ng-app> … </html>
(«ng» - акроним, созвучный с названием Angular)
▪ ng-app здесь – это первая и начальная «директива»
▪ Пишем первый контроллер и помещаем его в глобальное пространство
имѐн, нарушая все каноны
window.EventsCtrl = function($scope) { … };
▪ Указываем на элементе разметки, что он должен обслуживаться
<body ng-controller="EventsCtrl">

Демо

▪ Создание простейшего приложения
▪ Создание шаблона
▪ Реакция на события

Обновление данных
▪ Место, где случается магия
▪ AngularJS мистическим образом отслеживает состояние модели – включая
не только сложные объекты, но и примитивные типы – Number, bool…

▪ Время, когда случается магия:
- реакция на стандартные директивы (ngModel)
- организация наблюдения за моделью ($watch)
- явный вызов команды модели «применить изменения» - $apply

Директивы «из коробки»
▪ ngModel – связывание элемента с моделью
▪ ngShow / ngHide – видимость элемента
▪ ngClass – добавление CSS-классов на элемент в зависимости от свойств
модели
▪ ngHref – задание пути для ссылочного элемента <a>
▪ ngSubmit – переопределния события отправки HTML-формы на сервер

Рефакторинг - модули
▪ var module = angular.module("MyApp", []);
module.controller("EventsCtrl", function($scope) { … });

▪ <html ng-app="MyApp">

Написание своих директив
module.directive("gdName", function () {
return {
link: function ($scope, element) {
element[0].innerHTML = "<b>GetDev.NET</b>";
}

};
});
<div gd-name></div>
▪ element - либо jQuery-объект (если подключено), либо объект jqLite – псевдомини-почти-совместимой-реализации, входящей в библиотеку AngularJS

Dependency Injection
▪ Каждый компонент бизнес-логики – контроллер или сервис (см. ниже) – говорит
AngularJS о том, какие компоненты ему нужны для работы
А AngularJS с помощью магии их ему предоставляет
Либо выкидывает исключение «Зависимость не найдена»
▪ Это провоцирует разработчика использовать подход Single Responsibility – одна
логическая единица кода должна делать одну вещь, а не несколько разных,
слегка связанных между собой
▪ Стандартные сервисы, предоставляемые с Ангуляром, играют и вторую важную
роль – отделяют код программиста от глобальных объектов – window, сеть и т.п.
▪ Стандартные сервисы:
$http
$location
$routeParams
… довольно много

Рефакторинг - сервисы

Усложнение – несколько View
Single Page Application
▪ Роутинг – возможность показа нескольких «страниц» внутри одной и той же
реальной html-страницы
▪ Со словом «страница» в этой концепции вообще большие проблемы (см.
тут)
▪ В разметке определяется элемент, внутрь которого будет помещаться
заменяемое содержимое
▪ Добавляем разметку в виде отдельного файлика для каждой «страницы»

▪ Добавляем правила роутинга, который определяет соотношения между
адресом URL и парой view-controller, которые выполняются при навигации на
этот URL
▪ Поддерживает HTML5 History API (но его ещѐ надо настроить на стороне
сервера), либо падает до навигации через #:
http://getdev.net#event/angularjs

Unit-testing
▪ То, ради чего всѐ затевалось
▪ Возможность протестировать логику работы приложения без необходимости настройки
внешних сервисов и окружени
▪ Используется собственный движок для юнит-тестирования, использующий Node.js – Karma
describe(‘GetDev controllers', function () {
describe(‘MainCtrl', function () {
it('should create "phones" model with 3 phones', function () {
var scope = {},
ctrl = new MainCtrl(scope);
expect(scope.events.length).toBe(3);
});
});
});
▪ Из коробки предоставляются мок-объекты для стандартных сервисов

Доклад заканчивается, но многое не было сказано
▪ Нечто для облегчения разработки под AngularJS
Yeoman
http://yeoman.io
▪ Мало сказано про фильтры
{{ item.totalAmount | currency }}
▪ Не говорили про валидацию
▪ Работа с виджетами jQuery UI, изначально для AngularJS не
предназначенными
▪ Интеграция с RequireJS
▪ Batarang – плагин для Chrome для облегчения отладки

Интересное чтение
▪ http://angularjs.org
▪ AngularJS от авторов фреймворка

Интересное видео
▪ Angular JS Channel
▪ Using AngularJS in an ASP.Net Application

Вопросы?
Внимательно слушаю! 
Андрей Кулешов
kaa-tula@ya.ru
akuleshov.tula

Специально для http://GetDev.NET

AngularJS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie AngularJS

Ähnlich wie AngularJS (20)

Mehr von GetDev.NET

Mehr von GetDev.NET (20)

AngularJS