angular笔记

/**
 * Created by Administrator on 2016/5/3 0003.
 */
//定义模块
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>"
}
})


//双向绑定 从界面的操作能实时反映到数据，数据的变更能实时展现到界面
.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}}