AngularJS學習筆記
來自： http://my.oschina.net/tongjh/blog/615970
模塊：
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;
}
});