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

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/）。

不要使用自定义标签，诸如<ng:view>（用属性版代替，如<div ng-view>）。如果还是想使用，则请看第3点。

如果你确实想使用自定义标签，那么你必须做以下步骤，让老IE认识你的自定义标签。

<!--[if lte IE 8]>

<script>

    document.createElement(‘ng-include‘);

    document.createElement(‘ng-pluralize‘);

    document.createElement(‘ng-view‘);

    // Optionally these for CSS

    document.createElement(‘ng:include‘);

    document.createElement(‘ng:pluralize‘);

    document.createElement(‘ng:view‘);

</script>

<![endif]-->

9、  $location服务

$location服务分析浏览器地址栏中的URL（基于window.location），让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL，会响应到$location服务中，而在$location中修改URL，也会响应到地址栏中。

$location 服务为只读的URL部分（absUrl，protocol，host，port）提供getter方法，也提供url，path，search，hash的getter、setter方法。

所有setter方法都返回同一个$location对象，以实现链式语法。

如果我们想让我们的Ajax应用能够被索引，我们需要在head中增加一个特殊的meta标签：<meta name="fragment" content="!" />

$location服务仅仅允许我们改变URl；它不允许我们重新加载页面（reload the page）。当我们需要改变URL且reload page或者跳转到其他页面时，我们需要使用低级点得API，$window.location.href。

$location知道angular的scope life-cycle。当浏览器的URL发生改变时，它会更新$location，并且调用$apply，所以所有$watcher和$observer都会得到通知。

angular compiler当前不支持方法的双向绑定。如果我们希望对$location对象实现双向绑定（在input中使用ngModel directive），我们需要指定一个额外的model属性（例如：locationPath），并加入两个$watch，监听两个方向上的$location更新，例如：

<input type="text" ng-model="locationPath" />

// js - controller

$scope.$watch(‘locationPath‘, function(path) {

    $location.path(path);

);

$scope.$watch(‘$location.path()‘, function(path) {

    scope.locationPath = path;

});

angularjs 学习笔记 -----结构定义,古老的榕树,5-wow.com