Angular.js學習筆記（三）

標籤：類型   使用   tle   htm   不能   div   個數   app   通過   

一、過濾器

1、uppercase，lowercase 大小寫轉換
{{ "lower cap string" | uppercase }} // 結果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 結果：tank is good
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小數）
{{149016.1945000 | number:2}}//保留兩位
{{149016.1945000 | number}}//預設為保留3位
4、currency貨幣格式化
{{ 250 | currency }} // 結果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 結果：RMB ￥ 250.00
5、filter尋找
輸入過濾器可以通過一個管道字元（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。
filter 過濾器從數組中選擇一個子集
// 尋找name為iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{‘name‘:‘iphone‘} }}
同時filter可以自訂比較函數。
6、limitTo 截取
{{"1234567890" | limitTo :6}} // 從前面開始截取6位
{{"1234567890" | limitTo :6，6}} // 從第6位開始截取6位
{{"1234567890" | limitTo:-4}} // 從後面開始截取4位
7、orderBy 排序
// 根據id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:‘id‘:true }}

// 根據id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:‘id‘ }}
9、json（不用掌握，基本用不上）

二、服務

在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
$location 服務，它可以使用 DOM 中存在的對象，類似 window.location 對象，但 window.location 對象在 AngularJS 應用中有一定的局限性。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。
AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
AngularJS $interval 服務對應了 JS window.setInterval 函數。

建立自訂服務
你可以建立訪問自訂服務，連結到你的模組中：
建立名為hexafy 的訪問:
app.service(‘hexafy‘, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
要使用訪問自訂服務，需要在定義過濾器的時候獨立添加:
執行個體
使用自訂的的服務 hexafy 將一個數字轉換為16進位數:
app.controller(‘myCtrl‘, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

三、路由

NG中路由是單獨提供的功能模組 ngRoute, 也是一個單獨發行的檔案
- 安裝或者下載angular-route的包
- 引入這個包
- 在自己的模組中添加 ngRoute 依賴
- 路由配置（配置路由規則）
+ 規則指的就是 什麼樣的請求 找什麼控制器
+ [{url:‘/sdf‘,controller:‘MainController‘}]
- 編寫對應的控制器和視圖

執行個體解析1：
1、載入了實現路由的 js 檔案：angular-route.js。
2、包含了 ngRoute 模組作為主應用模組的相依模組。
angular.module(‘routingDemoApp‘,[‘ngRoute‘])
3、使用 ngView 指令。
<div ng-view></div>
該 div 內的 HTML 內容會根據路由的變化而變化。
4、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規則。
module.config([‘$routeProvider‘, function($routeProvider){
$routeProvider
.when(‘/‘,{template:‘這是首頁頁面‘})
.when(‘/computers‘,{template:‘這是電腦分類頁面‘})
.when(‘/printers‘,{template:‘這是印表機頁面‘})
.otherwise({redirectTo:‘/‘});
}]);
AngularJS 模組的 config 函數用於配置路由規則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數並且使用$routeProvider.whenAPI來定義我們的路由規則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數按順序定義所有路由，函數包含兩個參數:
第一個參數是 URL 或者 URL 正則規則。
第二個參數是路由設定物件。

執行個體解析2：（黑科技寫法--自稱）
<script id="a_tmpl" type="text/ng-template">
<!-- 只有type="text/javascript"的script節點才會被當做JS執行 -->
<!-- script中的內容就算不能執行，也不可以顯示在介面上 -->
<h1>{{title}}</h1>
</script>

module.config([‘$routeProvider‘, function($routeProvider){
$routeProvider
.when(‘/‘,{templateUrl: ‘a_tmpl‘})
.when(‘/computers‘,{templateUrl: ‘a_tmpl‘})
.when(‘/printers‘,{templateUrl: ‘a_tmpl‘})
.otherwise({redirectTo:‘/‘});
}]);

路由設定對象：
AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數為路由設定物件。
路由設定物件文法規則如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
參數說明：
template:
如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該參數：
.when(‘/computers‘,{template:‘這是電腦分類頁面‘})
templateUrl:
如果我們只需要在 ng-view 中插入 HTML 範本檔案，則使用該參數：
$routeProvider.when(‘/computers‘, {
templateUrl: ‘views/computers.html‘,
});
以上代碼會從服務端擷取 views/computers.html 檔案內容插入到 ng-view 中。
controller:
function、string或數群組類型，在當前模板上執行的controller函數，產生新的scope。
controllerAs:
string類型，為controller指定別名。
redirectTo:
重新導向的地址。
resolve:
指定當前controller所依賴的其他模組。

進階路由：

控制器中傳入參數$routeParams用來代表路由中的值，傳入參數$route,用於在switch(status)--‘var status=$routeParams.status‘函數中的default中來更新$routeParams值為空白
，代碼為：$route.updateParams({status:‘‘});
如果錨點是/students/zhangsan
可以寫成/:role/:name來對應此錨點
會得到{role:students,name:zhangsan}對象

## 如果連入第三方檔案時不寫協議的話：
http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js
↓
<script src="//apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js"></script>
如果當前你的網站是HTTP的方式部署的話，請求
http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js
如果是HTTPS的話，請求
https://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js

Angular.js學習筆記（三）