AngularJS. Введение и простые примеры для понимания
•Download as PPTX, PDF•
7 likes•13,544 views
Небольшое введение в AngularJS для WordPress Meetup #2 в Санкт-Петербрге. Тут рассматриваются примеры реализаций и отличие от jQuery.
![Наглядные простейшие
примеры. Что такое контроллеры
<html ng-app="SimpleModule">
<head><meta charset="UTF-8" /><title>Простой
модуль</title><script
src=/slideshow/angularjs-38774247/38774247/"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>Демо {}</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;
};
}]);](https://image.slidesharecdn.com/angularjs-140906094204-phpapp01/85/AngularJS-9-320.jpg)
![Простой пример реализации
табов на 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;
}
}]);](https://image.slidesharecdn.com/angularjs-140906094204-phpapp01/85/AngularJS-11-320.jpg)
![Некоторые «подводные камни»:
настройка 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*/ } );
}]);](https://image.slidesharecdn.com/angularjs-140906094204-phpapp01/85/AngularJS-12-320.jpg)
AngularJS. Введение и простые примеры для понимания
- 1. AngularJS АЛЬТЕРНАТИВА JQUERY. ВВЕДЕНИЕ И ОСНОВЫ 06.09.2014 Saint-Petersburg WordPress Meetup #2 Igor Sazonov @tigusigalpa
- 2. План доклада Что такое AngularJS Область применения. Откуда такая популярность? Конкуренты Плюсы и минусы. Чем отличается от jQuery Архитектура AngularJS Наглядные простейшие примеры. Что такое контроллеры Простой пример реализации табов на AngularJS и jQuery Некоторые «подводные камни»: настройка AJAX Зачем AngularJS WordPress’у? Где искать документацию и помощи?
- 3. Что такое AngularJS? JavaScript MVC-фреймворк от Google URL: https://angularjs.org Год создания: 2009 Текущая версия: 1.2.22 / 1.3.0-beta (20.08.2014) Вес: 105кб
- 4. Область применения. Откуда такая популярность? Конкуренты Идеален для Single Page Application (SPA) приложений («богатое» приложение, генерирующее и изменяющее большой объем DOM’а «на лету» без перезагрузки страницы) «Умный». Додумывает за разработчика. Например ng-show скрывает элемент, если он не удовлетворяет условию. Код более сложный, но его в разы меньше Никакой привязки к #id и .class для работы с элементами =))))) Основные конкуренты: Backbone.js, KnockoutJS, ember.js
- 5. Плюсы и минусы. Чем отличается от jQuery Плюсы Меньше кода (иногда в разы!) Более высокий уровень программирования Совместим с jQuery + jqLite Подходит для сложных SPA- приложений Забудьте про наименование классов или #id-шников Будущее Front-End разработки Постоянно дорабатывается ………..Google-ом =)) Построен на watcher’ах Минусы Сложнее в изучении «Переадаптация» требует времени Весит больше (105 > 83 кб) Неочевидные решения Постоянно дорабатывается
- 6. Плюсы и минусы. Чем отличается от jQuery Применимость AngularJS относительно jQuery jQuery AngularJS Сложность приложения SPA
- 7. Архитектура AngularJS Module – модуль – глобальное хранилище для Вашего приложения (контроллеры, роуты, вьюхи) Config – конфиг – настройки модуля Routes – «менеджер» контроллеров для урлов типа #/someurl Controller – контроллер – логика отдельных частей модуля (приложения) View – представление html контроллера $scope – глобальный объект (со всеми данными) контроллера Directives – кастомное поведение html Factory – фабрика (сервис)
- 8. Наглядные простейшие примеры. Что такое контроллеры <!doctype html> <html ng-app> <head> <script src=/slideshow/angularjs-38774247/38774247/"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. Наглядные простейшие примеры. Что такое контроллеры <html ng-app="SimpleModule"> <head><meta charset="UTF-8" /><title>Простой модуль</title><script src=/slideshow/angularjs-38774247/38774247/"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>Демо {}</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. Простой пример реализации табов на 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. Простой пример реализации табов на 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. Некоторые «подводные камни»: настройка 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. Зачем AngularJS WordPress’у? Большие плагины (админка) Крупные сайты на WordPress Админка самого WordPress’а =)
- 14. Где искать документацию и помощи? Google -> stackoverflow https://docs.angularjs.org/guide