Angular JS趕快學起來（下）

時間 2019-11-10

原文原文鏈接

Angular JS趕快學起來（下）

過濾器

過濾器的主要用途就是一個格式化/篩選數據的小工具
通常用於服務端存儲的數據轉換爲用戶界面能夠理解的數據

內置過濾器

語法
- 不一樣的過濾器語法不一樣

// 1: 須要過濾的數據，2: 過濾器的類型，3: 以後都是參數
{{ currency_expression | currency : symbol : fractionSize}}

也能夠引入語言包，而後直接給過濾器類型便可
過濾器既能夠在html中使用也能夠在js中使用

經常使用的內置過濾器

currency

定義本位幣類型

<!-- 獲取人民幣-->
    {{"8900000"|currency:"￥"}}
    <br/>
    <!-- 獲取美圓-->
    {{"8900000"|currency}}

date

定義日期結構

<!-- 獲取年月日-->
    {{"8904500"|date}}
    <br/>
    <!-- 1970-01-01形式-->
    {{"8904500"|date:"yyyy-MM-dd"}}
    <br/>
    <!-- 1970-01-01 10-28-24  10點28分24秒-->
    {{"8904500"|date:"yyyy-MM-dd HH-mm-ss"}}

json

輸出有格式的對象，配合pre標籤用於調試

<!--輸出 { "name": "張三", "age": 19 }-->
    {{data|json}}
    <br/>
    <!-- {
  "name": "張三",
  "age": 19
        }-->
    <input type="text" ng-model="data.name"/>
    <pre>{{data|json}}</pre>

lowercase

把大寫字母變爲小寫字母

{{'DDDDFFGRE'|lowercase}}

uppercase

把小寫字母變爲大寫字母

number

定義小數點

<!-- 345678.000-->
    {{'345678'+'.000'}}

limitTo

截取字符串操做

{{'3456784566'|limitTo:3:4}}

filter

模糊匹配對象中全部屬性的值，和展現沒有關係
若是傳入一個對象的話，會根據特定的屬性檢索

<li ng-repeat="item in data| filter:search">{{item}}</li>
   var myModule=angular.module("myModule",[]);
   myModule.controller("myController", ['$scope',function ($scope) {
       $scope.data=[
           {name:"張三",address:"外灘"},
           {name:"李四",address:"迪士尼"},
           {name:"王五",address:"城隍廟"},
           {name:"張六",address:"人民廣場"}
       ]
   }])

orderBy

按照指定的對象屬性排序html

<table class="friend">
  <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
  </tr>
  <!-- 按age大小排序，-age從大往小排-->
  <tr ng-repeat="friend in friends | orderBy:'-age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
  </tr>
</table>
  var myModule=angular.module("myModule",[]);
  myModule.controller("myController", ['$scope',function ($scope) {
      $scope.friends =
              [{name:'John', phone:'555-1212', age:10},
                  {name:'Mary', phone:'555-9876', age:19},
                  {name:'Mike', phone:'555-4321', age:21},
                  {name:'Adam', phone:'555-5678', age:35},
                  {name:'Julie', phone:'555-8765', age:29}];
  }])

自定義過濾器

根據本身的需求定義須要的過濾器

服務

AngularJS支持使用服務的體系結構,符合「關注點分離」的概念。
全部與展現邏輯（或者說交互邏輯）無關的部分都應該寫成 Provider（廣義的）。

內置服務

$http

$http服務直接同外部進行通訊。$http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。

標準用法

$http({
    url:'data.json',
    method:'GET',
}).success(function(data,header,config,status){
    //響應成功
}).error(function(data,header,config,status){
    //處理響應失敗
});

快捷用法

// get請求方式
$http.get(url).success(function(data,header,config,status){
    //響應成功
}).error(function(data,header,config,status){
    //處理響應失敗
});

// post請求方式
$http.post(url,obj).success(function(data,header,config,status){
    //響應成功
}).error(function(data,header,config,status){
    //處理響應失敗
});

響應對象

data：這個數據表明轉換事後的響應體
status：響應的HTTP狀態碼
headers：這個函數是頭信息的getter函數
config：這個對象是用來生成原始請求的完整設置對象。

$on $emit $bordercast

在控制器做用域之間傳遞event和data
$emit：子傳父傳遞event與data
$broadcast：父傳子 child controller傳遞event與data
$on：監聽或接收數據，用於接收event與data
注意：$broadcast、$emit事件必須依靠其餘事件（ng-click等）進行觸發，而不能單純寫一個這個。$on卻是能夠直接寫，由於它屬於監聽和接收數據的。

// 廣播事件
$scope.clkme=function(){
    $scope.$broadcast('sendChild','我給子控制器傳遞數據');
    $scope.$emit('sendParent','冒泡到父元素')
}

// 接收事件
$scope.$on('sendParent',function(event,data){//監聽在子控制器中定義的 sendParent 事件
    console.log('OneSelfController傳過來的',data,event.name,event);//事件名稱：sendParent
});

$sce

即「Strict Contextual Escaping」的縮寫。翻譯成中文就是「嚴格的上下文模式」也能夠理解爲安全綁定吧。

<p ng-bind-html="currentWork.description | to_trusted"></p>

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
    return $sce.trustAsHtml(text);
};

自定義服務

factory(工廠)

app.factory('name',function(){return obj})；name爲服務的名字,第二個參數傳入一個函數,函數須要有一個返回值obj,返回一個對象.實際被注入的服務就是這個對象.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
     var myname = 'code_bunny';
     var age = 12;
     var id = 1;
     return {
         name: myname,
         age: age,
         getId: function(){
             return id
         }
     }
});

service（服務）

app.service('name',constructor)；name爲服務的名字,constructor是一個構造函數.

mainApp.service('CalcService', function(MathService){
     var myname = 'code_bunny';
        var age = 12;
        var id = 1;
        this.name = myname;
        this.age = age;
        this.getId = function(){
            return id
        }
});


## 路由
控制頁面跳轉的第三方插件

### ng-route

#### ng-route使用步驟
- npm install angular-route -save
- 引入這個包
- 在本身的模塊中添加 ngRoute模塊依賴
- 路由配置（配置路由規則）
  + 規則指的就是 什麼樣的請求 找什麼控制器
  + [{url:'/sdf',controller:'MainController'}]
- 編寫對應的控制器和視圖
 

#### 主要方法
- when()：配置路徑和參數;
- otherwise：配置其餘的路徑跳轉，能夠想成default。
- controller：對應路徑的控制器函數，或者名稱
- template：對應路徑的頁面模板，會出如今ng-view處,好比"<div>xxxx</div>"
- templateUrl：對應模板的路徑，好比"src/xxx.html"
- redirectTo：重定向地址

#### 模板頁面

.when('/home', {
templateUrl:'page1'
})git

#### 參數傳遞和獲取
- 在路由後面加：定義參數
- 在控制器中用routeParams獲取參數

#### 路由監聽
- $routeChangeStart：這個事件會在路由跳轉前觸發
- $routeChangeSuccess：這個事件在路由跳轉成功後觸發
- $routeChangeError：這個事件在路由跳轉失敗後觸發

$scope.$on("$routeChangeStart",function(event,next,current){
//event.preventDefault(); //cancel url change
console.log("route change start!");
});
```github