程序员人生 网站导航

AngularJS权威教程 笔记（AngularJS是一个很有意思的库，基于函数形参的依赖注入？酷！还有奇怪的$scope和指令）

栏目：互联网时间：2014-11-03 09:22:34

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
    1. 略

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生成器

总结 

------分隔线----------------------------

上一篇 android 常见 action 使用

下一篇 一个Flash开发者从入门到放弃的成长之路

------分隔线----------------------------

最新技术推荐

1.cyou 非常适合 Z 世代企业家的三大理由 2阿里、京东类ChatGPT产品正在内测 未来或将融入产品 3公会积极复工复产，2023直播行业有哪些新机遇？ 4第三届OpenHarmony技术大会展区亮点纷呈，全方位洞见智慧互联未来 5第三届OpenHarmony技术大会应用生态实践分论坛成功举办 6第三届OpenHarmony技术大会OS安全分论坛圆满举办 7第三届 OpenHarmony 技术大会：创新成果丰硕，共筑开源生态新未来