3.Angular框架-angular過濾器、service 服務、ngRoute -路由

1.1. TodoMVC案例

• todomvc官網
• todomvc素材

1.1.1. 功能劃分

1 展現任務列表
2 添加任務
3 刪除一條任務
4 修改任務
5 切換任務選中狀態(單個或批量)
6 清除已完成任務
7 顯示未完成任務數
8 顯示不一樣狀態的任務
    以及當前任務高亮處理
9 根據URL變化顯示相應任務
11 使用服務抽象數據模型管理
12 使用路由完成不一樣任務的切換

1.1.2. $location.url()

• 做用：用於獲取頁面中的錨點值，不包含：#
• 注意：$location 與 $scope同樣，都須要經過注入的方式傳入

URL是： file:///F:/Angular_File/todomvc/index.html#/completed

經過調用 $location.url() 方法獲取的是：'/completed'

1.2. 過濾器

• 做用：格式化數據/篩選數據的小工具
• 語法：在數據模型的後面加上 | 過濾器名稱: 參數
• 說明：過濾器經過 | 指定，參數經過 : 指定

1.2.1. 格式化數據過濾器

• 做用：對數據進行格式化，以某種指定的格式輸出

1.2.1.1. filter過濾器 -過濾數據

• 做用：對數據進行過濾，從多條數據中篩選出符合規則的數據
• 參數：
  • 基本類型參數：angular會根據參數對數據進行全局匹配
  • 對象類型參數：根據參數對象中的屬性對數據進行匹配，只會匹配指定的屬性
• 注意：配合track by使用的時候，track by 要放在最後面

<!-- 取出 completed 屬性爲：true 的數據 -->
<p ng-repeat="item in data | filter:{completed: true} track by $index"></p>

<script>
app.controller('FilterController', ['$scope', '$filter', 
    function($scope, $filter) {
        $scope.data = [
            {name: '吃飯', completed: true },
            {name: '睡覺', completed: false },
            {name: '豆豆', completed: true }
        ];
    }]);
</script>

1.2.1.2. currency 過濾器

• 做用：將數字轉化爲貨幣的形式顯示

<p>{{12345678.333 | currency: "￥"}}</p>

1.2.1.3. date 過濾器

• 做用：將整數形式的日期轉化爲經常使用日期形式

<p>{{1412345678901 | date: "yyyy-MM-dd hh:mm:ss"}}</p>

1.2.1.4. limitTo 過濾器

• 做用：限制顯示的文字個數
• 參數：:5 表示展現文字長度爲：5，:2 表示開始的索引號

<p>{{'是誰在唱歌，溫暖了寂寞' | limitTo:5:2}}</p>

1.2.1.5. orderBy 過濾器

• 做用：對數據進行排序
• 參數：排序的屬性，若是是倒序排列，屬性名前加-，例如：-age
• 說明：通常與 ng-repeat 指令共同使用

<p ng-repeat="item in data | orderBy: 'age'"></p>

1.2.2. 在JavaScript中使用過濾器

• 語法：
• 使用 $filter 方法,參數爲：過濾器名稱
• $filter方法的返回值是一個方法：第一個參數表示要過濾的數據，後面的參數爲：過濾器的參數

var time = $filter("date")($scope.curDate, "yyyy-MM-dd hh:mm:ss");

1.3. service 服務

• 公用（公共）的業務邏輯集中存放的一段代碼
• 主要用於對重複業務的封裝，達到複用的目的
• 通常主要封裝針對於Model的CRUD
• 服務中的代碼只會在使用服務的時候，執行一次，而且只會執行一次
• 服務給控制器提供了一些額外的功能
  • $log / $http 等以$開頭的服務都是Angular的內置服務

1.3.1. 建立服務

• 建立服務的語法，與建立控制器的語法相同
• service方法中的函數參數，是一個構造函數，經過this添加成員
• 控制器中經過服務的名字（實例對象）就可使用服務的屬性和方法

app.service('TestService', [function() {
    // this.get = function() {};
    // this.set = function() {};
    // this.update = function() {};
    // this.delete = function() {};
}]);

// 在控制器中使用自定義服務
app.controller('DemoController', ['$scope', 'TestService', 
    function($scope, TestService) {
    console.log(TestService);
}]);

1.3.2. 模塊之間的依賴關係

