AngularJS【初體驗】-02
阿新 • • 發佈：2017-06-16
rest 好的 ots consola set dex function module href 一、復習（數據重復報錯）
數據重復，val in list 這裏會報錯，所有加了一個東西在後面加track by $index
<li ng-repeat="num in nums track by $index">{{num}}</li>
二、作用域 根作用域對應的是ng-app所在標簽 scope是作用域的意思（相當於this） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
三、過濾器 在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。 下面的例子中date就是過濾器 日期 <dd>{{now|date:"yyyy-MM-dd hh:mm:ss"}}</dd>
排序方式 <dd>排序：{{orderBy|orderBy:‘age‘:true}}</dd>
四、自定義過濾器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|demo}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); //定義一個控制器 App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); // 定義一個指令directive App.directive(‘demo‘,function(){ }); // 定義一個過濾器filter //需要兩個參數，過濾器的名字，和依賴關系 App.filter(‘demo‘,function(){ // console.log(1); // 必須要返回一個函數 return function(arg){ // 再次完成數據格式化的邏輯並且Angularjs會將需要格式化處理的數據當成第一個參數傳遞進來 // console.log(arg); return ‘你好‘ +arg; } }); //上訴定義了最基本的過濾器，其使用方法與內置一樣 </script> </body> </html> 首字母大寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|capitalize}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); App.filter(‘capitalize‘,function(){ return function(input){ return input[0].toUpperCase()+input.slice(1); } }); </script> </body> </html>
五、依賴註入 AngularJS將一些通用的功能進行了封裝，開發者只需要根據自己的情況進行調用即可。 如果開發者想要使用AngularJS內部封裝好的通用的功能，必須先把他們加載進來，由此也便產生相互的依賴關系。 也就意味著我們必須有一個方法能夠很好的解決依賴關系。 define([‘jquery‘],function($){}); 上訴方法能夠很好的解決依賴關系 這種方法叫依賴註入 依賴+註入 通過註入的方式來解決依賴 以參數的形式傳遞到函數內部的過程稱為註入 行內式依賴註入： 在AngularJS中封裝了一個通用功能叫$scope，用來實現數據綁定 如果在現實開發當中，開發者想要將數據綁定到視圖上就必須用$scope 通過數組前面幾個單元來指定依賴關系，最後一個單元永遠是一個回調函數 在AngularJS中封裝一個通用功能 $rootScope，用來直接設置根作用域。 App.controller(‘DemoCtrl‘,[‘$scope‘,‘$rootScope‘,function($scope,$rootScope){ }]); 註入和依賴合並了。這裏的$scope即是聲明依賴也是註入依賴 App.controller(‘DemoCtrl‘,function($scope){ });
六、服務 服務是一個對象或函數，對外提供特定的功能 （一）、內置服務： 1、$log打印調試信息 AngularJS將調試信息封裝成了一個服務，開發過程中只需要調用這個服務即可 當前開發依賴一個$log的通用功能（服務） $log是一個對象，對外開放一些方法 App.controller(‘DemoCtrl‘,function($scope,$log){ $log.log(123); $log.info(123); $log.error(123); $log.warn(123); //可以通過配置服務將此功能打開 $log.debug(123); }); 2、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。 延時： App.controller(‘DemoCtrl‘,function($scope,$timeout){ $timeout(function(){ $scope.name="(^_?)☆o(′^｀)oo(╥﹏╥)oo(′^｀)o(??へ??╬)ψ(*｀ー′)ψ"; },3000); }); 計時： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{name|date:‘yyyy-MM-dd hh-mm-ss‘}}</h3></dd> <dd><button ng-click="stop()">停止</button></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$interval){ $scope.name=new Date(); var timer=$interval(function(){ $scope.name=new Date(); },1000); $scope.stop=function(){ $interval.cancel(timer);; }; }); </script> </body> </html> 3、$filter在控制器中格式化數據。 $filter是一個函數，並且可以接受一些參數，根據參數的不同過濾器所能處理的數據格式也不同。 ---- 代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{now}}</h3></dd> <dd><h3>{{price}}</h3></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$filter){ var date=$filter(‘date‘); var currency=$filter(‘currency‘); $scope.now=date(new Date(),‘yyyy-MM-dd hh-mm-ss‘); $scope.price=currency(12.3434); }); </script> </body> </html> 4、$http用於向服務端發起異步請求。 $http是一個函數 用法： $http([ url:‘‘,//請求地址 method:‘‘,//請求方式 data:‘‘,//post方式數據 params:‘‘,//get方式數據 //向服務器發送一些數據，根據請求方式不同，所使用的方法也不一樣 headers :{ //請求頭信息 ‘Content-Type‘:‘‘; } ]).then(function (data) { //成功後的回調 }，function( ) { //失敗後的回調 }); 小例子：無數據 html文件： App.controller(‘DemoCtrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) { $http({ url: ‘./example.php‘, method: ‘get‘ }).then(function (res) { $scope.users = res.data; }); }]); php文件： <?php $users = array( array(‘name‘=>‘小明‘, ‘age‘=>18), array(‘name‘=>‘小米‘, ‘age‘=>16), array(‘name‘=>‘小紅‘, ‘age‘=>17) ); echo json_encode($users); ?> 為什麽當post形式發送數據需要設置請求頭，是因為post的數據是以請求主體的方式傳遞的 當請求方式為get時是沒有請求主體的，所以請求頭部不是必須設置的 結論：我們是否需要設置我們的請求頭，其實參考的標準為數據是不是以請求主體的方式傳遞的。 Content-Type:"text/html"的含義：告訴服務器我現在使用哪個語言在跟你交流。 發送請求時，服務算對應接口有兩種類型： （1）soap類型
七、跨域 url同域的 XMLHttpRequest是可以使用的 url跨域的XMLHttpRequest是不可用的 JSONP反向代理 JSONP器本質是瀏覽器發送一個前端事先定義好的函數的名字，服務端獲取這個函數的名字，然後拼湊"()"將其返回。 在HTML之中有一些屬性，天然就支持跨域訪問，例如link下的href，還有img下的src，iframe的src 總之src和href屬性可以跨域 發起請求，請求地址只代表資源的位置與後綴無關。 如果發起請求，其實是在向服務器索要內容，服務器根據請求資源的後綴做出不同的結果。 如果請求的資源是純靜態的，服務器直接返回，如果請求資源是動態的(.php)，服務器會調用php的解析器，對php程序進行解析。服務器在將php解析器解析的結果返回給瀏覽器。
八、自定義服務 1、factory方法 需要兩個參數：1、服務的名稱2、依賴 App.factory(‘timer‘,[‘$scope‘,function($scope){ }]); //上訴代碼定義了基本的服務，要使用自定義服務與內置服務一致，要想是服務更有意義，返回值因為函數或對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{now}}{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); r App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function($scope, timer, showTime) { $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.factory(‘timer‘, [function () { return function () { console.log(‘返回值為函數‘); } }]); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { return { now: $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘), format: function (arg) { return $filter(‘date‘)(new Date(), arg); } } }]) </script> </body> </html> 2、service方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{name}}</h1> <h1>{{now}}</h1> <h1>{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function ($scope, timer, showTime) { $scope.name = timer.name; $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.service(‘timer‘, [function () { }]); App.service(‘showTime‘, [‘$filter‘, function ($filter) { this.now = $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘); this.format = function (arg) { return $filter(‘date‘)(new Date(), arg); } }]); </script> </body> </html> 一、復習（數據重復報錯） 數據重復，val in list 這裏會報錯，所有加了一個東西在後面加track by $index <li ng-repeat="num in nums track by $index">{{num}}</li>
二、作用域 根作用域對應的是ng-app所在標簽 scope是作用域的意思（相當於this） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App" ng-init="names=‘舒見佳‘"> <div class="box" ng-controller="DemoCtrl"> <h1>{{names}}</h1> <input type="button" value="電擊" ng-click="name()"> <div class="box1" ng-controller="DemoCtrl2"> <h1>{{names}}</h1> <input type="button" value="電擊" ng-click="name()"> </div> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=function(){ alert(‘!!!∑(?Д?ノ)ノψ(*｀ー′)ψ(??へ??╬)ヽ(ー_ー)ノ|??ω?` )‘); } }]); App.controller(‘DemoCtrl2‘,[‘$scope‘,function($scope){ // $scope.name=function(){ // alert(‘!!!∑(?Д?ノ)ノ‘); // } }]); </script> </body> </html>
三、過濾器 在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。 下面的例子中date就是過濾器 日期 <dd>{{now|date:"yyyy-MM-dd hh:mm:ss"}}</dd> 排序方式 <dd>排序：{{orderBy|orderBy:‘age‘:true}}</dd>![技術分享]()
篩選數據
<dd>篩選數據:{{obj|filter:{name:‘xiao‘} }}</dd>
註意要有空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body ng-app="App">
<dl ng-controller="DemoCtrl">
<dt>過濾器</dt>
<dd>{{now|date:"yyyy-MM-dd EEEE/EEE hh:mm:ss"}}</dd>
<dd>商品價格：{{price|currency:"￥":4}}</dd>
<dd>介紹：{{info|limitTo:-2}}</dd>
<dd>數組：{{list|limitTo:-2}}</dd>
<dd>小寫：{{lowercase|lowercase}}</dd>
<dd>大寫：{{uppercase|uppercase}}</dd>
<dd>數字格式：{{number|number:2}}</dd>
<dd>排序：{{orderBy|orderBy:‘‘:true}}</dd>
<dd>json:{{obj|json}}</dd>
<dd>篩選數據:{{objs|filter:‘p‘}}</dd>
<dd>連寫:{{uppercase|uppercase|limitTo:2}}</dd>
</dl>
<script>
var App=angular.module(‘App‘,[]);
App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){
$scope.now=new Date;
$scope.price=12.345;
$scope.info=‘jiajia‘;
$scope.list=[‘jiajia‘,‘shushu‘,‘jianjian‘];
$scope.lowercase=‘jiajia‘;
$scope.uppercase=‘jiJJia‘;
$scope.number=12.34322;
$scope.orderBy=[12,43,1,3,12,45,31,12,3];
$scope.obj={name:‘jiajia‘, json:‘shushu‘,papa:‘jianjian‘};
$scope.objs=[‘jiajiap‘,‘shushu‘,‘jianjian‘];
}]);
</script>
</body>
</html>
各種參數
1、currency[貨幣] 將數值格式化為貨幣格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。
3、filter在給定數組中選擇滿足條件的一個子集，並返回一個新數組，其條件可以是一個字符串、對象、函數
4、json將Javascrip對象轉成JSON字符串。
5、limitTo取出字符串或數組的前（正數）幾位或後（負數）幾位
6、lowercase將文本轉換成小寫格式
7、uppercase將文本轉換成大寫格式
8、number數字格式化，可控制小位位數
9、orderBy對數組進行排序，第2個參數是布爾值可控制方向(正序或倒序)
四、自定義過濾器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|demo}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); //定義一個控制器 App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); // 定義一個指令directive App.directive(‘demo‘,function(){ }); // 定義一個過濾器filter //需要兩個參數，過濾器的名字，和依賴關系 App.filter(‘demo‘,function(){ // console.log(1); // 必須要返回一個函數 return function(arg){ // 再次完成數據格式化的邏輯並且Angularjs會將需要格式化處理的數據當成第一個參數傳遞進來 // console.log(arg); return ‘你好‘ +arg; } }); //上訴定義了最基本的過濾器，其使用方法與內置一樣 </script> </body> </html> 首字母大寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|capitalize}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); App.filter(‘capitalize‘,function(){ return function(input){ return input[0].toUpperCase()+input.slice(1); } }); </script> </body> </html>
五、依賴註入 AngularJS將一些通用的功能進行了封裝，開發者只需要根據自己的情況進行調用即可。 如果開發者想要使用AngularJS內部封裝好的通用的功能，必須先把他們加載進來，由此也便產生相互的依賴關系。 也就意味著我們必須有一個方法能夠很好的解決依賴關系。 define([‘jquery‘],function($){}); 上訴方法能夠很好的解決依賴關系 這種方法叫依賴註入 依賴+註入 通過註入的方式來解決依賴 以參數的形式傳遞到函數內部的過程稱為註入 行內式依賴註入： 在AngularJS中封裝了一個通用功能叫$scope，用來實現數據綁定 如果在現實開發當中，開發者想要將數據綁定到視圖上就必須用$scope 通過數組前面幾個單元來指定依賴關系，最後一個單元永遠是一個回調函數 在AngularJS中封裝一個通用功能 $rootScope，用來直接設置根作用域。 App.controller(‘DemoCtrl‘,[‘$scope‘,‘$rootScope‘,function($scope,$rootScope){ }]); 註入和依賴合並了。這裏的$scope即是聲明依賴也是註入依賴 App.controller(‘DemoCtrl‘,function($scope){ });
六、服務 服務是一個對象或函數，對外提供特定的功能 （一）、內置服務： 1、$log打印調試信息 AngularJS將調試信息封裝成了一個服務，開發過程中只需要調用這個服務即可 當前開發依賴一個$log的通用功能（服務） $log是一個對象，對外開放一些方法 App.controller(‘DemoCtrl‘,function($scope,$log){ $log.log(123); $log.info(123); $log.error(123); $log.warn(123); //可以通過配置服務將此功能打開 $log.debug(123); }); 2、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。 延時： App.controller(‘DemoCtrl‘,function($scope,$timeout){ $timeout(function(){ $scope.name="(^_?)☆o(′^｀)oo(╥﹏╥)oo(′^｀)o(??へ??╬)ψ(*｀ー′)ψ"; },3000); }); 計時： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{name|date:‘yyyy-MM-dd hh-mm-ss‘}}</h3></dd> <dd><button ng-click="stop()">停止</button></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$interval){ $scope.name=new Date(); var timer=$interval(function(){ $scope.name=new Date(); },1000); $scope.stop=function(){ $interval.cancel(timer);; }; }); </script> </body> </html> 3、$filter在控制器中格式化數據。 $filter是一個函數，並且可以接受一些參數，根據參數的不同過濾器所能處理的數據格式也不同。 ---- 代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{now}}</h3></dd> <dd><h3>{{price}}</h3></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$filter){ var date=$filter(‘date‘); var currency=$filter(‘currency‘); $scope.now=date(new Date(),‘yyyy-MM-dd hh-mm-ss‘); $scope.price=currency(12.3434); }); </script> </body> </html> 4、$http用於向服務端發起異步請求。 $http是一個函數 用法： $http([ url:‘‘,//請求地址 method:‘‘,//請求方式 data:‘‘,//post方式數據 params:‘‘,//get方式數據 //向服務器發送一些數據，根據請求方式不同，所使用的方法也不一樣 headers :{ //請求頭信息 ‘Content-Type‘:‘‘; } ]).then(function (data) { //成功後的回調 }，function( ) { //失敗後的回調 }); 小例子：無數據 html文件： App.controller(‘DemoCtrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) { $http({ url: ‘./example.php‘, method: ‘get‘ }).then(function (res) { $scope.users = res.data; }); }]); php文件： <?php $users = array( array(‘name‘=>‘小明‘, ‘age‘=>18), array(‘name‘=>‘小米‘, ‘age‘=>16), array(‘name‘=>‘小紅‘, ‘age‘=>17) ); echo json_encode($users); ?> 為什麽當post形式發送數據需要設置請求頭，是因為post的數據是以請求主體的方式傳遞的 當請求方式為get時是沒有請求主體的，所以請求頭部不是必須設置的 結論：我們是否需要設置我們的請求頭，其實參考的標準為數據是不是以請求主體的方式傳遞的。 Content-Type:"text/html"的含義：告訴服務器我現在使用哪個語言在跟你交流。 發送請求時，服務算對應接口有兩種類型： （1）soap類型![技術分享]()
在jQuery中默認支持是soap類型。
（2）restfull類型
![技術分享]()
AngularJs默認支持的是restfull類型
服務器會根據我們的Content-Type值的不同，對數據的處理也不一樣。如果客戶端（瀏覽器）以Content-Type:‘application/x-www-form-urlencoded‘類型傳遞數據，在PHP中使用$_POST接受,
如果客戶端（瀏覽器）以Content-Type:‘application/json‘類型傳遞數據，在PHP中不能使用$_POST接受,
七、跨域 url同域的 XMLHttpRequest是可以使用的 url跨域的XMLHttpRequest是不可用的 JSONP反向代理 JSONP器本質是瀏覽器發送一個前端事先定義好的函數的名字，服務端獲取這個函數的名字，然後拼湊"()"將其返回。 在HTML之中有一些屬性，天然就支持跨域訪問，例如link下的href，還有img下的src，iframe的src 總之src和href屬性可以跨域 發起請求，請求地址只代表資源的位置與後綴無關。 如果發起請求，其實是在向服務器索要內容，服務器根據請求資源的後綴做出不同的結果。 如果請求的資源是純靜態的，服務器直接返回，如果請求資源是動態的(.php)，服務器會調用php的解析器，對php程序進行解析。服務器在將php解析器解析的結果返回給瀏覽器。
八、自定義服務 1、factory方法 需要兩個參數：1、服務的名稱2、依賴 App.factory(‘timer‘,[‘$scope‘,function($scope){ }]); //上訴代碼定義了基本的服務，要使用自定義服務與內置服務一致，要想是服務更有意義，返回值因為函數或對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{now}}{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); r App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function($scope, timer, showTime) { $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.factory(‘timer‘, [function () { return function () { console.log(‘返回值為函數‘); } }]); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { return { now: $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘), format: function (arg) { return $filter(‘date‘)(new Date(), arg); } } }]) </script> </body> </html> 2、service方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{name}}</h1> <h1>{{now}}</h1> <h1>{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function ($scope, timer, showTime) { $scope.name = timer.name; $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.service(‘timer‘, [function () { }]); App.service(‘showTime‘, [‘$filter‘, function ($filter) { this.now = $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘); this.format = function (arg) { return $filter(‘date‘)(new Date(), arg); } }]); </script> </body> </html>
二、作用域 根作用域對應的是ng-app所在標簽 scope是作用域的意思（相當於this） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
三、過濾器 在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。 下面的例子中date就是過濾器 日期 <dd>{{now|date:"yyyy-MM-dd hh:mm:ss"}}</dd>
排序方式 <dd>排序：{{orderBy|orderBy:‘age‘:true}}</dd>
篩選數據 <dd>篩選數據:{{obj|filter:{name:‘xiao‘} }}</dd> 註意要有空格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>過濾器</dt> <dd>{{now|date:"yyyy-MM-dd EEEE/EEE hh:mm:ss"}}</dd> <dd>商品價格：{{price|currency:"￥":4}}</dd> <dd>介紹：{{info|limitTo:-2}}</dd> <dd>數組：{{list|limitTo:-2}}</dd> <dd>小寫：{{lowercase|lowercase}}</dd> <dd>大寫：{{uppercase|uppercase}}</dd> <dd>數字格式：{{number|number:2}}</dd> <dd>排序：{{orderBy|orderBy:‘‘:true}}</dd> <dd>json:{{obj|json}}</dd> <dd>篩選數據:{{objs|filter:‘p‘}}</dd> <dd>連寫:{{uppercase|uppercase|limitTo:2}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.now=new Date; $scope.price=12.345; $scope.info=‘jiajia‘; $scope.list=[‘jiajia‘,‘shushu‘,‘jianjian‘]; $scope.lowercase=‘jiajia‘; $scope.uppercase=‘jiJJia‘; $scope.number=12.34322; $scope.orderBy=[12,43,1,3,12,45,31,12,3]; $scope.obj={name:‘jiajia‘, json:‘shushu‘,papa:‘jianjian‘}; $scope.objs=[‘jiajiap‘,‘shushu‘,‘jianjian‘]; }]); </script> </body> </html> 各種參數 1、currency[貨幣] 將數值格式化為貨幣格式 2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、時（H/h）、分（m）、秒（s）、毫秒（.sss），也可以組合到一起使用。 3、filter在給定數組中選擇滿足條件的一個子集，並返回一個新數組，其條件可以是一個字符串、對象、函數 4、json將Javascrip對象轉成JSON字符串。 5、limitTo取出字符串或數組的前（正數）幾位或後（負數）幾位 6、lowercase將文本轉換成小寫格式 7、uppercase將文本轉換成大寫格式 8、number數字格式化，可控制小位位數 9、orderBy對數組進行排序，第2個參數是布爾值可控制方向(正序或倒序)
四、自定義過濾器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|demo}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); //定義一個控制器 App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); // 定義一個指令directive App.directive(‘demo‘,function(){ }); // 定義一個過濾器filter //需要兩個參數，過濾器的名字，和依賴關系 App.filter(‘demo‘,function(){ // console.log(1); // 必須要返回一個函數 return function(arg){ // 再次完成數據格式化的邏輯並且Angularjs會將需要格式化處理的數據當成第一個參數傳遞進來 // console.log(arg); return ‘你好‘ +arg; } }); //上訴定義了最基本的過濾器，其使用方法與內置一樣 </script> </body> </html> 首字母大寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|capitalize}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); App.filter(‘capitalize‘,function(){ return function(input){ return input[0].toUpperCase()+input.slice(1); } }); </script> </body> </html>
五、依賴註入 AngularJS將一些通用的功能進行了封裝，開發者只需要根據自己的情況進行調用即可。 如果開發者想要使用AngularJS內部封裝好的通用的功能，必須先把他們加載進來，由此也便產生相互的依賴關系。 也就意味著我們必須有一個方法能夠很好的解決依賴關系。 define([‘jquery‘],function($){}); 上訴方法能夠很好的解決依賴關系 這種方法叫依賴註入 依賴+註入 通過註入的方式來解決依賴 以參數的形式傳遞到函數內部的過程稱為註入 行內式依賴註入： 在AngularJS中封裝了一個通用功能叫$scope，用來實現數據綁定 如果在現實開發當中，開發者想要將數據綁定到視圖上就必須用$scope 通過數組前面幾個單元來指定依賴關系，最後一個單元永遠是一個回調函數 在AngularJS中封裝一個通用功能 $rootScope，用來直接設置根作用域。 App.controller(‘DemoCtrl‘,[‘$scope‘,‘$rootScope‘,function($scope,$rootScope){ }]); 註入和依賴合並了。這裏的$scope即是聲明依賴也是註入依賴 App.controller(‘DemoCtrl‘,function($scope){ });
六、服務 服務是一個對象或函數，對外提供特定的功能 （一）、內置服務： 1、$log打印調試信息 AngularJS將調試信息封裝成了一個服務，開發過程中只需要調用這個服務即可 當前開發依賴一個$log的通用功能（服務） $log是一個對象，對外開放一些方法 App.controller(‘DemoCtrl‘,function($scope,$log){ $log.log(123); $log.info(123); $log.error(123); $log.warn(123); //可以通過配置服務將此功能打開 $log.debug(123); }); 2、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。 延時： App.controller(‘DemoCtrl‘,function($scope,$timeout){ $timeout(function(){ $scope.name="(^_?)☆o(′^｀)oo(╥﹏╥)oo(′^｀)o(??へ??╬)ψ(*｀ー′)ψ"; },3000); }); 計時： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{name|date:‘yyyy-MM-dd hh-mm-ss‘}}</h3></dd> <dd><button ng-click="stop()">停止</button></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$interval){ $scope.name=new Date(); var timer=$interval(function(){ $scope.name=new Date(); },1000); $scope.stop=function(){ $interval.cancel(timer);; }; }); </script> </body> </html> 3、$filter在控制器中格式化數據。 $filter是一個函數，並且可以接受一些參數，根據參數的不同過濾器所能處理的數據格式也不同。 ---- 代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{now}}</h3></dd> <dd><h3>{{price}}</h3></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$filter){ var date=$filter(‘date‘); var currency=$filter(‘currency‘); $scope.now=date(new Date(),‘yyyy-MM-dd hh-mm-ss‘); $scope.price=currency(12.3434); }); </script> </body> </html> 4、$http用於向服務端發起異步請求。 $http是一個函數 用法： $http([ url:‘‘,//請求地址 method:‘‘,//請求方式 data:‘‘,//post方式數據 params:‘‘,//get方式數據 //向服務器發送一些數據，根據請求方式不同，所使用的方法也不一樣 headers :{ //請求頭信息 ‘Content-Type‘:‘‘; } ]).then(function (data) { //成功後的回調 }，function( ) { //失敗後的回調 }); 小例子：無數據 html文件： App.controller(‘DemoCtrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) { $http({ url: ‘./example.php‘, method: ‘get‘ }).then(function (res) { $scope.users = res.data; }); }]); php文件： <?php $users = array( array(‘name‘=>‘小明‘, ‘age‘=>18), array(‘name‘=>‘小米‘, ‘age‘=>16), array(‘name‘=>‘小紅‘, ‘age‘=>17) ); echo json_encode($users); ?> 為什麽當post形式發送數據需要設置請求頭，是因為post的數據是以請求主體的方式傳遞的 當請求方式為get時是沒有請求主體的，所以請求頭部不是必須設置的 結論：我們是否需要設置我們的請求頭，其實參考的標準為數據是不是以請求主體的方式傳遞的。 Content-Type:"text/html"的含義：告訴服務器我現在使用哪個語言在跟你交流。 發送請求時，服務算對應接口有兩種類型： （1）soap類型
在jQuery中默認支持是soap類型。 （2）restfull類型
AngularJs默認支持的是restfull類型 服務器會根據我們的Content-Type值的不同，對數據的處理也不一樣。如果客戶端（瀏覽器）以Content-Type:‘application/x-www-form-urlencoded‘類型傳遞數據，在PHP中使用$_POST接受, 如果客戶端（瀏覽器）以Content-Type:‘application/json‘類型傳遞數據，在PHP中不能使用$_POST接受,
七、跨域 url同域的 XMLHttpRequest是可以使用的 url跨域的XMLHttpRequest是不可用的 JSONP反向代理 JSONP器本質是瀏覽器發送一個前端事先定義好的函數的名字，服務端獲取這個函數的名字，然後拼湊"()"將其返回。 在HTML之中有一些屬性，天然就支持跨域訪問，例如link下的href，還有img下的src，iframe的src 總之src和href屬性可以跨域 發起請求，請求地址只代表資源的位置與後綴無關。 如果發起請求，其實是在向服務器索要內容，服務器根據請求資源的後綴做出不同的結果。 如果請求的資源是純靜態的，服務器直接返回，如果請求資源是動態的(.php)，服務器會調用php的解析器，對php程序進行解析。服務器在將php解析器解析的結果返回給瀏覽器。
八、自定義服務 1、factory方法 需要兩個參數：1、服務的名稱2、依賴 App.factory(‘timer‘,[‘$scope‘,function($scope){ }]); //上訴代碼定義了基本的服務，要使用自定義服務與內置服務一致，要想是服務更有意義，返回值因為函數或對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{now}}{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); r App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function($scope, timer, showTime) { $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.factory(‘timer‘, [function () { return function () { console.log(‘返回值為函數‘); } }]); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { return { now: $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘), format: function (arg) { return $filter(‘date‘)(new Date(), arg); } } }]) </script> </body> </html> 2、service方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{name}}</h1> <h1>{{now}}</h1> <h1>{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function ($scope, timer, showTime) { $scope.name = timer.name; $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.service(‘timer‘, [function () { }]); App.service(‘showTime‘, [‘$filter‘, function ($filter) { this.now = $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘); this.format = function (arg) { return $filter(‘date‘)(new Date(), arg); } }]); </script> </body> </html> 一、復習（數據重復報錯） 數據重復，val in list 這裏會報錯，所有加了一個東西在後面加track by $index <li ng-repeat="num in nums track by $index">{{num}}</li>
二、作用域 根作用域對應的是ng-app所在標簽 scope是作用域的意思（相當於this） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App" ng-init="names=‘舒見佳‘"> <div class="box" ng-controller="DemoCtrl"> <h1>{{names}}</h1> <input type="button" value="電擊" ng-click="name()"> <div class="box1" ng-controller="DemoCtrl2"> <h1>{{names}}</h1> <input type="button" value="電擊" ng-click="name()"> </div> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=function(){ alert(‘!!!∑(?Д?ノ)ノψ(*｀ー′)ψ(??へ??╬)ヽ(ー_ー)ノ|??ω?` )‘); } }]); App.controller(‘DemoCtrl2‘,[‘$scope‘,function($scope){ // $scope.name=function(){ // alert(‘!!!∑(?Д?ノ)ノ‘); // } }]); </script> </body> </html>
三、過濾器 在AngularJS中使用過濾器格式化展示數據，在“{{}}”中使用“|”來調用過濾器，使用“:”傳遞參數。 下面的例子中date就是過濾器 日期 <dd>{{now|date:"yyyy-MM-dd hh:mm:ss"}}</dd> 排序方式 <dd>排序：{{orderBy|orderBy:‘age‘:true}}</dd>
四、自定義過濾器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|demo}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); //定義一個控制器 App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); // 定義一個指令directive App.directive(‘demo‘,function(){ }); // 定義一個過濾器filter //需要兩個參數，過濾器的名字，和依賴關系 App.filter(‘demo‘,function(){ // console.log(1); // 必須要返回一個函數 return function(arg){ // 再次完成數據格式化的邏輯並且Angularjs會將需要格式化處理的數據當成第一個參數傳遞進來 // console.log(arg); return ‘你好‘ +arg; } }); //上訴定義了最基本的過濾器，其使用方法與內置一樣 </script> </body> </html> 首字母大寫： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt>自定義過濾器</dt> <dd>{{name|capitalize}}</dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘itcast‘; }]); App.filter(‘capitalize‘,function(){ return function(input){ return input[0].toUpperCase()+input.slice(1); } }); </script> </body> </html>
五、依賴註入 AngularJS將一些通用的功能進行了封裝，開發者只需要根據自己的情況進行調用即可。 如果開發者想要使用AngularJS內部封裝好的通用的功能，必須先把他們加載進來，由此也便產生相互的依賴關系。 也就意味著我們必須有一個方法能夠很好的解決依賴關系。 define([‘jquery‘],function($){}); 上訴方法能夠很好的解決依賴關系 這種方法叫依賴註入 依賴+註入 通過註入的方式來解決依賴 以參數的形式傳遞到函數內部的過程稱為註入 行內式依賴註入： 在AngularJS中封裝了一個通用功能叫$scope，用來實現數據綁定 如果在現實開發當中，開發者想要將數據綁定到視圖上就必須用$scope 通過數組前面幾個單元來指定依賴關系，最後一個單元永遠是一個回調函數 在AngularJS中封裝一個通用功能 $rootScope，用來直接設置根作用域。 App.controller(‘DemoCtrl‘,[‘$scope‘,‘$rootScope‘,function($scope,$rootScope){ }]); 註入和依賴合並了。這裏的$scope即是聲明依賴也是註入依賴 App.controller(‘DemoCtrl‘,function($scope){ });
六、服務 服務是一個對象或函數，對外提供特定的功能 （一）、內置服務： 1、$log打印調試信息 AngularJS將調試信息封裝成了一個服務，開發過程中只需要調用這個服務即可 當前開發依賴一個$log的通用功能（服務） $log是一個對象，對外開放一些方法 App.controller(‘DemoCtrl‘,function($scope,$log){ $log.log(123); $log.info(123); $log.error(123); $log.warn(123); //可以通過配置服務將此功能打開 $log.debug(123); }); 2、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝。 延時： App.controller(‘DemoCtrl‘,function($scope,$timeout){ $timeout(function(){ $scope.name="(^_?)☆o(′^｀)oo(╥﹏╥)oo(′^｀)o(??へ??╬)ψ(*｀ー′)ψ"; },3000); }); 計時： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{name|date:‘yyyy-MM-dd hh-mm-ss‘}}</h3></dd> <dd><button ng-click="stop()">停止</button></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$interval){ $scope.name=new Date(); var timer=$interval(function(){ $scope.name=new Date(); },1000); $scope.stop=function(){ $interval.cancel(timer);; }; }); </script> </body> </html> 3、$filter在控制器中格式化數據。 $filter是一個函數，並且可以接受一些參數，根據參數的不同過濾器所能處理的數據格式也不同。 ---- 代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script> </head> <body ng-app="App"> <dl ng-controller="DemoCtrl"> <dt></dt> <dd><h3>{{now}}</h3></dd> <dd><h3>{{price}}</h3></dd> </dl> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,function($scope,$filter){ var date=$filter(‘date‘); var currency=$filter(‘currency‘); $scope.now=date(new Date(),‘yyyy-MM-dd hh-mm-ss‘); $scope.price=currency(12.3434); }); </script> </body> </html> 4、$http用於向服務端發起異步請求。 $http是一個函數 用法： $http([ url:‘‘,//請求地址 method:‘‘,//請求方式 data:‘‘,//post方式數據 params:‘‘,//get方式數據 //向服務器發送一些數據，根據請求方式不同，所使用的方法也不一樣 headers :{ //請求頭信息 ‘Content-Type‘:‘‘; } ]).then(function (data) { //成功後的回調 }，function( ) { //失敗後的回調 }); 小例子：無數據 html文件： App.controller(‘DemoCtrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) { $http({ url: ‘./example.php‘, method: ‘get‘ }).then(function (res) { $scope.users = res.data; }); }]); php文件： <?php $users = array( array(‘name‘=>‘小明‘, ‘age‘=>18), array(‘name‘=>‘小米‘, ‘age‘=>16), array(‘name‘=>‘小紅‘, ‘age‘=>17) ); echo json_encode($users); ?> 為什麽當post形式發送數據需要設置請求頭，是因為post的數據是以請求主體的方式傳遞的 當請求方式為get時是沒有請求主體的，所以請求頭部不是必須設置的 結論：我們是否需要設置我們的請求頭，其實參考的標準為數據是不是以請求主體的方式傳遞的。 Content-Type:"text/html"的含義：告訴服務器我現在使用哪個語言在跟你交流。 發送請求時，服務算對應接口有兩種類型： （1）soap類型
七、跨域 url同域的 XMLHttpRequest是可以使用的 url跨域的XMLHttpRequest是不可用的 JSONP反向代理 JSONP器本質是瀏覽器發送一個前端事先定義好的函數的名字，服務端獲取這個函數的名字，然後拼湊"()"將其返回。 在HTML之中有一些屬性，天然就支持跨域訪問，例如link下的href，還有img下的src，iframe的src 總之src和href屬性可以跨域 發起請求，請求地址只代表資源的位置與後綴無關。 如果發起請求，其實是在向服務器索要內容，服務器根據請求資源的後綴做出不同的結果。 如果請求的資源是純靜態的，服務器直接返回，如果請求資源是動態的(.php)，服務器會調用php的解析器，對php程序進行解析。服務器在將php解析器解析的結果返回給瀏覽器。
八、自定義服務 1、factory方法 需要兩個參數：1、服務的名稱2、依賴 App.factory(‘timer‘,[‘$scope‘,function($scope){ }]); //上訴代碼定義了基本的服務，要使用自定義服務與內置服務一致，要想是服務更有意義，返回值因為函數或對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{now}}{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); r App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function($scope, timer, showTime) { $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.factory(‘timer‘, [function () { return function () { console.log(‘返回值為函數‘); } }]); App.factory(‘showTime‘, [‘$filter‘, function ($filter) { return { now: $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘), format: function (arg) { return $filter(‘date‘)(new Date(), arg); } } }]) </script> </body> </html> 2、service方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS 自定義服務</title> <script src="./libs/angular.min.js"></script> </head> <body ng-app="App"> <div ng-controller="DemoCtrl"> <h1>{{name}}</h1> <h1>{{now}}</h1> <h1>{{time}}</h1> </div> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoCtrl‘, [‘$scope‘, ‘timer‘, ‘showTime‘, function ($scope, timer, showTime) { $scope.name = timer.name; $scope.now = showTime.now; $scope.time = showTime.format(‘hh:mm:ss‘); }]) App.service(‘timer‘, [function () { }]); App.service(‘showTime‘, [‘$filter‘, function ($filter) { this.now = $filter(‘date‘)(new Date(), ‘yyyy-MM-dd‘); this.format = function (arg) { return $filter(‘date‘)(new Date(), arg); } }]); </script> </body> </html>
AngularJS【初體驗】-02