码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-20 14:07:15      阅读:257      评论:0      收藏:0      [点我收藏+]

标签: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/)。

不要使用自定义标签,诸如<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 学习笔记 -----结构定义,布布扣,bubuko.com

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

标签:class   java   http   ext   com   get   

原文地址:http://www.cnblogs.com/aaronjin/p/3795817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!