Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS. Введение и простые примеры для понимания

13,226 views

Published on

Небольшое введение в AngularJS для WordPress Meetup #2 в Санкт-Петербрге. Тут рассматриваются примеры реализаций и отличие от jQuery.

Published in: Technology

AngularJS. Введение и простые примеры для понимания

  1. 1. AngularJS АЛЬТЕРНАТИВА JQUERY. ВВЕДЕНИЕ И ОСНОВЫ 06.09.2014 Saint-Petersburg WordPress Meetup #2 Igor Sazonov @tigusigalpa
  2. 2. План доклада  Что такое AngularJS  Область применения. Откуда такая популярность? Конкуренты  Плюсы и минусы. Чем отличается от jQuery  Архитектура AngularJS  Наглядные простейшие примеры. Что такое контроллеры  Простой пример реализации табов на AngularJS и jQuery  Некоторые «подводные камни»: настройка AJAX  Зачем AngularJS WordPress’у?  Где искать документацию и помощи?
  3. 3. Что такое AngularJS?  JavaScript MVC-фреймворк от Google  URL: https://angularjs.org  Год создания: 2009  Текущая версия: 1.2.22 / 1.3.0-beta (20.08.2014)  Вес: 105кб
  4. 4. Область применения. Откуда такая популярность? Конкуренты  Идеален для Single Page Application (SPA) приложений («богатое» приложение, генерирующее и изменяющее большой объем DOM’а «на лету» без перезагрузки страницы)  «Умный». Додумывает за разработчика. Например ng-show скрывает элемент, если он не удовлетворяет условию.  Код более сложный, но его в разы меньше  Никакой привязки к #id и .class для работы с элементами =)))))  Основные конкуренты: Backbone.js, KnockoutJS, ember.js
  5. 5. Плюсы и минусы. Чем отличается от jQuery Плюсы  Меньше кода (иногда в разы!)  Более высокий уровень программирования  Совместим с jQuery + jqLite  Подходит для сложных SPA- приложений  Забудьте про наименование классов или #id-шников  Будущее Front-End разработки  Постоянно дорабатывается ………..Google-ом =))  Построен на watcher’ах Минусы  Сложнее в изучении  «Переадаптация» требует времени  Весит больше (105 > 83 кб)  Неочевидные решения  Постоянно дорабатывается
  6. 6. Плюсы и минусы. Чем отличается от jQuery Применимость AngularJS относительно jQuery jQuery AngularJS Сложность приложения SPA
  7. 7. Архитектура AngularJS Module – модуль – глобальное хранилище для Вашего приложения (контроллеры, роуты, вьюхи) Config – конфиг – настройки модуля Routes – «менеджер» контроллеров для урлов типа #/someurl Controller – контроллер – логика отдельных частей модуля (приложения) View – представление html контроллера $scope – глобальный объект (со всеми данными) контроллера Directives – кастомное поведение html Factory – фабрика (сервис)
  8. 8. Наглядные простейшие примеры. Что такое контроллеры <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0- beta.19/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
  9. 9. Наглядные простейшие примеры. Что такое контроллеры <html ng-app="SimpleModule"> <head><meta charset="UTF-8" /><title>Простой модуль</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2. 23/angular.min.js"></script><script src=“simpleModule.js"></script></head> <body ng-controller="MyController"> <h1>Демо {{title}}</h1> <div><p><label for="valA">Ввведите А:</label><input type="number" id="valA" ng-model=" valA" /></p><p><label for="valB">Ввведите B:</label><input type="number" id="valB" ng-model=" valB" /></p><p>Результат: {{result}}</p><p><button ng-click=" add(valA,valB);">Сложить</button><button ng-click=" multiple(valA,valB);">Умножить</button></p></di v> </body> </html> simpleModule.js var myApp = angular.module('SimpleModule', []); myApp.controller('MyController', ['$scope', function($scope) { $scope.title = 'Простой модуль'; $scope.result = 0; $scope.add = function(a,b) { $scope.result = a + b; }; $scope.multiple = function(a,b) { $scope.result = a * b; }; }]);
  10. 10. Простой пример реализации табов на AngularJS и jQuery jQuery jQuery( ‘.tab-content’ ).hide(); jQuery( ‘#cont-1’ ).show(); jQuery( '. tab-link' ).click( function() { var _this = jQuery(this), _tab = _this.data( 'tab' ); jQuery( 'li' ).removeClass( 'active' ); _this.parent( 'li' ).addClass( 'active' ); jQuery( '.tab-content' ).hide(); jQuery( '#' + _tab ).show(); } ); HTML <ul> <li class=“active”><a class=“tab-link” data-tab=“ cont-1” href=“javascript:;”>first</a></li> <li><a class=“tab-link” data-tab=“cont-2” href=“javascript:;”>second</a></li> <li><a class=“tab-link” data-tab=“cont-3” href=“javascript:;”>third</a></li> </ul> <div id=“cont-1” class=“tab-content”> 111</div> <div id=“cont-2” class=“tab-content”> 222</div> <div id=“cont-3” class=“tab-content”> 333</div>
  11. 11. Простой пример реализации табов на AngularJS и jQuery <div ng-app=“app” ng-controller=“ tabsController”> <ul> <li ng-class="{'active': activeTab == 'cont-1'}"><a href="javascript:;" ng-click="switchToTab('cont- 1’)">first</a></li> <li ng-class="{'active': activeTab == 'cont-2'}"><a href="javascript:;" ng-click="switchToTab(‘cont- 2’)">second</a></li> <li ng-class="{'active': activeTab == 'cont-3'}"><a href="javascript:;" ng-click="switchToTab(‘cont- 3’)">second</a></li> </ul> <div ng-show="activeTab == 'cont-1'" ng-cloak> <div ng-show="activeTab == 'cont-2'" ng-cloak> <div ng-show="activeTab == 'cont-3'" ng-cloak> </div> AngularJS var angularApp = angular.module(‘app', []); angularApp.controller(‘tabsController', ['$scope', function($scope) { $scope.activeTab = ‘cont-1'; $scope.switchToTab = function( tab ) { $scope.activeTab = tab; } }]);
  12. 12. Некоторые «подводные камни»: настройка AJAX Настройка AJAX angularApp.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; $httpProvider.defaults.transformRequest = function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); } }]); Пример AJAX в AngularJS (JSONP) angularApp.controller(‘controller', ['$scope', '$http', function($scope, $http) { $http.post( URL, { some: some } ).success( function( response ) { /*do something with response*/ } ); }]);
  13. 13. Зачем AngularJS WordPress’у?  Большие плагины (админка)  Крупные сайты на WordPress  Админка самого WordPress’а =)
  14. 14. Где искать документацию и помощи?  Google -> stackoverflow  https://docs.angularjs.org/guide

×