angularJS入門小Demo2 【包含不用資料庫而用data.json格式響應前臺的ajax請求方式測試】
阿新 • • 發佈：2018-11-19
事件繫結：
<html> <head> <title>angularJS入門小demo-5 事件指令</title> <script src="angular.min.js"></script> <script> //建立模組 var app = angular.module("myApp",[]); //然後通過模組來建立控制器 app.controller("myController",function($scope){ $scope.add=function(){ //定義變數（以便在檢視中顯示） $scope.z = parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <!-- 現在要求在點選按鈕的時候觸發add方法 --> <body ng-app="myApp" ng-controller="myController"> 第一個數：<input ng-model="x"> 第二個數：<input ng-model="y"> <!-- 定義一個按鈕，繫結點選事件，呼叫控制器中的add方法 --> <!-- 用的就是單擊事件指令 ng-click --> <button ng-click="add()">運算</button> <!-- 取出變數z的值顯示--> 運算結果：{{z}} </body> </html>
==========
下面是迴圈陣列，就是說我們有一個數組，要把值迴圈顯示在頁面上：
<html> <head> <title>angularJS入門小demo-6 迴圈陣列</title> <script src="angular.min.js"></script> <script> //建立模組 var app = angular.module("myApp",[]); //然後通過模組來建立控制器 app.controller("myController",function($scope){ //定義一個數組 $scope.list = [102,203,394,555]; }); </script> </head> <!-- 現在要求在table中迴圈載入顯示list中的值--> <body ng-app="myApp" ng-controller="myController"> <table> <!-- 用 ng-repeat 指令迴圈 --> <!--其中list就是控制器中定義的list，x是在這自定義的變數程式碼元素 --> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
效果：
===
迴圈物件陣列：
<html> <head> <title>angularJS入門小demo-7 迴圈物件陣列</title> <script src="angular.min.js"></script> <script> //建立模組 var app = angular.module("myApp",[]); //然後通過模組來建立控制器 app.controller("myController",function($scope){ //定義一個數組，裡面存放物件 $scope.list = [ {name:'張三',shuxue:100,yuwen:100}, {name:'李四',shuxue:90,yuwen:92}, {name:'王五',shuxue:40,yuwen:50} ]; }); </script> </head> <!-- 現在要求在table中迴圈載入顯示list中的值--> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>數學</td> <td>語文</td> </tr> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
結果：
====
內建服務：
angular允許你新增服務，但是它也有一些內建服務，
內建服務就是提供一些功能，下面說的就是一個從後臺抓資料的功能，它傳送一個http請求，
上面的例子 demo7 的資料是前臺寫死的，下面我們要從後臺請求過來。。
因為要用後臺資料，所以需要一個web專案，隨便找一個web專案：
將下面三個檔案放在webapp下
data.json程式碼：
[
{"name":"張三","shuxue":100,"yuwen":100},
{"name":"李四","shuxue":90,"yuwen":92},
{"name":"王五","shuxue":40,"yuwen":50},
{"name":"趙六","shuxue":0,"yuwen":0}
]
//需要注意的是：這種json檔案的形式中的json資料要寫成嚴格json格式，
//就是key也必須用雙引號引起來，而且值如果是字串也必須用雙引號引起來
demo-8.html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angularJS入門小demo-8 內建服務 $http</title> <script src="angular.min.js"></script> <script> //建立模組 var app = angular.module("myApp",[]); //然後通過模組來建立控制器 //要用到$http服務，在建立控制器時就要在引數上注入（依賴注入） app.controller("myController",function($scope,$http){ //資料的話我們為了不用建立資料庫寫sql，可以用一種後端程式碼的方式 //建立 一個 data.json 以.json結尾的文字檔案，可以把資料寫到它裡面，然後瀏覽器就能訪問到了 //它也是通過ajax方式獲取的 //需要注意的是：這種json檔案的形式中的json資料要寫成嚴格json格式， //就是key也必須用雙引號引起來，而且值如果是字串也必須用雙引號引起來 $scope.findList = function(){ //$http.get("test/data.do"); 實際上這裡應該是個請求url //它實際上把 $http.get("data.json") 封裝成一個請求物件，如果請求成功了，呼叫success方法 $http.get("data.json").success( function(response){ //response就是從後臺請求來的資料 //定義變數 $scope.list=response; } ); } //這裡也可以用這句話來代替下面檢視中的 ng-init="findList" 實現自動呼叫方法載入資料 //$.scope.findList(); }); </script> </head> <!-- 用ng-init指令初始化控制器中的findList()方法 --> <body ng-app="myApp" ng-controller="myController" ng-init="findList()"> <table> <tr> <td>姓名</td> <td>數學</td> <td>語文</td> </tr> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
效果：
