国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > 互联网 > AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)

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

来源:程序员人生   发布时间:2014-11-03 09:22:34 阅读次数:6146次

AngularJS权威教程

跳转至: 导航、 搜索

目录

  • 1 初识AngularJS
  • 2 数据绑定和第1个利用
  • 3 模块
  • 4 作用域
  • 5 控制器
  • 6 表达式
  • 7 过滤器
  • 8 指令简介
  • 9 内置指令
  • 10 指令详解
  • 11 模块加载
  • 12 多重视图和路由
  • 13 依赖注入
  • 14 服务
  • 15 XHR和http://www.wfuyu.com/server/通讯
  • 16 XHR实践
  • 17 promise
  • 18 http://www.wfuyu.com/server/通讯
  • 19 测试
  • 20 事件
  • 21 架构
  • 22 AngularJS动画
  • 23 digest循环和$apply
  • 24 揭秘AngularJS
  • 25 AngularJS精华扩大
  • 26 移动利用
  • 27 本地化
  • 28 缓存
  • 29 安全性?
  • 30 AngularJS和IE阅读器
  • 31 构建AngularJS Chrome利用
  • 32 优化AngularJS利用
  • 33 调试AngularJS
  • 34 下1步
  • 35 总结

初识AngularJS

数据绑定和第1个利用

  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创建1个新的$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个参数究竟是怎样回事?注入服务?它不应当与前面的$parse1样属于同1个形参吗?
  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(在1个表单里嵌套另外一个?)
    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和http://www.wfuyu.com/server/通讯

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

XHR实践

  1. JSONP
  2. CORS
    1. http://www.wfuyu.com/server/端支持: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){...})

http://www.wfuyu.com/server/通讯

测试

  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. 移动装备首先会检测到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是唯1缓存XHR要求的?
  3. p393 Web爬虫通常不会抓取JS利用(需要包括JS解释器)?
  4. Google会把hashbang(#!)转换为?+escaped_fragment_=... ?
  5. 获得快照(?)
    1. PhantomJS
    2. Zombie.js
  6. Prerender.io Nodehttp://www.wfuyu.com/server/

构建AngularJS Chrome利用

优化AngularJS利用

  1. bindonce

调试AngularJS

  1. Chrome扩大Batarang

下1步

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

总结 

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生