现在的位置: 首页 > 综合 > 正文

AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)

2016年07月28日 ⁄ 综合 ⁄ 共 3522字 ⁄ 字号 评论关闭

AngularJS权威教程

跳转至:
导航

搜索

目录

初识AngularJS

数据绑定和第一个应用

  1. 实时模板:<html ng-app> ... <input ng-model="name" .../> --> <h1>Hello, {{ name }}</h1>

    1. 脏检查?$digest()循环
  2. ng-controller="MyController"(控制器管辖视图)

模块

  1. angular.module('myApp', ['deps']);

作用域

  1. ng-app关联到$rootScope,而ng-controller创建一个新的$scope
  2. $injector

控制器

  1. app.controller("MyController", function($scope){ $scope.xxx=...; });

表达式

  1. app.controller("MyController", function($scope, $parse){

    1. $scope.$watch('expr', function(newVal, oldVal, scope){

      1. var parseFunc = $parse(newVal);
      2. $scope.parsedValue = parseFunc(scope); //靠
  2. app.controller("MyController", function($scope, $interpolate){
    1. //这里的第2个参数到底是怎么回事?注入服务?它不应该与前面的$parse一样属于同一个形参吗?
  3. 自定义不同于{{}}的符号(略)

过滤器

  1. {{ name | uppercase }}
  2. 在失去焦点时验证:app.directive('ngFocus', ... --> <input ... ng-focus/>
  3. 1.3+ ngMessages(去除复杂的ng-show指令?)

指令简介

  1. 指令就是自定义html元素/属性/类/注释?

    1. app.directive(myDirective', function(){ return { restrict: 'EACM', replace: true, template: '...'}; });
    2. 创建新的作用域?
      1. scope: { someProperty: '@someAttr' }

内置指令

  1. 基础ng属性指令:

    1. ng-href
    2. ng-src
    3. ng-disabled
    4. ng-checked
    5. ng-readonly
    6. ng-selected
    7. ng-class
    8. ng-style
  2. 指令中使用子作用域:ng-app和ng-controller
    1. ng-include
    2. ng-switch
    3. ng-repeat
    4. ng-view
    5. ng-if
    6. ng-init
    7. ng-bind
    8. ng-cloak
    9. ng-bind-template
    10. ng-model
    11. ng-show/hide
    12. ng-change
    13. ng-form(在一个表单里嵌套另一个?)
    14. ng-click
    15. ng-select
    16. ng-submit
    17. ng-attr-(suffix)

指令详解

  1. 定义
  2. 作用域
    1. 隔离作用域?
  3. 绑定策略
    1. 本地作用域属性:@attr =attr &attr
    2. translude?
  4. 生命周期*
    1. compile(对模板DOM进行转换)
    2. link(将作用域与DOM链接)
      1. 自定义验证(发送Ajax请求)
  5. ngModel
  6. 自定义验证

模块加载

  1. app.config/run( ...

多重视图和路由

  1. 路由模式

    1. 标签:/#!/...
    2. HTML5:通过$location服务使用History API
  2. 路由事件
    1. $routeChangeStart
    2. $routeChangeSuccess
    3. $routeChangeError
    4. $routeUpdate
  3. 更多
    1. $window.location.href = "/reload/page";

依赖注入

  1. p109 通过annotate,在实例化时将传入函数的参数列表提取出来(怎么做到的?)

    1. > injector.annotate( function($q, greeter){} )
    2. ["$q", "greeter"]
  2. injector.invoke( function($http, greeter){} ) //参数顺序就没有意义了(靠!)
  3. 显示注入声明
    1. aControllerFactory.$inject = ['$scope', 'greeter'];
  4. 行内注入声明
    1. app.controller('MyController', ['$scope', 'greeter', function($scope, greeter){...}];
  5. ngMin:预压缩并设置依赖注入?

服务

  1. app.factory('githubService', function($http){ ... });

    1. $http返回的是promise对象...
  2. app.controller('ServiceController', function($scope, githubService){...}); //靠,ng的依赖注入真的很精妙~
  3. 5种方法创建服务:factory service constant value provider

XHR和服务器通信

  1. $http
  2. 拦截器
    1. ... $httpProvider.interceptors.push('MyInterceptor');
  3. $resource:访问REST
  4. Restangular库

XHR实践

  1. JSONP
  2. CORS
    1. 服务器端支持:Access-Control-Allow-Origin

promise

  1. var deferred = $q.defer();

    1. resolve
    2. reject
    3. notify
  2. then(successFun, errorFun, notifyFun)
    1. .catch(function(reason){...})

服务器通信

测试

  1. p270 Karma与持续集成服务(JenkinsCI, TravisCI)协作得很好
  2. Protractor

事件

架构

AngularJS动画

  1. $animate服务:ng-[EVENT]-active CSS类

    1. ngRepeat
    2. ngView
    3. ngInclude
    4. ngSwitch
    5. ngIf
    6. ngClass
    7. ngShow/Hide
  2. CSS3过渡与@keyframes动画
  3. 第3方库:Animate.css, TweenMax/Lite

digest循环和$apply

  1. $digest循环

    1. $watch列表

      1. 脏值检查:只要有任何值发生变化,应用将退回到$watch循环中,直到检测不到更新
      2. $watchCollection
    2. $evalAsync列表($$asyncQueue)
  2. $apply

揭秘AngularJS

AngularJS精华扩展

移动应用

  1. ngTouch

    1. 移动设备首先会检测到一个tap,然后等待300ms去检测其他事件(doubletap),之后才会触发click
    2. ng-click:快速点击?
    3. ngSwipeLeft/Right
    4. $swipe服务
  2. angular-gestures和多点触控(基于Hammer.js)
  3. Cordova中的原生应用(有点像Rails)
    1. 使用Yeoman构建

本地化

  1. angular-translate(略)

    1. 运行时切换语言*
  2. angular-gettext:.pot => .js?

缓存

  1. $cacheFactory

安全性?

  1. 严格的上下文转义:$sce服务

AngularJS和IE浏览器

  1. IE不希望元素名以ng开头,除非声明了名字空间:<html xmlns:ng="http://angularjs.org">
  2. IE是唯一缓存XHR请求的?
  3. p393 Web爬虫通常不会抓取JS应用(需要包含JS解释器)?
  4. Google会把hashbang(#!)转换为?+escaped_fragment_=... ?
  5. 获取快照(?)
    1. PhantomJS
    2. Zombie.js
  6. Prerender.io Node服务器

构建AngularJS Chrome应用

优化AngularJS应用

  1. bindonce

调试AngularJS

  1. Chrome扩展Batarang

下一步

  1. jqLite和jQuery
  2. Grunt
  3. grunt-angular-templates
  4. Lineman
  5. Bower
  6. Yeoman
  7. 配置Angular生成器

总结 

抱歉!评论已关闭.