Angular js
Download as PPTX, PDF1 like562 views
Доклад рассматривает AngularJS как альтернативу jQuery, описывая его особенности, архитектуру и область применения, особенно для создания одностраничных приложений. Выделены преимущества и недостатки AngularJS, такие как меньший объем кода и сложность изучения, а также примеры реализации простейших интерфейсов и настройки AJAX. Документ подчеркивает важность AngularJS для разработки на WordPress и предлагает ресурсы для получения дополнительной информации.
![Наглядные простейшие примеры. Что
такое контроллеры
<html ng-app="SimpleModule">
<head><meta charset="UTF-8" /><title>Простой
модуль</title><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/ang
ular.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></div>
</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-140908041233-phpapp01/85/Angular-js-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-140908041233-phpapp01/85/Angular-js-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-140908041233-phpapp01/85/Angular-js-12-320.jpg)
More Related Content
![[JAM 1.0] Android OS, Java (Paul Malikov)](https://cdn.slidesharecdn.com/ss_thumbnails/jam-jan16-2010-android-110117084616-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Angular js
- 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="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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/ang ular.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></div> </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