本文共 3644 字，大约阅读时间需要 12 分钟。

目录

---

过滤器

data 过滤器

• 用于时间日期格式化

{
  {'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}

lowercase, uppercase

• 英文字符大小写转换

number

• 数字格式化，例如将10000 → 10,000.00

limitTo 过滤器

• 限制数量，限制字符串或者遍历长度

   
    
    
        {
  {item.content | limitTo:2 }}    
   

orderBy

• 按照特定字段排序，默认是正序，倒序则加上-号

filter 过滤器

• 检索特定内容，默认模糊匹配
• 如果传入对象则匹配特定属性，如传入{name:'张三'}，则匹配那么属性中包含张三

• filter过滤器会根据设置的检索数据过滤未匹配到的数据内容

• 也可以通过设置检索条件为一个对象，实现在指定属性中检索

   
    
    
        {
  {item.content}}    
   

  
       
     
   
    
        
    
{
  {p1 | json:8}}
    
    
{
  {text}}
  
   
  
     
{
  {1112123.141592635 | number:10}}
      

 

  
       
   
    
        
    
      
     
        {
  {todo.id}}        {
  {todo.text}}        {
  {todo.completed}}      
    
    
  
   
    

自定义比较

• 通过自定义一个比较函数，在前台为filter指定第二个参数实现：

   
    
    
        {
  { item }}    
   
// js代码$scope.comparator = function (source,target) {    return source > target;};

• 默认filter过滤器使用的是模糊匹配
• 需要自定义比较函数
• filter的第三个参数

  
       
   
    
    
{
  { true | checkmark }}
    
    
{
  { false | checkmark : 2 }}
  
   
  
   
  
   
    
        
    
你的体重：{
  {weight}} kg
    
    
你{
  {weight|weight}}
  
   
    

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方法创建一个公用的servicevar 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}

  
       
   
    
    
A
    
    
B
    
    
C
  
   
  
   
        

如果连入第三方文件时不写协议的话：

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