angular笔记

/**
 * Created by Administrator on 2016/5/3 0003.
 */

ng-app是告诉angularjs编译器把该元素当作编译的根

//定义模块
var myApp=angular.module('index', [])


//定义控制器
myApp.controller('haha', function ($scope) {
    $scope.message = 'World';
})


/*AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量*/
<div ng-app="myApp">
<div  ng-controller="haha" >
<input type="text" ng-model="message" />
Hello, {{ message }}
</div>
</div>


//AngularJS 对象
<div ng-init="obj={'name':'leyi'}">
{{obj.name}}
</div>


//AngularJS 数组
<div ng-init="arr=[1,2,3,4,5]">
    第二个值为{{arr[1]}}
</div>

<!--AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。-->

<!--AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。-->
<div ng-app="" ng-init="firstName='John'">
    <p>在输入框中尝试输入：</p>
    <p>姓名：<input type="text" ng-model="firstName"></p>
    <p>你输入的为： {{ firstName }}</p>
</div>


//ng-repeat 指令会重复一个 HTML 元素：
<ul ng-init="arr=[1,2,3,4,5]">
    <li ng-repeat="x in arr">{{x}}</li>
</ul>


<!--
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:-->
.directive('leYi',function(){
return {
template:"<p>自定义指令</p>"
}
})
//调用
通过元素名：<le-yi></le-yi>
通过属性：<div le-yi></div>
通过类名：<div class="le-yi"></div>
通过注释：<!-- 指令: le-yi -->
//限制使用
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
.directive('leYi',function(){
return {
restrict:"E",//只限元素名使用
template:"<p>自定义指令</p>"
}
})

数据绑定是将模型中的人数据与web页面中显示的内容链接在一起的过程。
//双向绑定 当页面中的数据改变时，模型会更新，当模型中的数据改变时，web页面也将自动更新
.controller('bindFn',function($scope){
$scope.value='bind value'
})

<div ng-controller="bindFn">
    <input type="text" ng-model="value"/>
    {{value}}
</div>


//ng-model 指令
//验证用户输入
<form ng-controller="bindFn" name="haha">
    <input type="email" ng-model="text" name="email"/>
    <span ng-show="haha.email.$error.email">你输入的的邮箱格式不正确</span>
</form>
//应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
<form ng-controller="bindFn" name="haha">
    <input type="email" ng-model="text" name="email" required/>
    <p> valid:{{haha.email.$valid}}输入的值是否合法</p>
    <p> dirty:{{haha.email.$dirty}}值是否改变</p>
    <p> touched:{{haha.email.$touched}}是否有点击</p>
</form>
//CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
<style>
    input.ng-empty{border:1px solid red}
</style>
<form ng-controller="bindFn" name="haha">
    <input type="email" ng-model="text" name="email" required/>
</form>


<!--
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。-->
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。


AngularJS 过滤器可用于转换数据：
{{100000|currency}}//$100,000.00
{{"abc"|uppercase}}//ABC
{{"ABC"|uppercase}}
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<div ng-init="arr=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
    <input type="text" ng-model="test" />
    <p ng-repeat="x in arr|filter:test|orderBy:'country'">
        {{x.name+"-----"+x.country}}
    </p>
</div>


在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
// $location 服务
.controller('bindFn',function($scope,$location){
$scope.myURL=$location.absUrl()
})
//$http服务
.controller('bindFn',function($scope,$location,$http){
$scope.myURL=$location.absUrl()
$http.get('xxx').success(function(response){
$scope.res=response
})
})
//$timeout 服务 //$interval 服务分别对应window.setTimeout window.setInterval
//创建自定义服务
.service('$leyi',function(){
this.fn=function(x){
return x+100
}
})
.controller('bindFn',function($scope,$location,$http,$leyi){
$scope.myURL=$location.absUrl()
$http.get('xxx').success(function(response){
$scope.res=response
})
$scope.kk=$leyi.fn(1)
})
//自定义过滤器
1.先创建一个模块
var myAppModule = angular.module("myApp",[]);
2.在模块的基础上，创建过滤器
myAppModule.filter("filterName",function(){//filterName 过滤器的名字
return function(ag1){
return ag1+1000
}
});
{{50|filterName}}


AngularJS Select(选择框)
1.可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
<select ng-model="selectedName" ng-options="x for x in names"></select>
2.也可以使用ng-repeat 指令来创建下拉列表：
<select ng-model="selectedName">
    <option ng-repeat="x in names">{{x}}</option>
