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

AngularJS
АЛЬТЕРНАТИВА JQUERY. ВВЕДЕНИЕ И ОСНОВЫ
06.09.2014 Saint-Petersburg WordPress Meetup #2
Igor Sazonov @tigusigalpa

План доклада
 Что такое AngularJS
 Область применения. Откуда такая популярность? Конкуренты
 Плюсы и минусы. Чем отличается от jQuery
 Архитектура AngularJS
 Наглядные простейшие примеры. Что такое контроллеры
 Простой пример реализации табов на AngularJS и jQuery
 Некоторые «подводные камни»: настройка AJAX
 Зачем AngularJS WordPress’у?
 Где искать документацию и помощи?

Что такое AngularJS?
 JavaScript MVC-фреймворк от Google
 URL: https://angularjs.org
 Год создания: 2009
 Текущая версия: 1.2.22 / 1.3.0-beta (20.08.2014)
 Вес: 105кб

Область применения. Откуда
такая популярность? Конкуренты
 Идеален для Single Page Application (SPA) приложений
(«богатое» приложение, генерирующее и изменяющее
большой объем DOM’а «на лету» без перезагрузки страницы)
 «Умный». Додумывает за разработчика. Например ng-show
скрывает элемент, если он не удовлетворяет условию.
 Код более сложный, но его в разы меньше
 Никакой привязки к #id и .class для работы с элементами =)))))
 Основные конкуренты: Backbone.js, KnockoutJS, ember.js

Плюсы и минусы. Чем отличается
от jQuery
Плюсы
 Меньше кода (иногда в разы!)
 Более высокий уровень
программирования
 Совместим с jQuery + jqLite
 Подходит для сложных SPA-
приложений
 Забудьте про наименование
классов или #id-шников
 Будущее Front-End разработки
 Постоянно дорабатывается
………..Google-ом =))
 Построен на watcher’ах
Минусы
 Сложнее в изучении
 «Переадаптация» требует
времени
 Весит больше (105 > 83 кб)
 Неочевидные решения
 Постоянно дорабатывается

Плюсы и минусы. Чем отличается
от jQuery
Применимость AngularJS относительно jQuery
jQuery
AngularJS
Сложность приложения
SPA

Архитектура AngularJS
Module – модуль – глобальное
хранилище для Вашего приложения
(контроллеры, роуты, вьюхи)
Config – конфиг – настройки модуля
Routes – «менеджер» контроллеров для
урлов типа #/someurl
Controller – контроллер – логика
отдельных частей модуля (приложения)
View – представление html контроллера
$scope – глобальный объект (со всеми
данными) контроллера
Directives – кастомное поведение html
Factory – фабрика (сервис)

Наглядные простейшие
примеры. Что такое контроллеры
<!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>

Наглядные простейшие
примеры. Что такое контроллеры
<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;
};
}]);

Простой пример реализации
табов на 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>
222</div>
333</div>

Простой пример реализации
табов на 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>
href="javascript:;" ng-click="switchToTab(‘cont-
2’)">second</a></li>
href="javascript:;" ng-click="switchToTab(‘cont-
3’)">second</a></li>
</ul>
<div ng-show="activeTab == 'cont-1'" 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;
}
}]);

Некоторые «подводные камни»:
настройка 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*/ } );
}]);

Зачем AngularJS WordPress’у?
 Большие плагины (админка)
 Крупные сайты на WordPress
 Админка самого WordPress’а =)

Где искать документацию и
помощи?
 Google -> stackoverflow
 https://docs.angularjs.org/guide

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a AngularJS. Введение и простые примеры для понимания (20)

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