AngularJs-学习笔记1

 

 AngularJS 学习笔记-基础导读

 

基础学习： http://www.runoob.com/angularjs/angularjs-tutorial.html

 

AngularJS 构建单页面应用或者复杂的回合制web应用，本文只是对AngularJS的整体概念进行梳理，并非具体样例演示，具体的样例可以到上述基础教程中直接运行。

 

 

1.MVC和MVVM

Application的MVC：

  -- Controller: 基于用户的选择，控制选择不同的业务模型数据，选择不同的视图显示数据--  

  -- Model: 业务数据

  -- View：用于显示视图数据的页面

  -- Sevice是对业务数据的操作，实现具体的业务逻辑，它关注的是多个MVC线路的横切面，service可以互相调用以实现复杂的业务逻辑

  -- 每一次数据的展示都是一次新的请求，实现整个页面的刷新

 

MVVM：

  -- Mode: 业务数据

  -- VM：视图数据模型，用于实现业务数据与视图的双向绑定

  -- View：展现数据的视图

AnguarJS是基于MVVM，是对前端视图展示的一个框架，可以理解为只是针对于整个MVC工程的View部分

 

  -- Mode：一般通过AJAX获取获取restful 获取后台JSON数据并转换为JS对象

  -- Service：通过AngularJS的创建的service并依赖注入，通用的service也只是关注横切面，多个service直接可以相互调用实现复杂的业务逻辑

  -- Controller: Controller,与一个$scope相对应，页面上通过ng-controller来确定这个scope作用域的范围
  -- VM：是controller的$cope作用域，实现了数据与页面视图（指令）的相互绑定，通过$scope修改数据，指令显示的数据也同时被修改为同样数据。

  -- View： ng-app,ng-controller,通过这俩内置指令关联上js代码中的module和controller，并且确定了该controller的作用域， 内置和自定义指令，ng-view和HTML是具体的用于视图的显示，这些被包含在哪个ng-controller下就会实现在其对应的scope作用域下的双向绑定。

 -- 自定义指令和路由的指令的调用作为视图的一部分，指令的实现需要在js中定义，内置指令是已经有angularjs框架实现了

 

 

 2.初始化流程：

1、浏览器载入HTML，然后把它解析成DOM。
2、浏览器载入angular.js脚本。
3、AngularJS等到DOMContentLoaded事件触发。
4、AngularJS寻找解析ng-app指令及ng-controller指令，这个指令指示了应用的边界。
5、解析anguarJS代码

6、使用ng-app中指定的模块来配置注入器($injector)。
7、注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。
8、编译服务($compile service)是用来编译DOM并把它链接到根作用域($rootScope)的。

9、配置$provide生成或者直接用app api生成的 provide,factory,service

10、在载人模块代码时，根据依赖关系，顺序执行模块的config方法，先执行最顶层依赖模块的config方法

111、在载入完毕所有模块代码，根据依赖关系，顺序执行模块的run方法，先执行最顶层依赖模块的run方法

 

3.AngualrJS组件结构：

Module -> Controller ->$scope -> view

             -> Controller ->$scope -> view

             -> Directive

             -> Service(factory,service,provider)

             -> Route 

             -> Filter

Module ->.......................

 

Module可以用于组织多模块实现代码的服务，或者用来代码结构分包

controller及作用域是Mode和VIew的枢纽，Controller会对应于某一View（ng-Controller确定的范围），在VIew上的修改数据的行为，会进入controller的实例的$scope的方法，一个controller会跟一个$scope一一对应

Route&Directive&Filter可重用于当前module不同的controller，在不同的视图下就会对应于不同的controller及作用域下

Route：在模块下预定义当前模块所需的route对象，ng-view会根据浏览器url的变化显示不同的route对象

  -- 如果所有的route对象共享于一个controller，controller可以通过$route对象获取当前route对象就对route对象变化的事件做出处理

  -- 每个route对象可以指向指定的controller，只有当切换到这个route对象，才会去创建生成这个controller的实例，这就是懒加载

  -- ng-view 决定了当前route对象所在的View，就决定了对应的controller

 

4.Module模块

定义方法

config函数

run函数

 

5. 依赖注入 --

