AngularJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

AngularJS

  • 2,615 views
Uploaded on

Видеозапись встречи: ...

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,615
On Slideshare
1,900
From Embeds
715
Number of Embeds
3

Actions

Shares
Downloads
24
Comments
0
Likes
2

Embeds 715

http://getdev.net 708
http://www.getdev.net 4
http://beta.getdev.net 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Интересное видео ▪ Angular JS Channel ▪ Using AngularJS in an ASP.Net Application
  • 21. Вопросы? Внимательно слушаю!  Андрей Кулешов kaa-tula@ya.ru akuleshov.tula Специально для http://GetDev.NET