标签: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全局定义的三种方式
此外,还可以通过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
标签:class java http ext com get
原文地址:http://www.cnblogs.com/aaronjin/p/3795817.html