Quantcast
Channel: Библиотека знаний
Viewing all articles
Browse latest Browse all 1318
↧

Angular.JS - [Filters]

November 30, 2015, 5:03 am
$
0
0

Angular.JS

MVC - Java-Script это

APP / Modules

  • Module - Базовый контейнер для app включает в себя controllers, services, filters, directives сконфигурированные Injector
  • Service - reusable business logic independent of views
  • Dependency - Injection Creates and wires objects and functions
  • Injector - dependency injection container
  • View - what the user sees (the DOM)
    • 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

https://docs.angularjs.org/guide/concepts

Module

<div ng-app="myApp"></div>
var app = angular.module('myApp',[]);

Директивы

  • 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

https://docs.angularjs.org/guide/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

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;};});

APP

↧
Search
Viewing all articles
Browse latest Browse all 1318
Search