</select>
3.两者之间的区别 ng-repeat 选择的值selectedName是一个字符串，ng-options选择的值selectedName是一个对象,当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。
$scope.names=[{"name":"a","color":"red"},{"name":"b","color":"blue"},{"name":"c","color":"green"}]
<select ng-model="selectedName" ng-options="x.name for x in names"></select>
selectedName.name:{{selectedName.name}}
selectedName.color:{{selectedName.color}}
<select ng-model="selectedName">
    <option ng-repeat="x in names" value="{{x.name}}">{{x.color}}</option>
</select>
{{selectedName}} //a||b||c
//使用对象作为数据源, x 为键(key), y 为值(value):
<select ng-model="selectedName" ng-options="y.name for (x, y) in names">
</select>
$scope.names={
"x":{"name":"a","color":"red"},
"y":{"name":"b","color":"blue"},
"z":{"name":"c","color":"green"}
}
{{selectedName.name}}
{{selectedName.color}}


AngularJS 表格
$index: 索引  $odd  $even 索引为奇数偶数...


AngularJS HTML DOM
ng-disabled  ng-show 指令隐藏或显示一个 HTML 元素。 ng-hide 指令用于隐藏或显示 HTML 元素。
<button  ng-disabled="mySelect">禁用切换</button>
<input type="checkbox"   ng-model="mySelect"/>
ng-click 指令定义了 AngularJS 点击事件。

<button ng-click="count=count+1">递增</button>
{{count}}

<button ng-click="toggle()">显示隐藏切换</button>
<p ng-show="myvar">!@#$%^&*()</p>
$scope.myvar=true
$scope.toggle=function(){
$scope.myvar=!$scope.myvar
}

表单验证
1.必填项验证
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
<input type="text" required ng-model="aa"/>
{{aa}}
2. 最小长度
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
<input type="text" ng-minlength="10" ng-model="bb" />
{{bb}}
3. 最大长度
<input type="text" ng-maxlength="15" />
4. 模式匹配 匹配正则表达式
<input type="text" ng-pattern="/d/" ng-model="cc" />
{{cc}}
5. 电子邮件 验证输入内容是否是电子邮件
<input type="email"  ng-model="dd" />
{{dd}}
6. 数字 验证输入内容是否是数字
<input type="number"  ng-model="ee" />
{{ee}}
7. URL 验证输入内容是否是URL
<input type="url"  ng-model="ff" />
{{ff}}
<!--以上是将HTML5的新属性和angular相结合进行验证，只有验证通过，才会进行绑定-->
屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记
访问DOM中的表单属性 formName.inputFieldName.property
$pristine 是否未被修改
$dirty 是否被修改
$valid 是否通过验证
$invalid 是否未通过验证
<!--$error对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。-->
formName.inputfieldName.$error 如果验证失败，这个属性的值为true；如果值为false，说明输入字段的值通过了验证。
实例
<form name="formName">
    // 以下代码还有点问题，当内容全删掉后还是会显示通过验证
    <!--必填项-->
    <input placeholder="必填项" type="text" required ng-model="aa" name="require_name"/>
    <span ng-show="formName.require_name.$dirty&&formName.require_name.$valid">通过验证</span>
    <!--最小长度-->
    <input placeholder="最小长度为5" type="text"  ng-model="bb" name="minlength_name" ng-minlength="5" />
    <span ng-show="formName.minlength_name.$dirty&&formName.minlength_name.$valid">通过验证</span>
    <!--最大长度-->
    <input placeholder="最大长度为8" type="text"  ng-model="cc" name="maxlength_name" ng-maxlength="8" />
    <span ng-show="formName.maxlength_name.$dirty&&formName.maxlength_name.$valid">通过验证</span>
    <!--邮箱-->
    <input placeholder="输入邮箱格式" type="email"  ng-model="dd" name="email_name" />
    <span ng-show="formName.email_name.$dirty&&formName.email_name.$valid">通过验证</span>
    <!--数字-->
    <input placeholder="输入数字格式" type="number"  ng-model="ee" name="num_name"  />
    <span ng-show="formName.num_name.$dirty&&formName.num_name.$valid">通过验证</span>
    <!--url-->
    <input placeholder="输入URL格式" type="url"  ng-model="ff" name="url_name"  />
    <span ng-show="formName.url_name.$dirty&&formName.url_name.$valid">通过验证</span>
    <!--正则匹配-->
    <input placeholder="输入小写字母" type="text"  ng-model="hh" ng-pattern="/^[a-z]*$/" name="regexp_name"  />
    <span ng-show="formName.regexp_name.$dirty && formName.regexp_name.$valid">通过验证</span>
    <input type="submit" ng-disabled="formName.$invalid" value="提交"/>
