AngularJS. Введение и простые примеры для понимания
-
Upload
igor-sazonov -
Category
Technology
-
view
1.099 -
download
5
description
Transcript of AngularJS. Введение и простые примеры для понимания
AngularJSАЛЬТЕРНАТИВА JQUERY. ВВЕДЕНИЕ И ОСНОВЫ
06.09.2014 Saint-Petersburg WordPress Meetup #2Igor 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></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;
};
}]);
Простой пример реализации табов на AngularJS и jQuery
jQueryjQuery( ‘.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>
Простой пример реализации табов на 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>
AngularJSvar angularApp = angular.module(‘app', []);
angularApp.controller(‘tabsController', ['$scope', function($scope) {
$scope.activeTab = ‘cont-1';
$scope.switchToTab = function( tab ) {
$scope.activeTab = tab;
}
}]);
Некоторые «подводные камни»: настройка AJAX
Настройка AJAXangularApp.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