2018/8/25 學習開始
ng-app="":初始化angular.js的管轄範圍可以命名區域
要angular起作用 ng-app中必須要註明，可以留空。
爲angular註明管理範圍
<div ng-app=""></div>
<body ng-app=""></body>
ng-init初始化數據，初始化後數據對整個頁面可見。
<body ng-app="test" >
<div ng-init="num=0"></div>
<input ng-model="num" >
<div>{{num}}</div>
</body>
<div>{{num}}</div>
以上結果所有位置輸出都是0
循環
<div ng-repeat="v in array"></div>
綁定數據
對於輸入框而言
<body ng-app="test" >
<input ng-model="num">
<div>{{num}}</div>
</body>
num就會跟隨輸入框的值變化而變化
ng-controller
app = angular.module("name0",{]);
app.controller("ctrl1" ,function($scope){
$scope.num=0;
})
<body ng-app="name0" ng-controller="ctrl1">
<input type="text" ng-model="num">
{{num}}
</body>
controller將Num初始化爲0,然後Num會跟隨輸入框內容的變化而變化。
深度監視：
$scope.$watch('arr',function(){
...
},true);//最後一個參數起深度監視的作用
數據交互
a.php
<?php
echo $_GET['a']+$_GET['b'];
?>
html
app = angular.moduel("name0",{]);
app.controller("ctrl1" ,function($scope){
$scope.num=0;
$http.get('a.php',{params:{a:12,b:5}}.success(function(result){
alert('成功了');
})).error(function(){
alert('失敗了');
})
})
<body ng-app="name0">
</body>
在新版本中http請求使用then來傳遞迴掉。方便管理
$http.get(...).then(function(res){},function(){})
timeout:
var timer = $timeout(function(){
$scope.a+=2;
},2000);
//等待兩秒後執行代碼
apply(和watch一起使用)
$scope.$apply();
//強制數據更新
請求數據
$http.get(url,params:{}.success(function(){}).error(function(){}))
$http.post(url,params:{}.success(function(){}).error(function(){}))
$http.jsonp(url,params:{}.success(function(){}).error(function(){}))
jsonp 請求：wd=,cb=用於請求JSON數據。
2018/8/26更新
filter-過濾器
輸出數據之前處理一下
<div ng-repeat = “v in arr”>{{v|currency}}</div>
<div ng-repeat = “v in arr”>{{v|date:"yyyy年MM月dd日 HH:mm:ss"}}</div>
自定義過濾器：
app.filter("名字",function(){
//初始化部分
return function(input){
//處理部分
return 'aaa';
}
})
2018/8/28更新
指令
功能：自定義標籤，自定義組件
restrict:
E Element 標籤
A Attribute屬性
C Class 類
M Comment 備註
template:
內容用法：
app.directive('名字',function(){
json = {
restrict:'A',
template:"<span>abc</span>"
}
return json;
})
佔位符：transclude:true嵌入模式打開時
原始內容放在佔位符裏(<ng-transclude></ng-transclude>)
2018/9/21
前端路由
在angular中有一個前端路由機制，目的是減少對服務器的請求次數。
我們訪問以下網站時
http://xxx.com/#!/first
http://xxx.com/#!/second
http://xxx.com/#!/third
首先，在對服務器請求時。請求的地址都是http://xxx.com/。控制顯示方式的位置在本地。
導入路由模塊：
app=angular.module("test",['ngRoute']);
使用$routeProvider.when來註明URL和顯示區域的關係
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機頁面'})
.otherwise({redirectTo:'/'});
加一個
<div ng-view></div>
當我們訪問以下鏈接時，ng-view的位置就會出現對應template中的內容。
按鈕觸發事件 ng-click的用法：
$scope.a=function(){
...
}
然後在需要的位置 ng-click = "a()"即可