</form>

全局方法函数API

angular.bind  angular.bind(self,fn,args );
上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。
var aa={"name":"leyi"}
function fn(age){
alert(this.name+"---"+age)
}
angular.bind(aa,fn)(12)


angular.copy  angular.copy(source, [destination]);
复制一个对象或者一个数组。
如果省略了destination，一个新的对象或数组将会被创建出来；
如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中；
如果source不是对象或数组（例如是null或undefined）, 则返回source；
如果source和destination类型不一致，则会抛出异常。
注意：这个是单纯复制覆盖，不是类似继承
function Haha(){
this.name=123
}
Haha.prototype.age=222
var newObj=angular.copy(new Haha())
console.info(newObj) //创建一个新对象，包含继承属性
var newObj2={'height':333}
angular.copy(new Haha(),newObj2)
console.info(newObj2)//不包含继承属性，会覆盖新对象的属性


angular.element
如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.element只能接受HTML字符串或者
DOM元素为参数，选择的元素只可以调用Angular中嵌入的精简版的jQuery library（名为: "jQuery lite" or "jqLite").
注意: 所有被Angular引用的元素都是jQuery或者jqLite对象，不是原始的DOM元素了。
jqLite支持的jQuery函数有：
<p id="haha">12</p>
var haha=document.getElementById('haha')
console.info(angular.element(haha).html())


angular.equals 比较两个值或者两个对象是不是相等。

angular.forEach ===>_.each()
循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值


angular.fromJson  把Json字符串转为对象  angular.toJson() 相反
console.info(angular.isObject(angular.fromJson('{"name":"leyi"}')))

angular.extend  angular.extend(dst, src);
复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制.
var obj={"name":"leyi"}
var obj2={}
angular.extend(obj2,obj)
console.info(obj2) //{"name":"leyi"}


angular路由
angular.module('myRouter',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/',{"template":"这是首页！"})
.when("/leyi",{"templateUrl":"leyi.html"})
.when('/404',{"template":"404！"})
.otherwise({
redirectTo:"/404"
})
})


动画
angular.module('leyi', ['ngAnimate'])
<style>
    .content{transition:all linear 0.5s; height:200px; background:lightblue}
    .ng-hide{height:0}
</style>
<input type="checkbox" name="" ng-model="bl"/>
<div ng-class="bl" class="content">内容！</div>



依赖注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant


Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
var leyiModule=angular.module('leyi.controllers', ['ngAnimate'])
leyiModule.value("defaultValue",1000000)
leyiModule.controller('leyi',function($scope,defaultValue){ //注入值
$scope.haha=defaultValue
})

AngularJS中service，factory，provider的区别
在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。
这就是为什么使用controllers在应用里面传递数据不可靠的原因

factory()  Angular里面创建service最简单的方式是使用factory()方法。返回一个工厂模式创建的服务对象
(需要使用.config()来配置service的时候不能使用factory()方法)
var leyiModule=angular.module('leyi.controllers', ['ngAnimate'])
leyiModule.factory("leyiFactory",function(){
var aa={}
aa.num=11111
return aa
})


service() 通过构造函数的方式让我们创建服务对象
(需要使用.config()来配置service的时候不能使用service()方法)
leyiModule.service('leyiService',function(){
this.num=22222
})


provider() 是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法
Provider recipe 是语法定义为一个自定义类型，实现 $get 的方法。这个方法是一个工厂方法，就像我们在 Factory recipe 中使用的一样。事实上，如果你定义一个 Factory recipe，钩子会自动创建一个包含空 Provider 类型 $get 方法的工厂方法。
leyiModule.provider('leyiProvider',function(){
this.$get=function(){
var aa={}
aa.num=3333
return aa
}
})
调用
leyiModule.controller('leyi',function($scope,leyiFac,leyiService,leyiProvider){
$scope.nihao=leyiFac.num
$scope.hello=leyiService.num
$scope.world=leyiProvider.num
})