Angular JS赶快学起来（下）

时间 2019-11-10

原文原文链接

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

按照指定的对象属性排序html

<table class="friend">
  <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
  </tr>
  <!-- 按age大小排序，-age从大往小排-->
  <tr ng-repeat="friend in friends | orderBy:'-age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
  </tr>
</table>
  var myModule=angular.module("myModule",[]);
  myModule.controller("myController", ['$scope',function ($scope) {
      $scope.friends =
              [{name:'John', phone:'555-1212', age:10},
                  {name:'Mary', phone:'555-9876', age:19},
                  {name:'Mike', phone:'555-4321', age:21},
                  {name:'Adam', phone:'555-5678', age:35},
                  {name:'Julie', phone:'555-8765', age:29}];
  }])

自定义过滤器

根据本身的需求定义须要的过滤器

服务

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'
})git

#### 参数传递和获取
- 在路由后面加：定义参数
- 在控制器中用routeParams获取参数

#### 路由监听
- $routeChangeStart：这个事件会在路由跳转前触发
- $routeChangeSuccess：这个事件在路由跳转成功后触发
- $routeChangeError：这个事件在路由跳转失败后触发

$scope.$on("$routeChangeStart",function(event,next,current){
//event.preventDefault(); //cancel url change
console.log("route change start!");
});
```github

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-routeexpress

ng-route

ng-route使用步骤

npm install angular-route -save
引入这个包
在本身的模块中添加 ngRoute模块依赖
路由配置（配置路由规则）
- 规则指的就是什么样的请求找什么控制器
- [{url:'/sdf',controller:'MainController'}]
编写对应的控制器和视图

主要方法

when()：配置路径和参数;
otherwise：配置其余的路径跳转，能够想成default。
controller：对应路径的控制器函数，或者名称
template：对应路径的页面模板，会出如今ng-view处,好比"
xxxx
"
templateUrl：对应模板的路径，好比"src/xxx.html"
redirectTo：重定向地址

ui-router

官网地址

https://github.com/angular-ui/ui-routernpm

ui-router使用步骤
安装或者下载ui-router的包
引入这个包
在本身的模块中添加 ui-view模块依赖
路由配置（配置路由规则）
- 规则指的就是什么样的请求找什么控制器
- [{url:'/sdf',controller:'MainController'}]
编写对应的控制器和视图json

ng-route和ui-router的区别

ng-route在一个页面中只能有一个坑
ui-router在页面中能够有多个坑
ui-router封装了ng-route