Angular #1

Transcript

1. AngularJS 1.5.x Marchenkov Danila, Software Developer
3. Почему AngularJS? • AngularJS — MVW-фреймворк • Поддержка Google • Stateful/Stateless SPA • Гибкая система зависимостей • Разделение ответственности • Двусторонняя связь данных • Возможность использования сторонних расширений языков HTML & CSS. • Отсутствие необходимости работы с DOM деревом
4. SPA • Навигация без перезагрузки страницы • Скрипты подгружаются по мере необходимости • Данные загружаются асинхронно • Состояние приложения хранится в браузере
5. MVC Back to good old ‘79
6. MVC • M — Model - локальное хранилище данных. • V — View - компоненты, отображение данных. • C — Controller - изменение модели, реакция на изменения и отображение на View.
7. Ng-app • Одна html-страница: • Один ng-app тэг для приложения • Множество ng-controller тэгов • Доступность вложенности • Возможность связи разных контроллеров
8. ng-app, ng-controller angular.module('myApp', []) .controller('myAppController', function() { this.a = 1; this.b = 2; }); <div ng-app=“myApp"> <div ng-controller=“myAppController as ctrl”> I can add: {{ ctrl.a }} + {{ ctrl.b }} = {{ ctrl.a + ctrl.b }} </div> </div>
9. angular.module('myApp', []) // обьявление myApp модуля .controller(‘myAppController', function() { // обьявление myAppController-а this.a = 1; // обьявление переменных контролера this.b = 2; }); <div ng-app=“myApp”> <!-- Входная точка приложения --> <div ng-controller=“myAppController as ctrl"> <!-- Входная точка myAppController-а --> I can add: {{ ctrl.a }} + {{ ctrl.b }} = {{ ctrl.a + ctrl.b }} <!-- Интерполяция переменных контроллера --> </div> </div>
10. Angular MVC
12. Модульность • Модуль - контейнер. • Проект — древовидная структура модулей. • Корневой ‘root’ модуль. • Testability. • Переиспользование модулей.
13. Разделение логики • controllers • directives • filters • decorators • services • factories • providers • configs • static injections • run-blocks
14. Вложенность модулей angular.module('empress', ['dashboard', ‘entityEditor’, 'analysisView']); • dashboard, entityEditor, analysisView - зависимости модуля empress • Гарантия инициализации зависимостей до родителя • Все модули - зависимости основного. • У любой компоненты есть модуль, в котором она объявлена
15. Практика • https://openweathermap.org/current • Сводка погоды по Спб. • git clone https://github.com/angular/angular-seed.git • Один главный модуль • http-сервис • один контроллер