Module("app", []).service("serviceName", function(){

reutrn {...}

});

Module("app", []).factory("serviceName", function(){

this....

});

Module("app", []).provider("serviceName",function(){

var enable = false;

return{

            setEnable : function(value){enable=value}

            $get : function(){

                        return {process : function{enable}}                                

                       }

           }

});

  -- 这三个方法指定的都是服务名

  -- service - 一个构造函数，return一个服务实例，也可以作用基类，使用原型链扩展

  -- factory - 一个服务工厂函数，return一个服务实例

  -- provider - 一个provider工厂函数，使用 “服务名+Provider” 获取provider实例，在config函数中调用“serviceProvder”实例的方法进行配置，也可以在其他任何地方配置， 在依赖注入使用服务名时，provder会return一个服务实例

其实provider工厂函数就是js的闭包，来实现封装，配置信息，可以通过返回的provder的方法进行配置信息的读取和修改，angularjs会通过调用provider的$get方法返回provider

========================

  -- 服务是单实例，推荐是在config阶段进行配置，其实任何地方修改了服务的配置，影响的是全局服务对象的使用

  -- Value和Constant的依赖注入，Module("app", []).constant("const", "110") ; Module("app", []).value("val", "110") ,这样就可以controller的工厂函数中注入他们

  -- 新手常见的错误就是将在JS的window对象下定义的变量，用于直接注入controller的工厂函数，AngularJs无法根据变量名无法找到由Angularjs注册的值或者常量，就会报错

  -- 如果真要直接使用window对象下的全部变量，根据JS的函数作用域链，可以直接在工厂函数中使用该全局变量，无需在工厂函数中声明依赖，这样反而会报错，但是直接使用全局变量是单元测试变得困得不推荐这样使用

  -- 推荐做法是使用到的任何值对象都应该由AngularJS声明，使用依赖注入方式来使用

 

6. controller组织方法及作用域继承

  -- 在功能对应的同一模块下

  -- $rootScope作用是最顶层的作用域

  -- 通过ng-controller来确定

  -- 只有一个controller的应用

  -- 由多个并列同级的controller，可通过$rootScope作用域广播事件，在各自的作用注册事件，用于数据的同步通信

  -- 一个controller下包含另一个controller，子controller同样再可以包含子controller，子作用域继承父作用域的数据

 

                                                                                $rootScope

Mode -> Service(多条MVC的横切面) -> Controller($Scope -1 == VM) -> View

Mode -> Service(多条MVC的横切面) -> Controller($Scope -2 == VM) -> View

Mode -> Service(多条MVC的横切面) -> Controller($Scope -3 == VM) -> View

 

7. ng-mode：

  -- 前提ng-mode绑定的数据是在父作用域定义，未在子作用域定义

  -- 普通类型数据-在读取数据A用于显示时会从当前作用域逐层向上寻找，在更新数据A时，如果未在当前作用域发现，会在当前作用域内创建一个隐藏的数据A，并不会逐级向上寻找

  -- 对象引用类型-所绑定的对象实际上仍然是子作用域从父作用继承而来的，并不会再当前作用域生成新的对象，对象是地址引用

 

8.指令作用域继承及隔离作用域

9.Route的controller及懒加载

10.过滤器filter

过滤器是将数据在被指令显示前进行格式化或者排序，而不会对原数据源进行修改

 -- AngularJS已经提供了一些内置过滤器

 

内置指令服务

 

内置AngularJS方法

 

代码分包方法

 --  方式一，可以将module单独放到一个js文件，controller单独放到一个js文件，自定义指令单独放到一个js文件，过滤器单独放到一个js文件，路由单独放到一个js文件

     a.通过jsp页面上<script>标签导入所有这些js文件

     b.通过grandle构建工具的task将多个js文件压缩为一个js文件，jsp中只引入这一个文件

  -- 方式二，可以创建一个module只用于生成controller，并放到单独的一个js文件中，在创建一个module只用于生成指令，并放到单独的一个js文件中，其他的以此类推，最终在主module的的js文件中依赖注入其他这些所有模块，使用<script>引入主模块js文件在jsp页面中

==================================================

 

 

---动手实践 ： http://jsfiddle.net/powertoolsteam/Tk92U/