有三個模塊：
1 app.js：主模塊，應用程序的入口，實現統一調用全部其餘模塊
2 controller.js：控制器模塊，處理視圖中與用戶交互的功能，即：處理業務邏輯
3 service.js：服務模塊，抽象數據操做，提供數據的增刪改查

每一個模塊都會放在一個獨立的js文件中，所以，每一個文件都會有一個模塊，
    即：angular.module("模塊名", []);
創建模塊之間的聯繫：
    在 app.js 主模塊中，引入：controller 和 service這兩個模塊

1.4. ngRoute -路由

• 語法：app.config(['$routeProvider', function($routeProvider) {}])
• 安裝：npm install angular-route 單獨安裝
• 注意：ngRoute -路由模塊名稱，做爲依賴模塊

1.4.1. 使用步驟

• 1 引入 angular-route.js 文件
• 2 建立模塊的時候，將ngRoute做爲依賴項引入
• 3 經過調用模塊的config方法來配置路由，並將$routeProvider注入進來
• 4 經過$routeProvider的兩個方法：when()和otherwise()進行路由配置
• 5 在視圖中，經過指令ng-view展現路由對應的內容
• 6 1.6 版本之後，添加 $locationProvider.hashPrefix('') 配合 #/users 使用

<div ng-app="routeApp">
    <a href="#/stu/li"></a>
    <p>a</p>
    <p>b</p>
    <div ng-view></div>
    <p>c</p>
    <p>d</p>
</div>

<script>
    var app = angular.module('routeApp', ['ngRoute']);
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/stu/li', {
            template: '<p>李四</p>'
        });
    }]);
</script>

1.4.2. when() 方法

• 參數：

  • 第一個參數：url的hash值，例如：/stu/li
  • 第二個參數：是一個對象，對象中屬性用來控制路由的相關功能

• template：指定路由的模板，顯示在ng-view指令全部的html元素中

• templateUrl: 做用與 template 相同，取值：模板id 或者 路徑
• controller: 爲路由指定一個控制器，用於提供當前視圖中的數據模型

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/stu/li', {
        template: '<p>你好，我是{{name}}</p>',
        controller: 'stuController'
    });
}]);

app.controller('stuController', ['$scope', function($scope) {
    $scope.name = '小明';
}]);

1.4.3. otherwise() 方法

• 做用：匹配不合法（when沒法匹配）的錨點值，與switch-case中的 default 相似
• 參數: 是一個對象
• redirectTo屬性：指定默認跳轉的錨點值

$routeProvider
    .otherwise({
        redirectTo: '/stu/'
    });

1.4.4. $routeParams -路由的服務

• 做用：用於獲取路由的參數，是 路由服務，在控制器中使用
• ":name?" 的 ":name"用於匹配URL路徑，"?"表示能夠省略
• 例如URL爲 "#/stu/lisi" ，路由 "/stu/:name" 匹配：lisi

app.config(['$routeProvider', function($routeProvider) {
    // '/stu/:name?' 用來匹配：/stu/ 或 /stu 或 /stu/xxx 的任意一種
    $routeProvider.when('/stu/:name?', {
        template: '<p>你好，我是{{name}}</p>',
        controller: 'stuController'
    });
}]);

app.controller('stuController', ['$scope', '$routeParams', function($scope, $routeParams) {
    // $routeParams 是一個對象，對象中包含了一個 name 屬性。
    // name屬性，是路由的 when 方法的第一個參數
    console.log($routeParams.name);
}]);

1.4.5. $route -路由的服務

• 做用：控制當前的路由
• $route.updateParams()方法：更新路由參數的值
  • 參數：對象，具備路由參數屬性，用於指定更新後的錨點值
• 可使用 $location.url('/teacher/laowang') 來修改，路由的URL值

app.controller('stuController', ['$scope', '$routeProvider', '$route', function($scope, $routeProvider, $route) {
    console.log($routeProvider.name);

    // 參數是一個對象，具備路由參數屬性的對象
    $route.updateParams({name: 'lisi'});
}]);

1.4.6. hashPrefix

• 在 angular-1.6以上的版本，默認使用 ! 前綴

<a href="#!/users"></a>

<script>
$routeProvider
    .when('/users', {
        templateUrl: 'view.html',
        controller: 'TestController'
    })

// 1.6以上，默認值爲：'!'
// $locationProvider.hashPrefix('!');
</script>