angularjs 学习笔记 -----结构定义

标签：class   java   http   ext   com   get   

1、  Module使用方法

var APP =angular.module(‘fontApp‘,[‘ngResource‘, ‘ngRoute‘, ‘ngSanitize‘]);

APP为定义的别名，之后的调用都应尽量使用该别名

‘fontApp‘ ng-app="fontApp"

新版本angular中route被分离出来，各个被使用的Providerdou需要在此处声明。

大型应用应该拆分模块来做，先定义一个服务模块，然后再加载它

angular.module(‘xmpl.service‘,[])

angular.module(‘xmpl‘, [‘xmpl.service‘])

用以下代码可以实现双向绑定，功能等同于ng-app

        angular.element(document).ready(function() {

            angular.bootstrap(angular.element(document.getElementById("rootOfApp")));

        });

 

2、  angular全局定义的三种方式

1. 用var定义global全局变量，JS方法，优先级最高
2. .constant，定义常量，不能被修改
3. .value，定义静态变量，不能运算，但是可以通过extend修改

此外，还可以通过factory功能来定义变量。

我用以下方式对数据进行了存放：

.constant(‘global‘,{

        version: "0.1",

        DataUrl: {

            testUrl:  DataWeb + "index.asp"

        }

});

存放中的DataWeb是用var定义的全局变量，因为在constant中没能平级调用成功。

调用时使用了

.service(‘JsonSource‘, [‘$resource‘,‘global‘,

    function($resource,global) {

        return $resource(global.DataUrl.testUrl, {}, { }});

}])

需要调用多个参数时只需要声明一次‘global‘，缺点是定义部分不够清晰，如果之后重构时优势不够明显，可能会把constant里的内容拆分出来一些。

 

 

3、  Service就是【单例对象】在AngluarJS 中的一个别名，保证你每次访问到的都是同一个实例，service总是一个单体，无论是哪种类型的service。

Service包含5类，constant、value、factory、service、provider。

定义service有2种方式

myModule.factory(‘serviceId’,function() {});

或

angular.module(‘myModule’,[],function($provide) {

$provide.factory(‘serviceId’,function() {})

})

factory会直接实例化

service会延迟实例化，被依赖或请求之后才实例化

Provider是factory的加强,一个provider中应当由一个$get函数,注入一个控制器时，我们实际上注入的是$get函数。我们可以在config阶段配置一个provider。

$provide是Angular用来创建service的接口，$provide有一个函数，decorator，也用来装饰service，在回调函数中接收一个$delegate来代表我们实际上的service实例。

 

4、  声明依赖

使用array notation

function myModuleCfgFn ($provide) {

       $provide.factory(‘myService’,[‘dep1’,’dep2’,function(dep1,dep2){}]);

}

使用$inject属性

    function myModuleCfgFn($provide) {

           var myServiceFactory = function(dep1, dep2) {};

           myServiceFactory.$inject = [‘dep1‘, ‘dep2‘];

           $provide.factory(‘myService‘, myServiceFactory);

    }

使用隐式DI（不兼容压缩混淆的代码）

function myModuleCfgFn($provide) {

　　$provide.factory(‘myService‘, function(dep1, dep2) {});

}

对所使用的service类,都需要声明依赖，隐式DI是实验属性，尽量不要使用。

调用时的参数名可以随意，但顺序要和声明保持一致。

 

5、  template

Directive - 一个扩展现有DOM元素或者代表一个可复用的DOM组件的属性或者元素，即控件。

           Directive有驼峰式（camel cased）的风格的命名。但directive也可以支蛇底式的命名（snake case）

           compiler通过$interpolate服务匹配文本与属性中的嵌入表达式（如{{something}}）。这些表达式将会注册为watches

compile function用于处理DOM模版的转换。一般是那种需要转换DOM模版的（如ngRepeat），或者是需要异步加载内容的（如ngView）。compile function 可以有一个返回值，类型可以是function或者object。

link function负责注册DOM事件监听器，也可以进行DOM的更新操作。link function会在模版克隆操作完毕之后执行。这里存放着directive大多数的逻辑。

attribute object - 在link()或compile()中作为参数

Markup - 通过双大括号表示法{{}}来绑定表达式到元素中，是内建的angular标记。

Filter - 用于格式化我们给用户看的数据。

Form controls - 让我们验证用户输入。

双向数据绑定的关键directive是ngModel。

 

6、  Scope

scope是一个指向应用model的object。它也是expression的执行上下文。scope被放置于一个类似应用的DOM结构的层次结构中。scope可以监测（watch,$watch）expression和传播事件。

每一个angular应用有且只有一个root scope，但可以拥有多个child scope。

当angular对{{username}}求值时，它首先查看与当前元素关联的scope的username属性。如果没有找到对应的属性，它将会一直向上搜索parent scope，直到到达root scope。在javascript中，这个行为被称为“原型继承”，child scope典型地继承自它们的parent。

在debugger中查看scope：在console中输入：angular.element($0).scope()

当浏览器在angular执行环境外调用javascript代码时，这意味着angular是不知道model的改变的。要正确处理model的修改，这个命令必须通过使$apply方法进入angular执行环境。

 

 

7、  Controller

在angular中，controller是一个javascript 函数（type/class），被用作扩展除了root scope在外的angular scope的实例。

angular将一个新的scope对象应用到controller构造函数（估计是作为参数传进去的意思），建立了初始的scope状态。这意味着angular从不创建controller类型实例（即不对controller的构造函数使用new操作符）。构造函数一直都应用于存在的scope对象。

controller不应该尝试做太多的事情。它应该仅仅包含单个视图所需要的业务逻辑（还有点没转过弯了，一直认为Controller就是个做转发的……）。

保持Controller的简单性，常见办法是抽出那些不属于controller的工作到service中，在controller通过依赖注入来使用这些service。

ng-controller完成了一下功能

var injector = angular.injector([‘OtherModule‘,‘ng‘]);

injector.instantiate(MyController);

 

8、  Internet Explorer Compatibility

为了让我们的angular应用在IE上工作，请确保：

按需引入JSON.stringify（IE7或以下的都需要这玩意）。我们可以使用JSON2（https://github.com/douglascrockford/JSON-js）或者JSON3（http://bestiejs.github.com/json3/）。

不要使用自定义标签，诸如（用属性版代替，如