Angular.js学习笔记

Posted 2020-09-09 H.U.C-王子

一、过滤器

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