Web前端學習筆記——AngularJS之過濾器、服務、路由
阿新 • • 發佈：2018-12-09
目錄
過濾器
data 過濾器
- 用於時間日期格式化
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span>
lowercase, uppercase
- 英文字元大小寫轉換
number
- 數字格式化，例如將10000 → 10,000.00
limitTo 過濾器
- 限制數量，限制字串或者遍歷長度
<ul class="messages"> <li ng-repeat="item in messages | limitTo:-2"> {{item.content | limitTo:2 }} </li> </ul>
orderBy
- 按照特定欄位排序，預設是正序，倒序則加上-號
filter 過濾器
- 檢索特定內容，預設模糊匹配
- 如果傳入物件則匹配特定屬性，如傳入{name:'張三'}，則匹配那麼屬性中包含張三
-
filter過濾器會根據設定的檢索資料過濾未匹配到的資料內容
-
也可以通過設定檢索條件為一個物件，實現在指定屬性中檢索
<ul class="messages"> <li ng-repeat="item in messages | filter:{content:123}"> {{item.content}} </li> </ul>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>過濾器</title> </head> <body ng-app="app"> <!-- <h1>{{100000 | currency}}</h1> <h1>{{1288323623006 | date:'fullDate'}}</h1> --> <div ng-controller="DemoController"> <input type="text" ng-model="p1.name"> <pre>{{p1 | json:8}}</pre> <p>{{text}}</p> </div> <!-- <div> <p>{{'itcast.cn,itcast.com,itheima.com' | limitTo:10:10}}</p> </div> --> <h1>{{1112123.141592635 | number:10}}</h1> <script src="node_modules/angular/angular.js"></script> <script src="angular-locale_zh-cn.js"></script> <script> angular.module('app', []) .controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.p1 = { name: '張三', age: 19, gender: false, zhengfang: { name: '張三', age: 19, gender: false }, ceshi: [{ name: '張三', age: 19, gender: false }, { name: '張三', age: 19, gender: false }, { name: '張三', age: 19, gender: false }] }; // 如果在控制器中需要用到一個不存在的物件，都嘗試使用注入的方式 $scope.text = $filter('limitTo')('hahahahahahah', '10', 5); }]); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表篩選</title>
</head>
<body ng-app="app">
<div ng-controller="ListController">
<input type="text" ng-model="search">
<ul>
<li ng-repeat="todo in todos | filter:{completed:true}">
<span>{{todo.id}}</span>
<strong>{{todo.text}}</strong>
<span>{{todo.completed}}</span>
</li>
</ul>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module('app', [])
.controller('ListController', ['$scope', function($scope) {
$scope.search = '';
$scope.todos = [{
id: 0.123,
text: '學習',
completed: true
}, {
id: 0.22,
text: '睡覺',
completed: false
}, {
id: 0.232,
text: '打豆豆',
completed: true
}, {
id: 0.2321,
text: '打豆豆1',
completed: true
}, {
id: 0.2322,
text: '打豆豆2',
completed: false
}, {
id: 0.2323,
text: '打豆豆3',
completed: true
}, {
id: 0.2323,
text: '回答一下到底是true/false',
completed: false
}];
}]);
</script>
</body>
</html>
自定義比較
- 通過自定義一個比較函式，在前臺為filter指定第二個引數實現：
<ul class="numbers">
<li ng-repeat="item in numbers | filter:1:comparator">
{{ item }}
</li>
</ul>
// js程式碼
$scope.comparator = function (source,target) {
return source > target;
};
- 預設filter過濾器使用的是模糊匹配
- 需要自定義比較函式
- filter的第三個引數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義filter</title>
</head>
<body ng-app="app">
<div>
<h1>{{ true | checkmark }}</h1>
<h1>{{ false | checkmark : 2 }}</h1>
</div>
<hr>
<div>
<input type="text" placeholder="請輸入你的體重" ng-model="weight">
<p>你的體重：{{weight}} kg</p>
<p>你{{weight|weight}}</p>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module('app', [])
.filter('checkmark', function() {
return function(input, style) {
style = style || 1; // 短路運算子
switch (style) {
case 1:
return input ? '\u2713' : '\u2718';
case 2:
return input ? '\u2714' : '\u2719';
}
};
})
.filter('weight', function() {
return function(input) {
if (input > 100) {
return '太胖了';
} else {
return '太瘦了';
}
};
});
</script>
</body>
</html>
json 過濾器
- 可以將一個物件以json形式解析
- 利用它我們可以在介面上直觀的檢視一些物件的成員，這也是除錯的好辦法
自定義過濾器
angular.module('MyAppFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
Form 表單
- form表單元素在AngularJS中也是一個指令
- 具備表單解析、格式化、校驗等功能
- 依賴於H5的智慧表單
- 演示程式碼見備註
Form 表單 – 驗證
- AngularJS允許在表單中使用H5的一些校驗屬性
- 同時會根據校驗條件的規則作出相應的資料變化
- 注意：在使用驗證時先取消瀏覽器本身自帶的驗證（給表單新增novalidate屬性）
Form 表單 – 驗證規則
- 必填項 required or ng-required
- 最小長度 minlength or ng-minlength
- 最大長度 maxlength
- 型別 type（number、email）
- 等等
服務
- 公用（公共）的業務邏輯集中存放的一段程式碼
- 主要用於對重複業務的封裝，重用
- 一般主要封裝針對於Model的CRUD
建立服務
- 通過模組的service方法建立一個服務：
var myApp = angular.module('MyApp', []);
// 通過factory方法建立一個公用的service
var userService = myApp.service('UserService', function() {
var users = { 1: 'zhangsan1', 2: 'zhangsan2' };
return {
getUser: function(id) {
return users[id];
},
addUser: function(id, name) {
users[id] = name;
},
};
});
內建服務 - $http
- $http服務是AngularJS中處理AJAX的服務
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$log服務
- 列印控制檯日誌
- 啟用或者關閉
$timeout
自定義服務
路由
NG 中路由是單獨提供的功能模組 ngRoute, 也是一個單獨髮型的檔案
- 安裝或者下載angular-route的包
- 引入這個包
- 在自己的模組中新增 ngRoute 依賴
- 路由配置（配置路由規則）
- 規則指的就是 什麼樣的請求 找什麼控制器
- [{url:'/sdf',controller:'MainController'}]
- 編寫對應的控制器和檢視
/students/zhangsan
/:role/:name
{role:students,name:zhangsan}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由模組使用</title>
</head>
<body ng-app="app">
<ul>
<li><a href="#/a">A</a></li>
<li><a href="#/b">B</a></li>
<li><a href="#/c">C</a></li>
</ul>
<div ng-view></div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script id="a_tmpl" type="text/ng-template">
<!-- 只有type="text/javascript"的script節點才會被當做JS執行 -->
<!-- script中的內容就算不能執行，也不可以顯示在介面上 -->
<h1>{{title}}</h1>
</script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
// 某一類特定地址
.when('/students/:name?', {
controller: 'StudentsController',
templateUrl: 'a_tmpl'
})
.when('/a', {
controller: 'AController',
templateUrl: 'a_tmpl'
})
.when('/b', {
controller: 'BController',
templateUrl: 'a_tmpl'
})
.when('/c', {
controller: 'CController',
templateUrl: 'a_tmpl'
})
// 別的請求
.otherwise({
// 跳轉到一個地址
redirectTo: '/a'
});
}]);
app.controller('StudentsController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.title = '你好' + $routeParams['name'] + '這是A控制器';
}]);
app.controller('AController', ['$scope', function($scope) {
$scope.title = '這是A控制器';
}]);
app.controller('BController', ['$scope', function($scope) {
$scope.title = '這是B控制器';
}]);
app.controller('CController', ['$scope', function($scope) {
$scope.title = '這是C控制器';
}]);
</script>
</body>
</html>
如果連入第三方檔案時不寫協議的話：
http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js ↓ 如果當前你的網站是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
Features - MVC
- 將應用程式的組成根據職責劃分成三個模組：
- Model（資料模型，業務邏輯）
- View（介面展示，展示結構）
- Controller（控制器，控制邏輯）
- 優勢：每個模組分工明確，職責清晰，複用
- 目的：模組化和複用！！
AngularJS 中的MVC
Features - Module
- 將同一個頁面根據功能或業務的不一樣劃分成不同的模組，模組間相互獨立
- 便於協同分工和維護
- 通過ng-app指令指定不同的模組
Features - Directive
- 指令可以說是一個命令
- 每個指令都是告訴AngularJS需要幹什麼
- 除了預定義的指令之外，AngularJS還可以自定義指令去封裝一些重複的操作
Features – Data Binding
- AngularJS實現了雙向資料繫結
- 單向資料繫結指的是從Model到View的單向資料同步
- 雙向資料繫結在單向基礎上增加了從View往Model的資料同步
- 在應用互動時（表單），雙向繫結尤其方便
Controller as 語法
myApp.controller('AsController', function(UserService) {
// 這裡this拿到的就是控制器物件本身
// 可以通過給this物件擴充套件實現資料往View的傳遞
this.add = function() {
UserService.addUser(5, 'mazi');
};
});
<div ng-controller="TwoController as dataContext">
<input type="button" value="add" ng-dblclick="dataContext.add()">
</div>