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 + jqLite

Подходит для сложных SPA-приложений

Забудьте про наименование классов или #id-шников

Будущее Front-End разработки

Постоянно дорабатывается ………..Google-ом =))

Построен на watcher’ах

Минусы Сложнее в изучении

«Переадаптация» требует времени

Весит больше (105 > 83 кб)

Неочевидные решения

Постоянно дорабатывается


Применимость 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;

};

}]);


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 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>

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

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

Technology