Angular JS

Transcript

1. Опыт внедрения в реальный проект Игорь Косулин
2. • Рассказать о личном опыте использования клиентских MV*-фреймворков (на примере AngularJS) • Объяснить преимущества перехода на AngularJS при написании сложных сайтов и веб-приложений Цели доклада
3. • Для опытных веб-разработчиков, которые по каким-то причинам ещё не используют современные клиентские MV*-фреймворки • Для новичков в веб-программировании • Для тех, кто использует другие клиентские веб-фреймворки и пока ещё не пользовался AngularJS Для кого
4. • О сравнении AngularJS с другими клиентскими MV*- фреймворками • О прекрасном встроенном механизме роутинга • О большом количество встроенных сервисов • О крупном сообществе • О впечатляющих возможностях тестирования • О многих других вещах, которые вы можете узнать из скринкастов и статей в интернете О чём не пойдёт речь
5. • О ключевых возможностях AngularJS с примерами кода • О том, как значительно использование AngularJS упрощает разработку клиентской части и даже изменяет парадигму мышления программиста • Также я приведу достаточно сложный реальный пример, в котором использование AngularJS упростило жизнь • И попытаюсь очертить круг ситуаций, оказавшись в которых разработчикам следует подумать об использовании AngularJS О чём пойдёт речь
6. • Декларативный HTML • MVC • Two-way data binding • Observables • Maintained by Google (future browsers, нативная поддержка) • Сервисы (DI) • Директивы • $rootScope 1. Возможности
7. 1.1. Декларативный HTML <div ng-controller="AwesomeCtrl"> <input type="text" ng-model="username" /> <p>{{ username | uppercase }}</p> <button ng-click="addUsername()">Add</button> <ul> <li ng-repeat="user in users | orderBy:'name'"> {{ user.name }} </li> </ul> </div> var awesomeApp = angular.module('AwesomeApp', []); awesomeApp.controller('AwesomeCtrl', function($scope) { $scope.users = []; $scope.addUsername = function() { $scope.users.push({ 'name': $scope.username }); $scope.username = ""; } });
8. 1.2. MVC <div ng-controller="AwesomeCtrl"> <input type="text" ng-model="username" /> <p>{{ username | uppercase }}</p> <button ng-click="addUsername()">Add</button> <ul> <li ng-repeat="user in users | orderBy:'name'"> {{ user.name }} </li> </ul> </div> var awesomeApp = angular.module('AwesomeApp', []); awesomeApp.controller('AwesomeCtrl', function($scope) { $scope.users = []; $scope.addUsername = function() { $scope.users.push({ 'name': $scope.username }); $scope.username = ""; } }); VIEW CONTROLLER
9. 1.3. Two-way data binding <div ng-controller="AwesomeCtrl"> <input type="text" ng-model="username" /> <p>{{ username | uppercase }}</p> <button ng-click="addUsername()">Add</button> <ul> <li ng-repeat="user in users | orderBy:'name'"> {{ user.name }} </li> </ul> </div> var awesomeApp = angular.module('AwesomeApp', []); awesomeApp.controller('AwesomeCtrl', function($scope) { $scope.users = []; $scope.addUsername = function() { $scope.users.push({ 'name': $scope.username }); $scope.username = ""; } });
10. 1.4. Observables var awesomeApp = angular.module('AwesomeApp', []); awesomeApp.controller('AwesomeCtrl', function($scope) { $scope.users = []; $scope.addUsername = function() { $scope.users.push({ 'name': $scope.username }); $scope.username = ""; }; $scope.$watch('username', function(newValue, oldValue) { console.log(newValue); }); }); CONTROLLER
11. 1.5. Maintained by Google • Надёжная команда • Качественный код • Тесная связь с разработчиками ведущего браузера • Шаблоны, основанные на DOM-объектах, будут нативно поддерживаться в Chromium
12. 1.6. Сервисы • Не веб-сервисы, а SOA • Модульность • Повторное использование • SRP (SOLID) • Внедрение через DI var myApp = angular.module('MyApp', []); myApp.factory('fileService', function() { var factory = {}; factory.sendFiles = function(files, url) { // ... }; return factory; }); myApp.controller('MyCtrl', function($scope, fileService) { var files = ...; fileService.sendFiles(files, url); });
13. 1.7. Директивы • Расширение словаря HTML • Обособленный функционал • Повторное использование • Передача параметров из контроллеров • Хранение шаблонов в отдельных файлах <div ng-controller="AwesomeCtrl"> <image-viewer images="photosArray" edit-mode="true" /> </div>
14. 1.8. $rootScope • Общий scope между контроллерами в пределах одного приложения • Позволяет отображать одни и те же данные в разных формах без дублирования информации и возможной потери синхронности <div ng-controller="AwesomeCtrl"> <image-viewer images="$root.photosArray" edit-mode="true" /> </div>
15. 2. Парадигма • Минимальные усилия по «оживлению» вёрстки • Данные и отображение гарантированно синхронизированы • Конечный автомат (машина состояний) • Нет хрупкости кода, нет повтора кода (id, ненужные классы) • Позволяет сфокусироваться на бизнес-логике, а не на навешивании data-атрибутов и callback'ов • Любое действие максимально просто и в коде выглядит максимально лаконично (CoffeeScript не нужен)
16. 3. Пример использования
17. 3. Пример использования
18. 3. Пример использования
19. 3. Пример использования <div class="slider-control-next" ng-show="photos.length > 1" ng-class="{ 'slider-control-next-active': isNextArrowActive() }" ng-click="showNextPhoto()" ng-mouseenter="isNextArrowEntered = true" ng-mouseleave="isNextArrowEntered = false" ng-style="{ 'cursor': isNextArrowActive() ? 'pointer' : 'default' }"> </div> <div ng-controller="PhotoController"> <image-viewer photos="photos" upload-photo-url="{{ path("rent_upload_photo") }}" remove-photo-url="{{ path("rent_remove_photo") }}" set-photo-as-main-url="{{ path("rent_set_photo_as_main") }}" change-photo-comment-url="{{ path("rent_change_photo_comment") }}" photo-upload-mode="photoUploadMode" photo-edit-mode="photoEditMode"> </image-viewer> </div>
20. Выводы • AngularJS отлично подходит для разработки современных веб-приложений • Минимум кода — максимум результата • Прост для первоначального ознакомления, но требует достаточно серьёзных архитектурных познаний для грамотного и полноценного использования • Изменяет парадигму мышления программиста за счёт использования лучших практик • В мире AngularJS есть ещё много всего интересного :)
21. Конец Спасибо за внимание! Вопросы?