簡述angular 中constant和$filter的用法？

1.背景介紹

angular是什麼：AngularJS 最初由Misko Hevery和Adam Abrons於2009年開發，後來成爲了Google公司的項目。AngularJS彌補了HTML在構建應用方面的不足，其經過使用標識符（directives）結構，來擴展Web應用中的HTML詞彙，使開發者可使用HTML來聲明動態內容，從而使得Web開發和測試工做變得更加容易。

constant，能夠算做angular的全局數據，想要使用的話，只須要在控制器注入便可。

$filter，angular的過濾器，若是想要在控制器裏面使用，也是注入，而後調用，而html中的數據過濾，直接鍵入過濾器名稱和對應值便可。

2.知識剖析
constant

每當搜索constant時候，總會連帶出現value的說明。

二者均可以做爲全局變量使用，可是有兩點不一樣：

1.value不能夠在config裏注入，可是constant能夠。

2.value能夠修改，可是constant不能夠修改，通常直接用constant配置一些須要常用的數據。

下面是簡單的應用例子：

angular.module('myApp', [])

.constant('apiKey', '123123123')

.value('FBid','231231231')

.controller('myController',function($scope,apiKey,FBid){

$scope.a = apiKey;

$scope.b = FBid;

})

.config(function(apiKey) {

// 在這裏apiKey將被賦值爲123123123

// 就像上面設置的那樣

})

.config(function(FBid) {

// 這將拋出一個錯誤，未知的provider: FBid

// 由於在config函數內部沒法訪問這個值

});

filter是用來格式化數據用的

基本原型

{{expression | filter}}

多個filter連用版

{{expression | filter1 | filter2}}

傳入參數版

{{expression | filter:1:2}}

AngularJS內建了一些經常使用的filter：

一、格式化貨幣：

{{ 12 | currency}}  //將12格式化爲貨幣，默認單位符號爲 '$', 小數默認2位

{{ 12.45 | currency:'￥'}} //將12.45格式化爲貨幣，使用自定義單位符號爲 '￥', 小數默認2位

{{ 12.45 | currency:'CHY￥':1}} //將12.45格式化爲貨幣，使用自定義單位符號爲 'CHY￥', 小數指定1位, 會執行四捨五入操做

{{ 12.55 | currency:undefined:0}} //將12.55格式化爲貨幣， 不改變單位符號， 小數部分將四捨五入

二、格式化日期：

{{ 1304375948024 | date:'medium'}}//May 03, 2011 06:39:08 PM

{{ 1304375948024 | date }}//結果：May 3, 2011

{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}//結果：05/03/2011 @ 6:39AM

{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}//結果：2011-05-03 06:39:08

三、過濾數組：

$scope.arr = [{"age": 20,"id":

10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age":

44,"id": 12,"name": "test abc"} ]

{{arr | filter:'s'}}  //查找含有有s的行//上例結果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{arr | filter:{'name':'ip'} }}//查找name like ip的行//上例結果:[{"age":20,"id":10,"name":"iphone"}] 

四、將對象格式化成標準的JSON格式：

{{ {name:'Jack', age: 21} | json}}

五、字符串，對象截取：

{{ "i love tank" | limitTo:6 }}//結果：i love

{{ "i love tank" | limitTo:-4 }}//結果：tank 

{{ [{"age": 20,"id": 10,"name":

"iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id":

12,"name": "test abc"} ] | limitTo:1

}}//結果：[{"age":20,"id":10,"name":"iphone"}]

六、大小寫轉換：

China has joined the {{ "wto" | uppercase }}.

We all need {{ "MONEY" | lowercase }}.

七、數值類：

{{ 1.234567 | number:1 }}  //結果：1.2

{{ 1234567 | number }}    //結果：1,234,567

八、對象排序：

$scope.arr = [{"age": 20,"id":

10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age":

44,"id": 12,"name": "test abc"} ]

{{arr | orderBy:'id':true }}//根id降序排 

{{arr | orderBy:'id' }}//根據id升序排

九、固然，咱們還能夠自定義filter方法。

3.常見問題
如何使用angular中constant和$filter？

