<!doctype html>
<!-- 要在這裡引用子產品名 -->
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>AngularJs初識2</title>
<!--引入AngularJs的檔案-->
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
//子產品化:angular.module(子產品名，空數組)
/*
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl',function($scope,$rootScope) {
$scope.name='Hello world';
})
//建議用這種方式,解決壓縮問題!
var m1 = angular.module('myApp', []);
m1.controller('one',['$scope',function($scope) {
$scope.name='Hello world';
}])
m1.controller('two',['$scope',function($scope) {
$scope.name='Hi world';
工具方法:
1:angular.bind();---類似---》call()/apply(); 改this指向
function show(a,b){
alert(this);
alert(a+":"+b);
}
angular.bind(document,show)(3,4);
2:angular.copy();-------》拷貝對象
var a ={
'name':'張三'
};
var b = {
'age':'18'
var c = angular.copy(a,b);------->a把所有值覆寫給了b
console.log(c);
console.log(b);
3:angular.extend();-------》繼承對象
var c = angular.extend(a,b); ------》a繼承了b的屬性
console.log(a);
4：angular.isArray(); 判斷是否為一個數組對象
var arr = [];
console.log(angular.isArray(arr));
5: angular.isDate(); 判斷是否為一個日期對象
6： angular.isDefined(); 判斷是否存在
7: angular.isUndefined(); 判斷是否不存在
8: angular.isFunction(); 判斷是否為一個函數
9: angular.isNumber(); 判斷是否為一個數字
10: angular.isObject(); 判斷是否為一個對象
11: angular.isString(); 判斷是否為一個字元串對象
12: angular.isElement(); 判斷是否為一個元素（标簽對象）
13: angular.version 擷取AngularJs的版本号
console.log(angular.version);
14:angular.equals(a,b); 比較是否相等
注意:
var a = NaN;
var b = NaN;
a==b; false
console.log(angular.equals(a,b)); //為true
15:angular.forEach(對象,回調函數,result);
對象:數組對象，集合對象,json對象...
回調函數有兩個參數:值,對象名(下标)
result:在回調函數中this代表它。
var json={
'name':'八重櫻',
'age' :'500'
var result={
angular.forEach(json,function(value,index){
console.log(index+":"+value);
this[index]=value;
this.love='卡蓮'
},result);
console.log(result);
16: angular.fromJson(); 将字元串轉換為json對象類似與JSON.parse();
var str = '{"name":"芽衣","age":"18"}';
//var json=JSON.parse(str);
var json = angular.fromJson(str);
console.log(json);
angular.toJson(); 将json對象轉化為字元串類似與JSON.stringify();
第二個參數,true.是否換行，可讀性高
//var str = JSON.stringify(json);
var str = angular.toJson(json,true);
console.log(str);
console.log(typeof(str));
17: angular.lowercase/uppercase 大小寫轉換
console.log(angular.lowercase('HELLO'));
console.log(angular.uppercase('hello'));
18: angular.bootstrap(綁定子產品的對象,[]) 動态初識化子產品 不使用ng-app
[] ---------->ng-app
['myApp']---->ng-app='myApp'
m1.controller('one',['$scope',function($scope) {
}])
m1.controller('two',['$scope',function($scope) {
document.onclick=function(){
angular.bootstrap(this,['myApp']);
}
$scope.$apply() 看執行個體!
setTimeout(function(){
$scope.name='ok';(值不會改變)
},2000);
setTimeout(function(){
$scope.$apply(function(){
$scope.name='ok';(值會改變)
});
}])
document.onclick=function(){
angular.module().run();//建立全局作用域的屬性
var m1 = angular.module('myApp', []);
m1.run(['$rootScope',function($rootScope){
$rootScope.name='Hello world';
}]);
console.log(m1);
自定義過濾器:
//讓字元串的首字母大寫
m1.filter('firstUpper',function(){
return function(str,num){
return str.charAt(0).toUpperCase()+str.substring(1)+num;
}
});
m1.controller('one',['$scope','$filter',function($scope,$filter) {
//$scope.name='Hello world';
$scope.name=$filter('firstUpper')('Hello world',2);
ng-repeat指令-----》in周遊集合
<li ng-repeat='data in dataList'>`data`</li>
var m1 = angular.module('myApp', []);
m1.controller('one',['$scope','$filter',function($scope,$filter) {
$scope.dataList=['姬子','琪雅娜','芽衣'];
表格例子：
<title>Document</title>
var m1 = angular.module('myApp', []);
//原始資料
var oData=[
{'name':'八重櫻','age':'500','phone':'134845','email':'cc.com'},{'name':'芽衣','age':'15','phone':'13455845','email':'cb.com'},{'name':'琪雅娜','age':'13','phone':'13455845','email':'ca.com'}
];
$scope.dataList=oData;
$scope.fn_sort=function(arg){
//開關
arguments.callee['fn_sort'+arg]=!arguments.callee['fn_sort'+arg];
//排序，第三個參數，控制從大---》小，小----->大
$scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['fn_sort'+arg]);
}
$scope.fn_serach = function(){
//過濾器
$scope.dataList=$filter('filter')(oData,$scope.seaVal);
</script>
</head>
<body>
<div ng-controller='one'>
<input type='text' ng-model='seaVal'/> <input type="button" value='搜尋' ng-click='fn_serach()'>
<hr/>
<table border='1'>
<tr>
<td ng-click='fn_sort("name")'>姓名</td>
<td ng-click='fn_sort("age")'>年齡</td>
<td>電話</td>
<td>郵箱</td>
</tr>
<tr ng-repeat='data in dataList'>
<td>`data`.`name`</td>
<td>`data`.`age`</td>
<td>`data`.`phone`</td>
<td>`data`.`email`</td>
</table>
</div>
</body>
</html>
事件指令
ng-click------------------->onclick
ng-mousedown--------------->onmousedown
其他都類似
差別在于，js原生的事件不支援{{}}表達式
ng-readonly ：輸入框等不是按鈕的禁用
ng-disabled:按鈕禁用
true:禁用
false:不禁用
ng-checked：是否選中
ng-value 和value
na-value='text'=======>value='`text`' //提高使用者體驗
$interval指令 用法類似setInterval()
禁用例子:
<title>ng-disabled</title>
//需要添加$interval
m1.controller('one',['$scope','$interval',function($scope,$interval) {
var now = 5;
$scope.text=now+'秒';
$scope.isDisabled=true;
/* 第一種，使用$apply
var setTime=setInterval(function(){
$scope.$apply(function(){
now--;
$scope.text=now+'秒';
if(now==0){
clearInterval(setTime);
$scope.isDisabled=false;
$scope.text='可以點選啦';
});
},1000);
*/
//第二種使用$interval指令 用法類似setInterval()
var setTime = $interval(function(){
now--;
$scope.text=now+'秒';
if(now==0){
$interval.cancel(setTime);
},1000);
}]);
<!-- 按鈕 ng-disabled
true :禁用
false :不禁用 -->
<input type='button' value='`text`' ng-disabled='isDisabled'/>
<!-- 輸入框 ng-readonly
<input type='text' value='`text`' ng-readonly='isDisabled'/>
<input type='checkbox' ng-value='text' ng-checked='isDisabled'/>
<!-- 資料顯示優化
ng-cloack:
原理；資料未解析前，div的display:none
資料解析後，div的display:block
ng-bind:适用用單個資料
ng-bind-template:适用用多個資料
-->
<div ng-cloack>`text`</div>
<code><</code><code>br</code><code>></code>
<div ng-bind='text'></div>
<div ng-bind-template='`text`,`text`'></div>
alert("1");
<!-- <div ng-controller='one'>`name`</div>
<div ng-controller='two'>`name`</div> -->
本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1929085，如需轉載請自行聯系原作者
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)