Angular.js学习笔记（三）

一、过滤器

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 模板文件，则使用该参数：

高级路由：

控制器中传入参数routeParams用来代表路由中的值，传入参数route,用于在switch(status)--'var status=routeParams.status'函数中的default中来更新routeParams值为空 ，代码为：

## 如果连入第三方文件时不写协议的话： 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