4.編碼實戰
angular.module("myApp")

.value('val',{

})

//公司編輯常量組

.constant('con', {

  //公司人數

  companyPop:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100-200人'},

      {type: 5, name: '200-500人'},

      {type: 6, name: '500-1000人'},

      {type: 7, name: '1000人以上'}

],

  //公司行業

  //團隊規模：

  workGroupScale:[

      {type: 0, name: '1-10人'},

      {type: 1, name: '10-20人'},

      {type: 2, name: '30-50人'},

      {type: 3, name: '50-100人'},

      {type: 4, name: '100人以上'},

],

  //用戶人數

  userPop:[

      {type:0,name:'不限'},

{type:1,name:'1W-10W'},

{type:2,name:'10W-50W'},

{type:3,name:'50W-100W'},

{type:4,name:'100W-1000W'},

      {type:5,name:'1000W以上'}

],

  //盈利狀況

  earnings:[

      {type:0,name:'不限'},

      {type:1,name:'虧損'},

      {type:2,name:'平衡'},

      {type:3,name:'盈利'},

      {type:4,name:'其餘'}

]

5.擴展思考
AngularJS的內置過濾器有哪些？

今天咱們來了解一下AngularJS的內置過濾器

先來看看這些內置過濾器使用方法:

一個過濾器，不帶參數的狀況

{{expression | filter}}

一個過濾器，帶參數的狀況

{{expression | filter:arguments}}

一個過濾器，帶多個參數的狀況

{{expression | filter: arg1: arg2: ...}}

多個過濾器，不帶參數的狀況

{{expression | filter1 | filter2 | ...}}

下面咱們分別使用如下AngularJS的內置過濾器

currency

currency容許咱們設置本身的貨幣符號，默認狀況下會採用客戶端所處區域的貨幣符號。

能夠這樣使用：{{ 3600 | currency: "$￥"}}

返回結果爲$￥123.00

number

number過濾器將數字格式化成文本，它的參數是可選的，用來控制小數點後的截取位數

若是傳入的是一個非數字字符，會返回空字符串

能夠這樣使用：{{ 3600 | number:2}}

返回結果爲：3,600.00

lowercase

lowercase將字符串轉換爲小寫

能夠這樣使用：{{ "HEllo" | lowercase}}

返回結果爲：hello

uppercase

uppercase將字符串轉換爲大寫

能夠這樣使用：{{ "HEllo" | uppercase}}

返回結果爲：HELLO

json

json過濾器能夠將一個JSON或者JavaScript對象轉換成字符串。

這個過濾器對調試至關有用

能夠這樣使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}

返回結果爲：{ "name": "dreamapple", "language": "AngularJS" }

date

date過濾器將日期過濾成你想要的格式，這個實在是很好的過濾器。

這個過濾器用法不少我這裏列舉幾種經常使用的

{{ today | date: "yyyy - mm - dd"}}

結果爲：2015 - 15 - 13

{{ today | date: "yyyy - mm - dd HH:mm::ss"}}

結果爲：2015 - 18 - 13 20:18::38

online code

還有三個內置的過濾器，可是使用稍微複雜一點。

6.參考文獻
參考一：angularJS constant和value

參考二：AngularJS的Filter用法詳解

7.更多討論
Q1: constant和value有什麼關係

A1: 

當咱們想要建立一個服務，而且這個服務只須要返回數據時，就可使用constant(name,value)和value(name,value)，不過，它們有兩個顯著的區別：

1.value不能夠在config裏注入，可是constant能夠

2.value能夠修改，可是constant不能夠修改，通常直接用constant配置一些須要常用的數據。

Q2: 什麼是stateful filters
A2: 
在 Angular 裏面，常用 filter 來處理一些數據的顯示問題。但當 filter 要使用到異步數據時就會變得有些麻煩，試了網上不少解決方案都不行，才發現和 Angular 版本升級有關：

Angular 在 1.3.0 以後的版本提出了Stateful filters的概念，但不是很推薦使用。

Q3: 如何學習angularA3: 先經過任務6-10來學習，邊看文檔邊寫代碼，多體驗下框架的核心