AngularJS - 入門3

TodoMVC案例

功能劃分

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

$location.url()

作用：用於獲取頁面中的錨點值，不包含：#
注意：$location 與 $scope一樣，都需要通過注入的方式傳入

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

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

過濾器

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

格式化數據過濾器

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

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>

currency 過濾器

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

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

date 過濾器

作用：將整數形式的日期轉化爲常用日期形式

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

limitTo 過濾器

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

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

orderBy 過濾器

作用：對數據進行排序
參數：排序的屬性，如果是倒序排列，屬性名前加-，例如：-age
說明：一般與 ng-repeat 指令共同使用

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

在JavaScript中使用過濾器

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

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

service 服務

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

在一個分層良好的 ng 應用中，controller 這一層應該很薄。 應用中大部分的業務邏輯
和 持久化數據 都應該放在 service 中。

數據持久化：將數據存儲起來（存儲數據庫中）

創建服務

創建服務的語法，與創建控制器的語法相同
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 app.js：主模塊，應用程序的入口，實現統一調用所有其他模塊
2 controller.js：控制器模塊，處理視圖中與用戶交互的功能，即：處理業務邏輯
3 service.js：服務模塊，抽象數據操作，提供數據的增刪改查

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

ngRoute -路由

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

使用步驟

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>

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 = '小明';
}]);

otherwise() 方法

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

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

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

$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'});
}]);

hashPrefix

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

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

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

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

angular入門3

AngularJS - 入門3

TodoMVC案例

功能劃分

$location.url()

過濾器

格式化數據過濾器

filter過濾器 -過濾數據

currency 過濾器

date 過濾器

limitTo 過濾器

orderBy 過濾器

在JavaScript中使用過濾器

service 服務

創建服務

模塊之間的依賴關係

ngRoute -路由

使用步驟

when() 方法

otherwise() 方法

$routeParams -路由的服務

$route -路由的服務

hashPrefix

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

外行也能讀懂的網絡硬件設備功能原理速成

vue-cli3搭建項目之項目初始化配置

vue-cli3搭建項目之webpack配置

vue入門

angular入門2

angular入門1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結