Angular.js权威教程阅读笔记(第6~12章)

By | 2015年3月11日

Angular.js权威教程阅读笔记(第6~12章)

6.表达式

  • 解析AngularJs表达式
    • 在$digest循环中自动解析表达式
    • 手动时,使用$parse

  •  
  • 插值字符串
    • 更新文本字符串
    • 使用$interpolate服务
    • 例子
    • 修改{{ }}语法标记
      • startSymbol()
      • endSymbol()

  • [例子](http://jsbin.com/ivuJEXI/1/edit)

7.过滤器

  • {{ | filter }} 内部通过 | 符号来调用过滤器

对字符串转换成大写:

{{name | uppercase }}

 

使用方式2:

$scope.name = $filter(‘lowercase’)(‘Ari’);

  • 内置过滤器
    • currency
    • date
    • litmeTo 正数:从左往右, 复数: 从右往左
    • orderBy 排序
    • loercase
    • number
    • uppercase
  • 自定义过滤器
  • 示例:

  •  
  • 表单验证
    • 表单要有name属性
    • input验证选项
      • 必填项 required
      • 最小长度 ng-minlength=”5″
      • 最大长度 ng-maxlength=”10″
      • 正则 ng-pattern=”[a-zA-Z]“
      • 邮箱 type=”email”
      • URL type=”url”
      • 自定义验证 使用指令
      • 表单控制
    •     未修改的表单      formName.inputName.$pristine
    •     修改过的            formName.inputName.$dirty
    •     合法的           formName.inputName.$valid
    •     错误              formName.inputName.$error
  • $parsers
    • 交互时,controller中的$setViewValue()方法被调用时,$parsers数组中的函数回顺序被调用,并且执行结果回传递到下一个函数.
  • $formatters

  •  

8.指令简介

  • 指令:自定义HTML元素和属性
  • 定义指令:

 

  • 指令类型
    • E 元素
    • A 属性
    • C 类
    • M 注释
  • 表达式
    <my-directive=”something”></my-directive>
  • <div my-directive=”something”></div>
  • <div></div>
  • 作用域,示例
  • 参数 示例

     

9.内置指令

  • 布尔属性
    • ng-disabled
    • ng-readonly
    • ng-checked
    • ng-selected
  • 类布尔属性
    • ng-href
    • ng-src
  • 在指令中使用子作用域
    ng-app和ng-controller是特殊指令,回修改嵌套在他们内部的指令的作用域 

    • ng-app
      $rootScope是作用域的起始点,任何嵌套在ng-app内的指令都会继承它
      js中通过run()来访问$rootScope 示例
      angular.module(‘myApp’,[]).run(function($rootScope){
    •         $rootScope.someProperty = ‘Hello world’;
    •     });
    • ng-controller
      是为嵌套在其中的指令创建一个子作用域
      $scope的职责是承载DOM中的指令所共享的操作和模型 

      • 操作指$scope上标准的js方法
      • 模型指的是$scope上的瞬时数据对象
      • 由于原型继承的关系,修改父级对象中的同名属性会同时修改子对象中的同名属性的值,但反之则不行 示例 JavaScript对象要么是值复制要么是引用复制,字符串、数字和布尔型变量是’值复制’。 数组、对象和函数则是’引用复制’.
    • 含有该作用域特性的指令有:
      • ng-include
      • ng-switch
      • ng-repeat
      • ng-view
      • ng-if
      • ng-controller
    • ng-include
      加载、编译并包含外部HTML片段到当前应用中. 

      • 模板的URL被限制在与应用文档相同的域和协议下
      • 同元素上指定了ng-controller,则不再创建新的子作用域
    • ng-swith
      和ng-switch-when, on=”propertyName”一起使用 示例
      <input type=”text” ng-model=”person.name”/>
    • <div ng-switch on=”person.name”>
    •     <p ng-switch-default>And the winner is </p>
    •     <h1 ng-switch-when=”Ari”>{{person.name}}</h1>
    • </div>
    • ng-view
    • ng-if
      生成或者移除一个DOM元素
      区别于ng-show,ng-hide,不是同过css来控制元素隐藏,而是真正的生成或者移除节点
    • ng-repead
      • $index
      • $first
      • $middle
      • $last
      • $even
      • $odd
    • ng-init
      在指令被调用时设置内部作用域的出事状态
    • ng-bind
      功能类似 {{ }} 

      • 可以决绝未渲染元素闪烁问题
    • <p ng-bind=”person.name”></p>
    • ng-cloak
      解决未渲染元素闪烁问题
      <p ng-cloak>{{person.name}}</p>
    • ng-bind-template
      用来绑定多个表达式
      <div ng-bind-template=”{{name}} – {{message}}”></div>
    • ng-model
    • ng-show/ng-hide
    • ng-change
    • ng-form
      允许表单嵌套 

      • ng-submit
      • ng-click
    • ng-select
    • ng-class

10.指令详解

  • 在特定DOM元素上原型的函数,指令可以扩展这个元素的功能.
  • 创建指令
    • 使用directive()
      2个参数 

      • name 指令名称
      • factory_function 函数
        • 返回一个对象,内部定义指令的全部行为
    • 指令返回值定义

  •  
    • 参数说明
      • restrict 生命类型
        • E-元素,A-属性,C-类名,M-注释
      • priority 优先级
        • 默认是0
      • terminal 停止运行比本指令优先级低的指令
      • template 模板
        • 必须有个根节点
      • templateUrl 模板URL
      • replace 是否保留原来元素
      • scope 作用域
        • $rootScope 在ng-app时被创建
        • 默认是false
        • 嵌套子指令能访问父级DOM元素对应的作用域的能力
        • 绑定策略
          • @ 本地作用域同DOM属性的值进行绑定
          • = 双向绑定
          • & 父级作用域
        • HTML:
        • <input type=”text” ng-model=”mail”/>
        • <div scope-example ng-model=”mail” on-send=”sendMail(email)” from-name=”xxx@xxx.com” />
        • JS:
        • scope:{
        •     ngModel: ‘=’,
        •     onSend: ‘&’,
        •     fromName: ‘@’
        • }
      • transclude 嵌入函数
        • 默认false
      • controller 内联控制器
        • link 函数可以将指令互相隔离开来,controller则定义可服用的行为
      • require
        • 会改变查找控制器时的行为
        • ? 未找到控制器,会将null作为参数传给link函数的第四个参数
        • ^ 在上游的指令链查找控制器
          • ?^
        • 没有前缀,自身查找,没有则抛出异常
      • compile
        • compile和link选项是互斥的
  • NG的生命周期
    • 编译
  • 遍历整个HTML,处理指令. 调用HTML文档根部的指令时,遍历其中所有的模板。
    • 链接
  • ngModel
    angular.module(‘myApp’,[]).directive(‘myDirective’, function(){
  •     return {
  •         require: ‘?ngModel’,
  •         link: function(){
  •             if(!ngModel) return ;
  •             // 可以获取ngModelController 的实例
  •         }
  •     };
  • });
  • 如果不设置require, ngModelController就不会被注入到指令中
    • $setViewValue() 修改视图值
  • 自定义渲染
    • $render()

11.AngularJS模块加载

NG模块可以在加载和执行之前对其自身进行配置。

  • 配置 .config() 函数
    • 唯一能在启动前进行修改的部分
  • angular.module(‘myApp’,[]).config(function(){
  •     // your code
  • });
    • 内部代码会被顺序执行,就是说无法注入一个尚未注册的提供者
    • constant是个例外,总会在所有配置块之前执行
  • 运行 .run()函数
    • 区别于配置块,运行块在注入器创建之后被执行, 是NG应用中第一个被执行的方法
    • 很难进行单元测试,和应用本身高度耦合
    • 通常用来注册全局的事件监听器

12.多重视图和路由

$bower install–save angular -route

ngRoute 模块

  • 布局模板
    • ng-view
      优先级为1000的终极指令
      运行规则 

      • 每次触发$routeChangeSuccess事件,视图都会更新
      • 若模板同当前路由相关联
        • 创建新的作用域
        • 移除上一个视图,上一个作用域也会被清除
        • 将新的作用域同当前模板关联在一起
        • 若路由中有相关的定义,就把对应的控制器同当前作用域关联起来
        • 触发$viewContentLoaded事件
        • 调用onload函数
  • 路由
    NG提供了when 和otherwise 方法来定义路由
    angular.module(‘myApp’,[]).config(['$routeProvider'], function($routeProvider){
  •     $routeProvider.when(‘/’, {
  •         templateUrl: ‘views/home.html’,
  •         controller: ‘HomeController’
  •     });
  • });
    • 路径会跟$location.path进行匹配,也就是当前URL的路径.
    • 参数需要以冒号开头 (:name),使用$routeParams读取参数

  •  
    • reloadOnSearch
      • 默认为true,当$location.search()发生变化回重新记在路由,设为false则不会,适用于路由嵌套,原地分页
    • $routeParams
      解析出路由中的参数
      $routeProvider.when(‘/inbox/:name’, {
    •     controller: ‘InboxController’,
    •     templateUrl: ‘views/inbox.html’
    • });
    • 注意,控制器中需要引入$routeParams
  • $location服务
    用以解析地址栏中的URL,也提供了修改路径喝处理各种形式导航的能力 

    • 对window.location对象尽兴更优雅的封装
    • 没有刷新整个页面的能力, 使用$window.location对象
  • 属性&方法
    • $location.path() 获取或者设置跳转到URL
    • replace() 跳转后不能点击后退按钮
  • $location.path(‘/home’).replace();
    • hash() 获取URL中的hash片段
    • host()
    • port()
    • protocol()
    • search() 获取查询字符串
    • url()
  • 路由模式
    • 标签模式(默认)
  • 手动指定
  • angular.module(‘myApp’, ['ngRoute'])
  • .config([‘$locationProvider’, function($locationProvider){
  •     $locationProvider.html5Mode(false);
  •     $locationProvider.hashPrefix(‘!’);
  • }]);
    • HTML5模式
      • RESTful格式URL
      • 会根据浏览器能力,重写链接
      • 永远不要使用相对路径,除非在根目录中启动的。
    • 路由事件
      使用$rootScope来监听 

      • $routeChangeStart
    • angular.module(‘myApp’,[])
    • .run([‘$rootScope’, ‘$location’, function($rootScope,$location){
    •     $rootScope.$on(‘$routeChangeStart’, function(evt,next,current){
    •         // next 下一个url
    •         //current 当前URL
    •     });
    • }]);
      • $routeChangeSuccess
      • $routeChangeError
      • $routeUpdate
    • SEO
      meta加入:
      <meta name=”fragment” content=”!” />

发表评论