Downloaded 43 times
![Рефакторинг - модули
▪ var module = angular.module("MyApp", []);
module.controller("EventsCtrl", function($scope) { … });
▪ <html ng-app="MyApp">](https://image.slidesharecdn.com/angularjs-131204133218-phpapp02/75/AngularJS-12-2048.jpg)
![Написание своих директив
module.directive("gdName", function () {
return {
link: function ($scope, element) {
element[0].innerHTML = "<b>GetDev.NET</b>";
}
};
});
<div gd-name></div>
▪ element - либо jQuery-объект (если подключено), либо объект jqLite – псевдомини-почти-совместимой-реализации, входящей в библиотеку AngularJS](https://image.slidesharecdn.com/angularjs-131204133218-phpapp02/75/AngularJS-13-2048.jpg)
Uploaded byGetDev.NET
AngularJS
Документ представляет собой вводный курс по фреймворку AngularJS, описывая его историю, структуру и основные функции. Он затрагивает такие концепции, как директивы, связывание данных, роутинг, unit-тестирование и роль стандартных сервисов. Также упоминаются различные ресурсы и инструменты, полезные для разработки с использованием AngularJS.
More Related Content
AngularJS
- 1. Андрей Кулешов AngularJS Фреймворк длясоздание приложений на HTML/JS SPA, MVC, MVVM и другие акронимы
- 2. Вновь рассказ будетначинаться с самого начала ▪ Сначала был HTML Слабо стандартизованный и с небольшими возможностями ▪ Ещѐ были LiveScript, JavaScript и JScript, но это совсем грустная сказка… ▪ Веб-приложений тогда ещѐ не было и не планировалось Были веб-странички
- 3. Потом был GMail,появилась jQuery… (несколько эпох пропущено) ▪ Это были одни из нескольких веховых событий, когда программисты стали думать, что кроме веб-страничек они могут писать ещѐ и веб-сайты А самые отчаянные стали замахиваться на веб-приложения ▪ Число их начало расти, сложность - увеличиваться
- 4. Чего ещѐ нужнодля счастья? ▪ Разметка и код получаются чрезмерно размазанными и слабо структурированными ▪ Каждый разработчик может придумывать под себя свои правила того, где и как писать какой код ▪ В новой эре веб-приложений, написанных на JavaScript, встали проблемы управления сложностью
- 5. AngularJS ▪ Релиз в2009 ▪ Изначально опенсурсный проект, сделанные сотрудниками Гугл, работавшими над проектом Google Feedback ▪ Текущая стабильная версия 1.2.3 (27 ноября 2013 г.) ▪ Размер библиотеки в минимизированном виде - 97 кБ
- 6. Какие цели изадачи ▪ Декларативное расширение HTML новыми элементами / аттрибутами директивами ▪ Построение UI на основе шаблонов, связанных с моделью ($scope в терминологии AngularJS – «область видимости») $scope.userGroup = { name: "GetDev.NET“ }; <div>Hello, {{UserGroup.name}}!</div> ▪ Любое изменение UI – должно быть следствием изменения модели Работа с DOM страницы напрямую из контроллера – признак того, что что-то идѐт не так ▪ Описывают себя как MV*-фреймворк Паттерн MVC – основная структурная единица Работает по принципу MVVM, но этот слово было придумано в Майкрософт, и если его употребит разработчик из Гугл – то сгорит
- 7. Сложные семейные отношения внутри 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, …
- 8. С чего начинаетсяAngularJS-приложение? ▪ Сначала мы пишем страницу на обычном HTML(5) ▪ Потом мы подключаем к нему скрипт Angular ▪ И в разметке указываем, что это – Angular-приложение <html ng-app> … </html> («ng» - акроним, созвучный с названием Angular) ▪ ng-app здесь – это первая и начальная «директива» ▪ Пишем первый контроллер и помещаем его в глобальное пространство имѐн, нарушая все каноны window.EventsCtrl = function($scope) { … }; ▪ Указываем на элементе разметки, что он должен обслуживаться <body ng-controller="EventsCtrl">
- 9. Демо ▪ Создание простейшегоприложения ▪ Создание шаблона ▪ Реакция на события
- 10. Обновление данных ▪ Место,где случается магия ▪ AngularJS мистическим образом отслеживает состояние модели – включая не только сложные объекты, но и примитивные типы – Number, bool… ▪ Время, когда случается магия: - реакция на стандартные директивы (ngModel) - организация наблюдения за моделью ($watch) - явный вызов команды модели «применить изменения» - $apply
- 11. Директивы «из коробки» ▪ngModel – связывание элемента с моделью ▪ ngShow / ngHide – видимость элемента ▪ ngClass – добавление CSS-классов на элемент в зависимости от свойств модели ▪ ngHref – задание пути для ссылочного элемента <a> ▪ ngSubmit – переопределния события отправки HTML-формы на сервер
- 12. Рефакторинг - модули ▪var module = angular.module("MyApp", []); module.controller("EventsCtrl", function($scope) { … }); ▪ <html ng-app="MyApp">
- 13. Написание своих директив module.directive("gdName",function () { return { link: function ($scope, element) { element[0].innerHTML = "<b>GetDev.NET</b>"; } }; }); <div gd-name></div> ▪ element - либо jQuery-объект (если подключено), либо объект jqLite – псевдомини-почти-совместимой-реализации, входящей в библиотеку AngularJS
- 14. Dependency Injection ▪ Каждыйкомпонент бизнес-логики – контроллер или сервис (см. ниже) – говорит AngularJS о том, какие компоненты ему нужны для работы А AngularJS с помощью магии их ему предоставляет Либо выкидывает исключение «Зависимость не найдена» ▪ Это провоцирует разработчика использовать подход Single Responsibility – одна логическая единица кода должна делать одну вещь, а не несколько разных, слегка связанных между собой ▪ Стандартные сервисы, предоставляемые с Ангуляром, играют и вторую важную роль – отделяют код программиста от глобальных объектов – window, сеть и т.п. ▪ Стандартные сервисы: $http $location $routeParams … довольно много
- 15.
- 16. Усложнение – несколькоView Single Page Application ▪ Роутинг – возможность показа нескольких «страниц» внутри одной и той же реальной html-страницы ▪ Со словом «страница» в этой концепции вообще большие проблемы (см. тут) ▪ В разметке определяется элемент, внутрь которого будет помещаться заменяемое содержимое ▪ Добавляем разметку в виде отдельного файлика для каждой «страницы» ▪ Добавляем правила роутинга, который определяет соотношения между адресом URL и парой view-controller, которые выполняются при навигации на этот URL ▪ Поддерживает HTML5 History API (но его ещѐ надо настроить на стороне сервера), либо падает до навигации через #: http://getdev.net#event/angularjs
- 17. 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); }); }); }); ▪ Из коробки предоставляются мок-объекты для стандартных сервисов
- 18. Доклад заканчивается, номногое не было сказано ▪ Нечто для облегчения разработки под AngularJS Yeoman http://yeoman.io ▪ Мало сказано про фильтры {{ item.totalAmount | currency }} ▪ Не говорили про валидацию ▪ Работа с виджетами jQuery UI, изначально для AngularJS не предназначенными ▪ Интеграция с RequireJS ▪ Batarang – плагин для Chrome для облегчения отладки
- 19. Интересное чтение ▪ http://angularjs.org ▪AngularJS от авторов фреймворка
- 20. Интересное видео ▪ AngularJS Channel ▪ Using AngularJS in an ASP.Net Application
- 21. Вопросы? Внимательно слушаю! АндрейКулешов kaa-tula@ya.ru akuleshov.tula Специально для http://GetDev.NET