AngularJS学习笔记
模块：
ng-app=”myModule”
var myModule = angular.module(‘myModule’,[]);
控制器：
ng-controller=”myCtrl”
myModule.controller(‘myCtrl’,[‘$scope’,function(){
$scope.hello=”hello world”;
}]);
模型
ng-model指令用于绑定应用程序数据到html控制器（input,select,textarea......）的值
模型是绑定到 $scope上的属性或者方法
$scope 作用域
<div ng-controller="mythis">
<h2>$scope controller内作用域</h2>
<p>{{myScope}}</p>
</div>
<div>
<h2>$rootScope 根作用域</h2>
<p>{{myRootScope}}</p>
</div>
css1.controller('mythis',['$scope','$rootScope',function($scope,$rootScope){
$scope.name = "controller内作用域";
$rootScope.myRootScope = "myname is 根作用域";
}]);
表达式：
{{9*8}} {{firstName + “ ”+ lastName}}
<span ng-bind=”hello”></span>
<div ng-init="num=1;price=5">
<h3>价格计算器</h3>
<p>数量：<input type="text" ng-model="num"></p>
<p>价格：<input type="text" ng-model="price"></p>
<p><b>总价</b> {{num*price}}</p>
</div>
对象
<div ng-init="person={firstName:'三',lastName:'张'}">
<p>姓名为：<span ng-bind="person.firstName + ' '+ person.lastName"></span></p>
<p>姓名为：<span>{{person.firstName + ' ' + person.lastName}}</span></p>
</div>
数组
<div ng-init="arr=[1,2,5,8,9]">
<p>第三个值是：{{arr[2]}}</p>
<p ng-repeat="item in arr" ng-bind="item"></p>
</div>
指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
................................. http://www.runoob.com/angularjs/angularjs-reference.html
用户可以自定义指令
var css1 = angular.module('myCssModule',[]);
css1.directive('customDirective',function(){
return {
restrict:"AECM",
replace:false,
template:"<h1>自定义指令</h1>"
};
});
E:只限元素名使用
<custom-directive></custom-directive>
A:只限属性使用
<div custom-directive></div>
C:只限类名使用
<div class="custom-directive"></div>
M:只限注释使用
<!-- directive:custom-directive -->
过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。（其实就是模版函数)
<div ng-controller="myfilter">
<p>{{name | uppercase }}</p>
<p>{{price | currency }}</p>
<p><input type="text" ng-model="test">{{arr}}</p>
<ul>
<li ng-repeat="k in arr | filter:test">
{{k | chengfa:5}}
</li>
</ul>
</div>
css1.controller('myfilter',['$scope',function($scope,chengfa){
$scope.name = 'tongjunhua';
$scope.price = 95.89;
$scope.arr = [4,9,6,1,3,19,13];
}]);
//自定义过滤器，两个参数相乘
css1.filter('chengfa',function(){
return function(num1,num2){
console.log(num1,num2);
return num1*num2;
}
});;
服务
服务就是一个函数或对象，相当于一个mvc框架中的外部工具类，angularjs中内置了30多个服务，用户可以自定义自己的服务类。
<div ng-controller="myService">
<h2>服务</h2>
<p>当前页面url：{{myurl}}</p>
<div>{{myWelcome}}</div>
<p>{{theTime}}</p>
<p>{{sayHello}}</p>
</div>
css1.controller('myService',function($scope,$location,$http,$timeout,$interval,sayHello){
//$location其实是封装了window.location的一个对象
$scope.myurl = $location.absUrl();
//$http其实是封装了ajax的一个对象
$http.get("welcome.html").then(function(response){
$scope.myWelcome = response.data;
});
//$timeout其实是封装了window.setTimeout函数的一个对象
$timeout(function() {
$scope.myWelcome = "hello world";
}, 2000);
//$interval其实是封装了window.setInterval函数的一个对象
$interval(function(){
$scope.theTime = new Date().toLocaleTimeString();
},1000);
$scope.sayHello = sayHello.hello("张三丰");
});
//自定义服务类
css1.service('sayHello',function(){
this.hello = function(x){
return x+" 欢迎登录本系统。";
}
});
Select(选择框)
<div ng-controller="mySelect">
<h2>select</h2>
<p>
<select ng-model="selectedSite">
<option ng-repeat="v in sites" value="{{v.url}}">{{v.site}}</option>
</select>
你选择的是：{{selectedSite}}</p>
<p>
<select ng-model="selectedSite2" ng-options="x.site for x in sites">
</select>
你选择的是：{{selectedSite2.site}} 网址：{{selectedSite2.url}}
</p>
</div>
myapp.controller('mySelect',function($scope){
$scope.sites = [
{site:"google",url:"http://www.google.com"},
{site:"baidu",url:"http://www.baidu.com"},
{site:"soso",url:"http://www.soso.com"},
];
});
ng-disabled
<div ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">点我！</button></p>
<p><input type="checkbox" ng-model="mySwitch"></p>
{{mySwitch}}
</div>
事件
<div ng-controller="myEvent">
<p><button ng-click="count =count+1">点我</button>{{count}}</p>
<div>
<p><button ng-click="toggle()">{{ {true:"隐藏",false:"显示"}[isHide] }}</button></p>
<p ng-hide="isHide">显示隐藏 ng-hide:{{isHide}}</p>
</div>
</div>
myapp.controller('myEvent',function($scope){
$scope.count = 0;
$scope.isHide = true;
$scope.toggle = function(){
$scope.isHide = !$scope.isHide;
}
});