Angular JS赶快学起来（下）
Angular JS赶快学起来（下）
过滤器
- 过滤器的主要用途就是一个格式化/筛选数据的小工具
- 一般用于服务端存储的数据转换为用户界面可以理解的数据
内置过滤器
- 语法
- 不同的过滤器语法不同
// 1: 需要过滤的数据，2: 过滤器的类型，3: 之后都是参数
{{ currency_expression | currency : symbol : fractionSize}}
- 也可以引入语言包，然后直接给过滤器类型即可
- 过滤器既可以在html中使用也可以在js中使用
常用的内置过滤器
currency
- 定义本位币类型
<!-- 获取人民币-->
{{"8900000"|currency:"￥"}}
<br/>
<!-- 获取美元-->
{{"8900000"|currency}}
date
- 定义日期结构
<!-- 获取年月日-->
{{"8904500"|date}}
<br/>
<!-- 1970-01-01形式-->
{{"8904500"|date:"yyyy-MM-dd"}}
<br/>
<!-- 1970-01-01 10-28-24 10点28分24秒-->
{{"8904500"|date:"yyyy-MM-dd HH-mm-ss"}}
json
- 输出有格式的对象，配合pre标签用于调试
<!--输出 { "name": "张三", "age": 19 }-->
{{data|json}}
<br/>
<!-- {
"name": "张三",
"age": 19
}-->
<input type="text" ng-model="data.name"/>
<pre>{{data|json}}</pre>
lowercase
- 把大写字母变为小写字母
{{'DDDDFFGRE'|lowercase}}
uppercase
- 把小写字母变为大写字母
number
- 定义小数点
<!-- 345678.000-->
{{'345678'+'.000'}}
limitTo
- 截取字符串操作
{{'3456784566'|limitTo:3:4}}
filter
- 模糊匹配对象中所有属性的值，和展示没有关系
- 如果传入一个对象的话，会根据特定的属性检索
<li ng-repeat="item in data| filter:search">{{item}}</li>
var myModule=angular.module("myModule",[]);
myModule.controller("myController", ['$scope',function ($scope) {
$scope.data=[
{name:"张三",address:"外滩"},
{name:"李四",address:"迪士尼"},
{name:"王五",address:"城隍庙"},
{name:"张六",address:"人民广场"}
]
}])
orderBy
- 按照指定的对象属性排序
| Name | Phone Number | Age |
|---|---|---|
| {{friend.name}} | {{friend.phone}} | {{friend.age}} |
自定义过滤器
- 根据自己的需求定义需要的过滤器
服务
- AngularJS支持使用服务的体系结构,符合“关注点分离”的概念。
- 所有与展示逻辑（或者说交互逻辑）无关的部分都应该写成 Provider（广义的）。
内置服务
$http
- $http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
标准用法
$http({
url:'data.json',
method:'GET',
}).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});
快捷用法
// get请求方式
$http.get(url).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});
// post请求方式
$http.post(url,obj).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});
响应对象
- data：这个数据代表转换过后的响应体
- status：响应的HTTP状态码
- headers：这个函数是头信息的getter函数
- config：这个对象是用来生成原始请求的完整设置对象。
$on $emit $bordercast
- 在控制器作用域之间传递event和data
- $emit：子传父 传递event与data
- $broadcast：父传子 child controller传递event与data
- $on：监听或接收数据，用于接收event与data
- 注意：$broadcast、$emit事件必须依靠其他事件（ng-click等）进行触发，而不能单纯写一个这个。$on倒是可以直接写，因为它属于监听和接收数据的。
// 广播事件
$scope.clkme=function(){
$scope.$broadcast('sendChild','我给子控制器传递数据');
$scope.$emit('sendParent','冒泡到父元素')
}
// 接收事件
$scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
console.log('OneSelfController传过来的',data,event.name,event);//事件名称：sendParent
});
$sce
- 即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。
<p ng-bind-html="currentWork.description | to_trusted"></p>
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
自定义服务
factory(工厂)
- app.factory('name',function(){return obj})；name为服务的名字,第二个参数传入一个函数,函数需要有一个返回值obj,返回一个对象.实际被注入的服务就是这个对象.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var myname = 'code_bunny';
var age = 12;
var id = 1;
return {
name: myname,
age: age,
getId: function(){
return id
}
}
});
service（服务）
- app.service('name',constructor)；name为服务的名字,constructor是一个构造函数.
mainApp.service('CalcService', function(MathService){
var myname = 'code_bunny';
var age = 12;
var id = 1;
this.name = myname;
this.age = age;
this.getId = function(){
return id
}
});
## 路由
控制页面跳转的第三方插件
### ng-route
#### ng-route使用步骤
- npm install angular-route -save
- 引入这个包
- 在自己的模块中添加 ngRoute模块依赖
- 路由配置（配置路由规则）
+ 规则指的就是 什么样的请求 找什么控制器
+ [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
#### 主要方法
- when()：配置路径和参数;
- otherwise：配置其他的路径跳转，可以想成default。
- controller：对应路径的控制器函数，或者名称
- template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"
- templateUrl：对应模板的路径，比如"src/xxx.html"
- redirectTo：重定向地址
#### 模板页面
.when('/home', {
templateUrl:'page1'
})
#### 参数传递和获取
- 在路由后面加：定义参数
- 在控制器中用routeParams获取参数
#### 路由监听
- $routeChangeStart：这个事件会在路由跳转前触发
- $routeChangeSuccess：这个事件在路由跳转成功后触发
- $routeChangeError：这个事件在路由跳转失败后触发
$scope.$on("$routeChangeStart",function(event,next,current){
//event.preventDefault(); //cancel url change
console.log("route change start!");
});
### ui-router(简单介绍)
#### 官网地址
- https://github.com/angular-ui/ui-router
#### ui-router使用步骤
- 安装或者下载ui-router的包
- 引入这个包
- 在自己的模块中添加 ui-view模块依赖
- 路由配置（配置路由规则）
+ 规则指的就是 什么样的请求 找什么控制器
+ [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
### ng-route和ui-router的区别
- ng-route在一个页面中只能有一个坑
- ui-router在页面中可以有多个坑
- ui-router封装了ng-route
### ng-route
#### ng-route使用步骤
- npm install angular-route -save
- 引入这个包
- 在自己的模块中添加 ngRoute模块依赖
- 路由配置（配置路由规则）
+ 规则指的就是 什么样的请求 找什么控制器
+ [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
#### 主要方法
- when()：配置路径和参数;
- otherwise：配置其他的路径跳转，可以想成default。
- controller：对应路径的控制器函数，或者名称
- template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"
- templateUrl：对应模板的路径，比如"src/xxx.html"
- redirectTo：重定向地址
### ui-router
#### 官网地址
- https://github.com/angular-ui/ui-router
#### ui-router使用步骤
- 安装或者下载ui-router的包
- 引入这个包
- 在自己的模块中添加 ui-view模块依赖
- 路由配置（配置路由规则）
+ 规则指的就是 什么样的请求 找什么控制器
+ [{url:'/sdf',controller:'MainController'}]
- 编写对应的控制器和视图
### ng-route和ui-router的区别
- ng-route在一个页面中只能有一个坑
- ui-router在页面中可以有多个坑
- ui-router封装了ng-route
浙公网安备 33010602011771号