转载请注明出处：http://blog.csdn.net/sllailcp/article
看到有说笔记乱的，因为笔记是好久之前边自学边随手写的，所以当时没整理，现在隔了太久，笔记太长，且当时写的很多小例子都忘了，所以就过来粗略的整理下。
angular（网址：docs.angularjs.cn/api/mg/function/angular.element）
angular 插件地址（http://www.bootcdn.cn/angular.js/）
<html ng-app>
ng-app:初始化，不写的话，程序不执行；可以写在html上还可以写到标签上；
function Angulars($scope,$rootScope){
$scope.name='hellow';
$rootScope.age=30'';
}
$rootScope:作用域是全局
<span style="font-family: Helvetica,"Hiragino Sans GB","Microsoft YaHei UI",sans-serif; font-size: 15px; line-height: 24px;">先遍历局部的如果局部没有再遍历全局的</span>
<div ng-controller="Angulars"></div>
ng-click：指令 点击（和click相似）
视图影响数据，数据再影响视图
ng-model
金钱格式化：currency（美元），
{{inpone.money * inpone.num | currency：'￥‘}}
$scope.$watch
-监听数据变化
-三个参数
用法：
$scope.$watch('Box.money',function(){ ... })//Box.money前面不要加$scope,监听Box.money的变化
$scope.$watch('inpone',function(){ ... },true)//后面加true，前面inpone，是监听整体是的
$scope.$watch($scope.fn,function(newval,oldval){ ... },true)//newval最新的值，old老值
$timeout：$timeout和setTimeout用法是一样的
$scope.$apply//监听数据有没有变化，一单有变化就会影响视图
<span style="white-space:pre"> </span>setTimeout(function(){
<span style="white-space:pre"> </span>$scope.$apply(function(){
<span style="white-space:pre"> </span>$scope.name="hahahha";
<span style="white-space:pre"> </span>})
<span style="white-space:pre"> </span>})
模块化：
var m1=angular.module('myApp',[]);
m1.controller//局部作用域
m1.controller('Aa',['$scope',function($scope){
<span style="white-space:pre"> </span>$scope.name="哈哈哈！";
}])
//中括号的第一个'$scope'是防止代码压缩后出现$s,这种状况，这个'$scope'对应的是function($scope)里面的参数（不可改变的形参）
angular.bind();绑定事件
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
angular.bind(document,show,3)(4);
<span style="font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;">如果需要改变this的指向，可以用 $.proxy() </span>
angular.copy(); //拷贝对象
var a = {
<span style="white-space:pre"> </span>name : 'hello'
};
var b = {
<span style="white-space:pre"> </span>age : '20'
};
var c = angular.copy(a,b); //a把所有值覆盖给了b
console.log(b);
angular.extend(); //对象继承
indentity//参数传递的是什么，打印的就是什么
lowercase（）//转小写
uppercase（）//转大写
element// 选择元素
eg：angular.element(id).css('background','red')；
bootstrap
ng-app不加的情况下，再点击的情况下初始化如下： angular.bootstrap(document,['myApp'])//初始化在document身上； 可以进行多次初始化： angular.bootstrap(aDiv[0],['myApp1']); angular.bootstrap(aDiv[1],['myApp2']);
m1.run();//初始化全局数据
m1.run(['$rootScope'],function($rootScope){
<span style="white-space:pre"> </span>$rootScope.name="hellow word";
})
过滤器：| 名称
currency 金钱 number 数字分隔（有小数时，默认保存3位数，后面可以传参） | number：4 保留4位小数； lowercase/uppercase:转大小写； json 格式化了json代码 limitTo 截取的操作（数组，字符串） | limitTo： 2 只截取前两位 date 针对时间的（把毫秒进行格式化） | date ：'yyyy'（有参数好多） 格式啊成日期 orderBy 排序； |orderBy:'age' 以age排序； $scope.name=[{color:'red',age:'10'},{color:'yellow',age:'20'},{color:'green',age:'30'}] filter 过滤（按value中的值过滤key值） |filter :'10' 就会把{color:'red',age:'10'}这一条匹配出来。
过滤器的扩展：
组合使用： |limitTo:2 | uppercase 截取前两个字符并且转为大写 js使用过滤器 m1.controller('Aa','$filter',function($scope,$filter){ $scope.name=$filter('date')('2343423','hh'); }]) html中引用 {{name}}
自定义过滤器：
-angular.module
》controller/run
》filter
m1.filter('firstUpper',function(){//firstUpper是自定义的过滤器
<span style="white-space:pre"> </span>return function(str,num){
<span style="white-space:pre"> </span>console.log(2)
<span style="white-space:pre"> </span>return str.charAt(0).toUpperCase()+str.substring(1);
<span style="white-space:pre"> </span>}<span style="white-space:pre"> </span>
})
<pre name="code" class="javascript" style="font-size: 15px; line-height: 24px;">html中引用{{ name| firstUpper : 2}}
angular.isDate 是不是时间对象
angular.isDefined 判断元素是存在的
angular.isUndefined 判断元素是不存在的
angular.isFunction
是不是函数
angular.isNumber
判断是不是是数字
angular.isObiect
判断是不是对象
angular.isString
判断是不是字符串
angular.isElement
判断是不是一个元素
判断当前的angularJs库的版本
判断两个元素是否相等
forEach 用来遍历元素
formJson/toJson 对json的解析
辅助方法 ；；参数传递的是什么，计算得结果就是这个参数
indentity//参数传递的是什么，打印的就是什么
var str='hellow' angular.indentity(str); 结果：hellow
ng-app
ng-controller
ng-repeat:遍历
orEach 用来遍历元素：
$scope.allPrice=function(){
$scope.allprice=0;
angular.forEach($scope.dataList,function(data,index,array){
$scope.allprice+=parseInt(data.price)
})
return $scope.allprice
}<div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space:pre"> </span>@scope.dataList=['aaa','bbb','ccc']</div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;">
</div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><ul></div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span><span style="white-space:pre"> </span><li ng-repeat="data in dataList">{{data}}</li></div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"></ul></div>
callee:返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文.
arguments.callee['Sort'+arg]=!arguments.callee['Sort'+arg]; //Sort(arg)是个函数
ng-repeat 指令
- $index //遍历索引号
- $first //只要是集合的第一项就会返回真（true），其余项会返回假（false）
- $middle //只要是集合的第一项和最后一项就会返回真（true），其余项会返回假（false）
- $last //只要是集合的最后一项就会返回真（true），其余项会返回假（false）
- $even //只要是集合的奇数行就会返回真（true），其余项会返回假（false）
- $odd //只要是集合的偶数行就会返回真（true），其余项会返回假（false）
- ng-repeat-start
- ng-repeat-end
eg:
<tr ng-repeat="data in nameList1">
<td>{{ $first }}</td>
</tr>
form中的指令
- ng-selected 选中的一项
- ng-change 改变内容
- ng-copy 复制内容时触发
- ng-cut 剪切内容时触发
- ng-paste 粘贴内容时触发
eg： <input type="checkBox" ng-model='aaa'> <select> <option>北京</option> <option ng-selected="aaa">广州</option> <option>上海</option> </select> <input type="text" ng-model="bb" ng-change='bb="hellow"'>{{bb}} <input type="text" ng-copy="cc='true'">{{cc}} <input type="text" ng-cut="dd='true'">{{dd}} <input type="text" ng-paste="ee='true'">{{ee}}
ng-disabled //按钮禁用
-服务$interval //禁用相关的操作（对按钮不起作用）
ng-readonly
ng-checked
ng-value //不用加{{ text }}，如果不加ng-，要等到js加载完后才解析这个表达式
eg:
<input type="button" value="{{textVal}}" ng-disabled="isDisabled">
<input type="text" value="{{textVal}}" ng-readonly="isDisabled">
<input type="checkBox" value="{{textVal}}" ng-checked="isDisabled">
$interval(function(){},1000);
$timeout(function(){},sans-serif; font-size:15px; line-height:24px">
$interval.cancel(timer)//清楚定时器
ng-bind //跟ng-value 作用相似
ng-cloak //没有解析完，也不现实表达式，提高用户体验度
ng-bind-template//多个表达式ng-bind-template=“{{text1}}，{{text2}}”
-http:www.bootcdn.cn/angular.js/（http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js）
ng-non-bindable //不让表达式解析，写的是什么，解析的就是什么，一般用的不多
eg:
<div ng-bind="textVal"></div>
<div ng-bind-template="{{textVal1}},{{textVal2}},{{textVal3}}"></div>
ng-class //<div ng-class="{red:true,yellow:true}">{{ text }}</div> red和yellow都是类的名字，ng-class="{{ sClass }}"要用表达式的方式
ng-style //<div ng-style="{color:'red',background:'blue'}">{{ text }}</div> ng-style="{{ style }}"要用表达式的方式 ng-style="{display:$first ? 'block' : 'none'}"
ng-href //一单表达式没加载完，是看不见href的值的，是有好处的。
ng-src //同上
ng-show //元素的显示隐藏 通过css样式操作 ng-show="true" (false);
ng-hide //元素的隐藏显示 通过css样式操作 ng-show="true" (false);
ng-switch //
-on
-default
-when
ng-open //ng-open="true"
ng-init //初始化
ng-model //扩展
- ng-model-options
- updateOn ( ng-model-options="{updateOn：'blur'}" )
ng-controller //可以面向对象得写法
- as //Fn as a1 {{ a1.text }} //a1表示构造函数所创建出来的对象
标签指令：：：：：
<a>
<select>
- ng-options
>> for in
<textarea>
<input>
<form>
- novalidate // 阻止表单默认的行为
表单验证：
$valid //有效的，验证成功的话返回true
$invalid //无效的，验证成功的话返回false同上面相反
$dirty //同上相反
$error //验证失败或者通过，所有的验证信息都在这里面，（可以利用这个进行复杂开发）
---注意---
- name 通过name的方式进行查找
- 要写ng-model
type
- email
- number
- url
ng-minlength
ng-maxlength
ng-pattern
表单验证中可自定义的css。。。。。；
.class
- .ng-valid{ 验证成功的样式 }
- .ng-invalid{ 验证失败的样式 }
- .pristine{}
- .drity{}
angularJs自定义指令
- angular.module
>>controller
>>run
>>filter
>>directive //m1.driective('Ass',function(){ return{} })
- restrict //标签形式的指令 restrict:'E' E表示element restrict:'A' A:对应的属性 restrict:'C' C:解析成class restrict:'M' M:解析注释（注释的写法 <!-- directive:hello -->） restrict:'AECM'又是标签又是属性
- replace //替换原有标签 （true）
- template //模板的方式 template :'<div>hellow</div>'
- templateUrl //
- scope //独立的作用域 scope：true 还有隔离作用域scope：{}
绑定方式{}中：： @:绑定的普通的字符串 =:解析的数据 &：父级的函数的绑定传递方式
scope:{ myId : '@' }
<div my-id="div1"></div>
<div my-id="div2"></div>
或者
scope:{ myId : '@aaa' }
<div aaa="div2"></div>
- controller //controller:['$scope',function($scope){ $scope.name='hellow' }]
>>directive
>>link // link:function(scope,element,attr){...}
- scope //作用域 scope.name
-elelment //每一个的最外层的div元素 elelment.delegate('input','click',function(){})
-reController //和require配置选项有关系的
angular.equals()://判断两个值是否相等 相等会返回true，否则返回false
-directive 注意：------scope.$apply() //刷新视图-----------------
>> transclude //transclude :true
- ng-transclude //<h1 ng-transclude></div>
>> require // require ：hi (hi是要引入指令的名字） reController(依赖require 引入的指令)
- ^ // 父级的身上找 eg: require : ^hellow (注：hellow是当前指令的父级) 如果是同级，就不用^ eg:<hi hellow></hi>
- ? // 容错的处理 （不存在的话不会报错） 一般的?和^一起使用 eg： require : ?^hellow
directive中的controller 和link 的区别
link ：dom指令的当前操作 link，针对当前内部 ；
angularJs服务
$http
- method
- success
- error
-简写方式
常规写法：
$http({
method:'GET',method:'data.PHP',}).success(function(data,state,headers,config){
console.log(data);
}).error(function(){
console.log(data);
})
简写方式：
$http.get('data.PHP').success(function(data,config){
console.log(data);
})
wd=angular&cb=JSON_CALLBACK //
wd=//是要搜索的关键字
$location
- absUrl() //得到网址信息的绝对地址
- path() //（可以设置可以获取）$location.path('aaa') 跟路由挂钩的(有历史记录前进后退的)
- replace() // $location.path('aaa').replace() (会替换之前的路径 ，没有历史记录前进后退的)
- hash() // $location.hash('hellow')
- search() // $location.seach({'age':'20'})
- url() // 得到网址信息（不是绝对信息）
- host() //主机名192.168.10.23
- port() //端口号 （端口：8080）
- protocol() //协议（http协议）
- 例子：锚点跳转
$cacheFactory //缓存服务 var ach=$cacheFactory('myCache',{capacity:2}) myCache为缓存的id名字 capacity为缓存的长度
- info() //缓存的信息 ach.info()
- put() //设置缓存 ach.push('name','ss') ach.push('age','20')
- get() //获取缓存 ach.get('name')
- remove() //清除缓存 ach.remove('name') 清除后，就找不到name这一条缓存
$log //服务
-log() //调试 跟console.log()类似 $log.log()
- info() //
- warn() //警告$log.warn()
- error() //报错$log.error()
$interpolate //插值服务 (注：有点难理解)
$q //服务 有点类似jQuery中的延迟对象 对异步操作进行功能扩展 var dfd=$q.defer();
- promise的实现 //返回promise对象 return dfd.promise
- defer()
- resolve() //成功时候触发的方法 dfd.resolve
- reject() //失败时候触发的方法
- notify() //实时通知处理
- then() //监听成功失败的回调处理
angularJS的供应商
服务的相关初始配置操作
- congif
- provider
- $interpolate //$interpolateProvider
>>startSymbol()//改变表达式的头部符号{{ $interpolateProvider.startSymbol('@@')
>>endSymbol/改变表达式的尾部符号 }}
- $log //$logProvider
- $anchorScroll //$anchorScrollProvider
eg:
m1.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol('@@');
$interpolateProvider.endSymbol('@@');
}])
m1.controller('aa','$interpolate',$interpolate){
$scope.name="hellow"
}])
<div ng-controller="aa">@@name@@</div>
eg:
m1.config(['$anchorScrollProvider',function(){
$anchorScrollProvider.disableAutoScrolling() //禁止自动跳转
}])
m1.controller('aa','$location','$anchorScroll',$location,$anchorScroll){
$scope.changes(id){
$location.hash(id);
$anchorScroll() //加上服务的方法，就可以手动的跳转
}
}])
-----------------------------------------------------
angularJs的自定义服务
-module
- filter() //
- directive() //
- factory() //自定义服务 m1.factory('myRandom',function(){...})
- provider() // 自定义服务 m1.provider('myRandom',sans-serif; font-size:15px; line-height:24px">
>>区别 //都是可以自定义服务，但是provider()可以配置操作
>>$get //
m1.factory('myRandom',function(){
<span style="white-space:pre"> </span>return {
<span style="white-space:pre"> </span>show:function(){
<span style="white-space:pre"> </span>return Math.random()
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
})
m1.controller('myAn','myRandom',myRandom){
<span style="white-space:pre"> </span>$scope.name=myRandom.show()
}]);
m1.provider('myProvi',function(){
<span style="white-space:pre"> </span>return {
<span style="white-space:pre"> </span>age:20,//改写的对象
<span style="white-space:pre"> </span>$get:function(){
<span style="white-space:pre"> </span>return {
<span style="white-space:pre"> </span>name:this.age,<span style="white-space:pre"> </span>show:function(){
<span style="white-space:pre"> </span>return this.name+':hi';
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
})
m1.controller('myAn','myProvi',myProvi){
<span style="white-space:pre"> </span>$scope.name=myProvi.show();
}]);
可以修改myProvi下面的值，例如：
m1.config(['myProviProvider',function(myRandomProvider){
<span style="white-space:pre"> </span>console.log(myRandomProvider);
<span style="white-space:pre"> </span>myRandomProvider.age='angularJs'；
}]);
模块之间的通信
- provider好处 //可以以js文件的形式引进来，angular.module('myApp2',[myApp1])方式引入
service() //不常用 针对构造函数的方式定义服务,面向对象的开发
- 构造函数
constant() //不常用 可以进行配置获取的
- 设置常量
value（） //不常用 不可以进行配置获取的
- 区别
provider好处：
var m1=angular.module('myApp1',[])
var m2=angular.module('myApp2',[])
m1.provider('myServe',function(){})
<div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><div ng-app="myApp2"></div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span>这里引用myServe是得不到结果的，因为myServe是在m1中，要想得到结果，必须引入myApp1 </div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span>方法： var m2=angular.module('myApp2',[myApp1])</div><div style="margin: 0px; font-family: Helvetica,sans-serif; font-size: 15px; line-height: 24px;"></div></div>
service() 构造函数：
m1.service('myServe',FnServe)
function FnServe(){
<span style="white-space:pre"> </span>this.name="hellow";
}
FnServe.prototype.age="20";
m1.controller('Aaa','myServe',myServe){
<span style="white-space:pre"> </span>console.log(myServe.name)
<span style="white-space:pre"> </span>console.log(myServe.age)
}])
constant() 和value() ：
m1.constant('myServe','hellow nihao');
m1.value('myServe','hellow nihao');
对于她们俩，如果写m1.config(['myServe',function(myServe){...}]) //myServe后面不用加Provider
m1.config(['myServe',function(myServe){
<span style="white-space:pre"> </span>console.log(myServe) //调用value时会出错
}])
<-----------------------------------注意：有的时候插件引入后会报错，原因是，版本angular.js和插件的不同----------------------------------->
angularJs的插件使用
- ngSanitize
- 版本的问题
- ng-view //切换视图主体的部分 <div ng-view></div>
$routeProvider //m1.config(['$routeProvider',function(){}]); //供应商的方式；
》when // .when('/aaaa / : num',{templateUrl:'temp2.html'})
- template/templateUrl
- controller
》otherwise // 初始化ng-view里面的内容
- redirectTo //redirectTo :'/aaaa'
$routeParams //$routeParams接受 :num这个参数
-事件 m1.run(['$rootScope',function(){}])初始化全局数据
>>$on //绑定事件(例如绑定到$rootScope上) $rootScope.$on('$routeChangeStart',function(){}) 可接受参数；例如 event（angular模拟的一个event和js的event类似） current（当前的路径对应的数据值） pre（前一个的路径）
>>$routeChangeStart //第一个参数，路由在切换之前触发的事件
>>$routeChangeSuccess/Error //
m1.config//供应商的方式；
eg:
m1.config(['$routeProvider',function($routeProvider){
//console.log($routeProvider)
$routeProvider
.when('/aaa',{
<span style="white-space:pre"> </span>//template:'<div>北京北京北京北京北京北京北京北京北京北京</div>'
<span style="white-space:pre"> </span>templateUrl:'temp.html'
})
.when('/bbb',{
<span style="white-space:pre"> </span>templateUrl:'temp2.html'
})
.when('/ccc',{
<span style="white-space:pre"> </span>templateUrl:'temp3.html'
})
}])
<div>
<a href="#aaa">北京</a>
<a href="#bbb">上海</a>
<a href="#ccc">广州</a>
</div>
<div ng-view></div>
或者用$location服务的方式；
<div>
<a href="" ng-click="$location.path('aaa')">北京</a>
<a href="" ng-click="$location.path('bbb')">上海</a>
<a href="" ng-click="$location.path('ccc')">广州</a>
</div>
<div ng-view></div>
m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeSuccess',function(event){
console.log(event)
})
}])
以下主要给大家汇总了一下angular.element的方法，十分的详细，这里推荐给大家 参考下。
addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
ready()-当DOM准备就绪时，指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
removeData()-在元素上移除绑定的数据
text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素
