AngularJS 1.0 知识点整理

概述

• 概述
  • 2009年诞生，后被Google收购
  • 适用于以数据操作为主的SPA应用
  • 与jQuery的关系：基于jQ又高于jQ
    • 所有的操作不再是以元素为中心，而是以业务数据为中心

MVC模式

• Model：模型，即业务数据

  • 由保存在一定范围内的变量来担当
    • 声明模型数据的两种方法
      • 使用ngInit指令声明
      • 使用Controller声明

• View：视图，负责呈现业务数据

  • 由 HTML+指令 来担当

• Controller：控制器，负责操作业务数据

  • 由模块中特定的函数担当 module.controller('', fn)

双向数据绑定

• 方向1：Model=>View

  • 大部分的指令都实现了方向1的绑定

• 方向2：View=>Model

  • ngModel指令实现了方向2的绑定

依赖注入

• 如何压缩CSS/JS文件

  • yui-compressor

• 一个对象的由框架来创建，其所依赖的对象也由框架来创建

  • 根据形参名来创建

• 体现的设计原则：迪米特法则

模块化设计

• 体现的设计原则：高内聚低耦合

• 模块中可以声明的组件

  • controller
    • 操作模型数据
  • filter
    • 对数据输出进行格式化
  • directive
    • 增强HTML功能
  • service
    • 在控制器之间提供公用的服务
  • provider
  • function
  • object
  • type
  • ...

• 模块有两种

  • 官方提供的模块
    • ng
      • directive
        • ngApp
        • ngInit
        • ngController
        • ngModel
        • ngBind
        • ngRepeat
        • ngIf
        • ngShow/ngHide
        • ngDisabled
        • ngChecked
        • ngSrc
        • ngClick
        • ngStyle
        • ngClass
        • ...
      • filter
        • lowercase
        • uppercase
        • number
        • currency
        • date
        • ...
      • service
        • $rootScope
          • 在全局范围内共享模型数据
        • $http
          • 发起异步XHR请求
        • $interval
          • 周期性定时器
        • $timeout
          • 一次性定时器
        • $location
          • 读取/修改当前的URL
        • $log
          • 日志输出服务
        • ...
      • function
        • angular.module( )
        • angular.forEach( )
        • ...
    • ngRoute
      • directive
        • ngView
      • provider
        • $routeProvider
          • 声明路由字典
    • ngAnimate
    • ngTouch
    • ...
  • 用户自定义的模块
    • angular.module('模块名', [依赖列表])