Немного истории...

Мишко Хевери

Google - 2009г.

https://angularjs.org/

Задачи

• декларативное расширение HTML новыми элементами/аттрибутами - директивами
• любое изменение UI – должно быть следствием изменения модели (two-way data binding)
• тесты пользовательских компонентов
• MV*-фреймворк
• создание простой и четкой структуры приложения
• интеграция с другими фреймворками

Целесообразное использование

• Rich-UI приложения
• Single-page(SPA) приложения
• REST-oriented приложения

Связывание данных

• односторонняя (особенность многих JS MVC фреймворков)
• двухсторонняя (Angular, Ember, Knockout, ReactJS)

Одностороннее связывание данных

Двухстороннее связывание данных

Производительность

Angular создает минимум накладных расходов, и поэтому в плане производительности находится на достаточно высоком уровне.

Google Trends

Stackoverflow

Github

Angular behind the scene

Startup

Runtime

Контроллер

See the Pen KdYpva by Chyngyz (@Chyngyz) on CodePen.

JavaScript функция с собственной областью видимости предназначенная для описания бизнес-логики приложения.

Контроллер написан на JavaScript. JavaScript — императивный язык.

Шаблон представления написан на HTML. HTML — декларативный язык.

Сервис

See the Pen yYrNjo by Chyngyz (@Chyngyz) on CodePen.

Сервис

Взаимозаменяемые компоненты выполняющие определенные задачи в рамках web-приложения.

DI в AngularJS

Для управления зависимостями в каждом AngularJS приложении существует свой сервис локатор - инжектор.

Задача инжектора - управление жизненным циклом объектов, внедрение зависимостей.

Создание и поиск зависимостей

Директивы

позволяют задавать определенное поведение элементам.

Директивы «из коробки»

• ngModel – связывание элемента с моделью
• ngShow / ngHide – видимость элемента
• ngClass – добавление CSS-классов на элемент в зависимости от свойств модели ▪ ngHref – задание пути для ссылочного элемента
• ngSubmit – переопределния события отправки HTML-формы на сервер
• +65 разных других

Способы объявления директив

• HTML тег
• HTML аттрибут
• HTML комментарий
• HTML класс

Простой пример

See the Pen LpvGYb by Chyngyz (@Chyngyz) on CodePen.

Подробнее пример

See the Pen GpLooQ by Chyngyz (@Chyngyz) on CodePen.

Transclude

Транс.. чего???

Wiktionary

transclude ‎- Institute a programming step of substituting a template or other input for its rendered text, such as when parsing wikitext.

Пример "трансклуда"

See the Pen XmQXgd by Chyngyz (@Chyngyz) on CodePen.

В полном виде

See the Pen gayPmK by Chyngyz (@Chyngyz) on CodePen.

See the Pen vNMNMm by Chyngyz (@Chyngyz) on CodePen.

Filter

See the Pen AngularJS: ng-animate example by Chyngyz (@Chyngyz) on CodePen.

ngRoute

See the Pen $routeProvide example by Chyngyz (@Chyngyz) on CodePen.

Дополнительные модули

• angular-animate.js
• angular-aria.js
• angular-cookies.js
• angular-loader.js
• angular-messages.js
• angular-message-format.js
• angular-mocks.js
• angular-resource.js
• angular-route.js
• angular-sanitize.js
• angular-scenario.js
• angular-touch.js

Тестирование

Unit Tests

Пример

See the Pen EVJKQR by Chyngyz (@Chyngyz) on CodePen.

Тестирование

End-to-end Tests

Пример

See the Pen WQWwJo by Chyngyz (@Chyngyz) on CodePen.

Инструменты и полезное

Для дебага

• Angular Batarang
• Ng-inspector for AngularJS
• Angular Watchers

generator-gulp-angular

AngularUI

Ace, Alias, Bootstrap, Calendar, CodeMirror, Date, Event Binder, Google maps, Grid, Indeterminate, Layout, Leaflet, Map, Mask, Mention, Router, Scroll, Scrollpoint, Select, Slider, Sortable, TinyMCE, Tour, Uploader, Validate

UI Router

UI-Router маршрутизация фреймворка для AngularJS созданная AngularUI командой. Она обеспечивает иной подход, чем ngRoute, и меняет, основанное на состояние приложения, а не только URL маршрута.