Angular.JS
MVC - Java-Script это
APP / Modules
- Module - Базовый контейнер для app включает в себя controllers, services, filters, directives сконфигурированные Injector
- Service - Бизнес логика для отображения в views
- Dependency-Injection - Создает ленивые связи с объектами
- Injector - dependency injection container
- View - HTM представление (может содержать ng дериктивы)
- Template - HTMLшаблон
- Directives - extend HTML with custom attributes and elements
- Markup - Обработка шаблона angularjs
- Filter - Обработка данных перед выводом
- Form controls -
- Compiler - parses the template and instantiates directives and expressions
- Controller - the business logic behind views
- Behavior - Функции внутри контролера
- Model - Данные содержащиеся в контролере
- Scope - $scope - Область контроллера содержащая данные модели
- Expressions - access variables and functions from the scope
- Data Binding - sync data between the model and the view
Module
Директивы
Директивы при создании всегда именуются с использованием lowerCamelCase. При использовании директиву необходимо именовать в нижнем регистре с использованием в качестве разделителя одного из спец символов: :, -, или _. По желанию для получения валидного кода можно использовать префиксы x- или data-. Примеры: tb:tooltip, tb-tooltip, tb_tooltip, x-tb-tooltip и data-tb-tooltip.
Фазы работы директивы
- compile: фаза, во время которой можно производить трансформацию шаблонной DOM-структуры элемента, к которому применяется директива. Под шаблонной структурой подразумевается либо внутренняя структура, описанная в самом коде HTMLстраницы, либо шаблон, заданный полями template или
- templateUrl: конфигурационного объекта. Следующим примером будет как раз директива на базе compile функции;
- preLink: фаза, выполняемая перед связыванием всех дочерних элементов. Здесь не рекомендуется проводить какие-либо трансформации DOM;
- postLink: фаза, выполняемая после связывания всех дочерних элементов. Наиболее часто используемая фаза. Здесь рекомендуется выполнять все необходимые DOM трансформации, навешивать обработчики событий и т.п.
Пример встроенных директив
- ng-init - Инициализация APP
Пример кастомных директив
Расширения
Статьи
Service / Сервисы
angular.module('finance2',[]) .factory('currencyConverter',function(){var currencies =['USD','EUR','CNY'];var usdToForeignRates ={ USD:1, EUR:0.74, CNY:6.09};var convert =function(amount, inCurr, outCurr){return amount * usdToForeignRates[outCurr]/ usdToForeignRates[inCurr];}; return{ currencies: currencies, convert: convert };});
angular.module('invoice2',['finance2']) .controller('InvoiceController',['currencyConverter',function(currencyConverter){this.qty=1;this.cost=2;this.inCurr='EUR';this.currencies= currencyConverter.currencies; this.total=function total(outCurr){return currencyConverter.convert(this.qty*this.cost,this.inCurr, outCurr);};this.pay=function pay(){ window.alert("Thanks!");};}]);
<div ng-app="invoice2" ng-controller="InvoiceController as invoice"><b>Invoice:</b><div> Quantity: <inputtype="number" min="0" ng-model="invoice.qty" required ></div><div> Costs: <inputtype="number" min="0" ng-model="invoice.cost" required ><select ng-model="invoice.inCurr"><option ng-repeat="c in invoice.currencies">{{c}}</option></select></div><div><b>Total:</b><span ng-repeat="c in invoice.currencies"> {{invoice.total(c) | currency:c}} </span><buttonclass="btn" ng-click="invoice.pay()">Pay</button></div></div>
Controller
<div ng-app="myApp"><div ng-controller="invoceController as invoce"><h1>{{invoce.item.name}}</h1><h1>{{invoce.item.field1}}</h1><h1>{{invoce.item.field2}}</h1></div></div>
Алиас invoceработает только для view
var app = angular.module('myApp',[]); app.conroller('invoceController',function(){this.item={ name:'', field1:'', field2:''};});
Behavior
<!DOCTYPE html><html ng-app="gemStore"><head><linkrel="stylesheet"type="text/css"href="bootstrap.min.css"/><scripttype="text/javascript"src="angular.min.js"></script><scripttype="text/javascript"src="app.js"></script></head><bodyclass="list-group" ng-controller="StoreController as store"><header><h1class="text-center">Flatlander Crafted Gems</h1><h2class="text-center">– an Angular store –</h2></header><divclass="list-group-item" ng-repeat="product in store.products"><h3> {{product.name}} <emclass="pull-right">{{product.price | currency}}</em></h3> <!-- Image Gallery --><divclass='gallery' ng-show="product.images.length" ng-controller="GalleryController as gallery"><img ng-src="{{product.images[gallery.current]}}"/><ulclass="list-inline thumbs"><liclass="thumbnail" ng-repeat="image in product.images"><img ng-src="{{image}}"/></li></ul></div> <section class="tab" ng-controller="TabController as tab"><ulclass="nav nav-pills"><li ng-class="{ active: tab.isSet(1) }"><ahref ng-click="tab.setTab(1)">Description</a></li><li ng-class="{ active: tab.isSet(2) }"><ahref ng-click="tab.setTab(2)">Specs</a></li><li ng-class="{ active: tab.isSet(3) }"><ahref ng-click="tab.setTab(3)">Reviews</a></li></ul><div ng-show="tab.isSet(1)"><h4>Description</h4><blockquote>{{product.description}}</blockquote></div><div ng-show="tab.isSet(2)"><h4>Specs</h4><blockquote>Shine: {{product.shine}}</blockquote></div><div ng-show="tab.isSet(3)"><h4>Reviews</h4></div></section></div></body></html>
(function(){var app = angular.module('gemStore',[]); app.controller('StoreController',function(){this.products= gems;}); app.controller('TabController',function(){this.tab=1; this.setTab=function(newValue){this.tab= newValue;}; this.isSet=function(tabName){returnthis.tab=== tabName;};}); app.controller('GalleryController',function(){this.current=0;this.setCurrent=function(newGallery){this.current= newGallery ||0;};}); var gems =[{ name:'Azurite', description:"Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", shine:8, price:110.50, rarity:7, color:'#CCC', faces:14, images:["images/gem-02.gif","images/gem-05.gif","images/gem-09.gif"], reviews:[{ stars:5, body:"I love this gem!", author:"joe@example.org", createdOn:1397490980837},{ stars:1, body:"This gem sucks.", author:"tim@example.org", createdOn:1397490980837}]},{ name:'Bloodstone', description:"Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.", shine:9, price:22.90, rarity:6, color:'#EEE', faces:12, images:["images/gem-01.gif","images/gem-03.gif","images/gem-04.gif",], reviews:[{ stars:3, body:"I think this gem was just OK, could honestly use more shine, IMO.", author:"JimmyDean@example.org", createdOn:1397490980837},{ stars:4, body:"Any gem with 12 faces is for me!", author:"gemsRock@example.org", createdOn:1397490980837}]},{ name:'Zircon', description:"Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.", shine:70, price:1100, rarity:2, color:'#000', faces:6, images:["images/gem-06.gif","images/gem-07.gif","images/gem-09.gif"], reviews:[{ stars:1, body:"This gem is WAY too expensive for its rarity value.", author:"turtleguyy@example.org", createdOn:1397490980837},{ stars:1, body:"BBW: High Shine != High Quality.", author:"LouisW407@example.org", createdOn:1397490980837},{ stars:1, body:"Don't waste your rubles!", author:"nat@example.org", createdOn:1397490980837}]}];})();
Scope
Статьи
Example 1
<div ng-controller="MyController"> Your name: <inputtype="text" ng-model="username"><button ng-click='sayHello()'>greet</button><hr> {{greeting}} </div>
angular.module('scopeExample',[]) .controller('MyController',['$scope',function($scope){ $scope.username='World'; $scope.sayHello=function(){ $scope.greeting='Hello '+ $scope.username+'!';};}]);
Example 2
<divclass="show-scope-demo"><div ng-controller="GreetController"> Hello {{name}}! </div><div ng-controller="ListController"><ol><li ng-repeat="name in names">{{name}} from {{department}}</li></ol></div></div>
angular.module('scopeExample',[]) .controller('GreetController',['$scope','$rootScope',function($scope, $rootScope){ $scope.name='World'; $rootScope.department='Angular';}]) .controller('ListController',['$scope',function($scope){ $scope.names=['Igor','Misko','Vojta'];}]);
Derectives
- ng-init
- ng-repeat - Выводить массив данных
- ng-show | ng-hide - Выводить или нет контейнер
- Пример: ng-show="product.images.length", ng-hide="product.images[0].hidden">
- ng-class - Сообщает имя класса
- ng-click - Слушает событие клик на объекте
- ng-model - Служит для привязки контролера к элементам формы
https://docs.angularjs.org/guide/directive
<div ng-app="myApp"><div ng-controller="myAppConroller as controller"><div ng-repeat="item in controller.items | limitTo:3 | orderBy:'-price'"><div ng-hide="controller.item.soldOut"><h1>{{item.name | name}}</h1><h1>{{item.price | price}}</h1><h1>{{item.description | limitTo:52}}</h1><button ng-show="controller.product.canPurchase"> Add to Cart </button></div></div></div> <div ng-controller="reviewsConroller as review"><divclass="myForms"><formname="reviewForm"><blockquote> {{review.stars}} {{review.body}} </blockquote><select ng-model="review.stars"><optionvalue="1">1 Star</option></select><textarea ng-model="review.body"></textarea><inputtype="submit"value="Submit"></form></div></div></div>
Filters
- limitTo
- uppercase
- date:"MM/dd/yyyy @ h:mma"
- orderBy
https://docs.angularjs.org/guide/filter
var app = angular.module('myApp',[]); app.conroller('myAppConroller',function(){this.items= items;}); var items ={ name:'', price:'', description:'', canPurchase:false, soldOut:true,}
Custom filter
<div ng-app="myApp"><div ng-controller="myAppConroller as controller"><div ng-repeat="league in game.leagues | orderByPopular:game.name"></div></div></div>
//Собственно сам фильтр для angular board.filter('orderByPopular',function(){returnfunction(items, sport){var filtered =[]; angular.forEach(items,function(item){ filtered.push(item);});switch(sport){case('Basketball'): sortAll(filtered, sortBasketball);break;case('Ice Hockey'): sortAll(filtered, sortIceHockey);break;case('Soccer'): sortAll(filtered, sortSoccer);break;case('Tennis'): sortAll(filtered, sortTennis);break;} return filtered;};});