AngularJS理论及实战.pptVIP

HTML ParserDirectives Parser的本质：JS版的编译器 / HTML ParserDirectives compile link 遍历DOM，找到所有指令 指令优先级排序； 执行compile函数； 把每个compile函数返回的 link函数打包到一个 总的link函数中 将scope绑定到DOM上； 在元素上注册事件监听器； 使用$watch监控数据模型； ... 常见的一些JS Template框架也采用了类似的compile策略以提升效率，比如HandleBars、ExtJS的XTemplate。从这个角度来看，可以把Angular的指令看作增强版的JS Template机制。 HTML ParserDirectives var $compile = ...; // injected into your code var scope = ...; var html = div ng-bind=exp/div; // Step 1: parse HTML into DOM element var template = angular.element(html); // Step 2: compile the template var linkFn = $compile(template); // Step 3: link the compiled template with the scope. linkFn(scope); HTML ParserDirectives 指令嵌套 指令处理HTML元素 指令之间的交互 /guide/directive 这是使用Angular封装UI组件的基础 Service、Provider、Factory Service的概念 Service都是单例的 Service由$injector负责实例化 Service在整个应用的生命周期中存在，可以用来共享数据 在需要使用的地方利用依赖注入机制注入Service 自定义的Service需要写在内置的Service后面 内置Service的命名以$符号开头，自定义Service应该避免 AngularJS中常用的Service 创建自己的Service Service、Provider、Factory http://www.zhex.me/blog/2013/08/03/provider-factory-and-service-in-angularjs/ Service、Provider、Factory本质上都是Provider Provider模式是“策略模式”+“抽象工厂模式”的混合体 其它常用的Service：内置的共24个 $compile：编译服务 $filter：数据格式化工具，内置了8个 $interval $timeout $locale $location $log $parse $http：封装了Ajax /docs/api/ng/ 核心议题：共11个 AnguarJS的4大核心特性演示 自己动手搭建自动化的前端开发平台 核心特性1：MVC 核心特性2：模块化与依赖注入 核心特性3：双向数据绑定 路由：ngRoute与uiRouter 核心特性4：Directive与UI控件 Service、Provider、Factory $scope是一个POJO(Plain Old JavaScript Object) $scope提供了一些工具方法$watch()/$apply() $scope是表达式的执行环境（或者叫作用域） $scope是一个树型结构，与DOM标签平行 子$scope对象会继承父$scope上的属性和方法 每一个Angular应用只有一个根$scope对象（一般位于ng-app上） $scope可以传播事件，类似DOM事件，可以向上也可以向下 $scope不仅是MVC的基础，也是后面实现双向数据绑定的基础 可以用angular.element($0).scope()进行调试 AngularJS中MVC的核心是$scope Creation Watcher registration Model mutation Mutation observation Scope destruction $scope的生命周期 核心特性2：模块化与依赖注入 一切都是从模块开始的 ng官方推荐的模块切分方式 app controllers directives services routes filters 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的