AngularJS

3,816 views

Published on

Видеозапись встречи:
http://getdev.net/Event/angularjs

Стремительно набирающий популярность фреймворк, облегчающий создание клиентских приложений. SPA, MVC, MVVM и множество других облегчающих разработку акронимов.
В докладе предполагается общий обзор, показывающий отдельные части, из которых состоит фреймворк, то, как они живут вместе друг с другом и существуют в окружающем мире страниц, серверов и источников данных.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,816
On SlideShare
0
From Embeds
0
Number of Embeds
1,232
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AngularJS

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

×