學習了這麼多天的AngularJS，今天想從實戰的角度和你們分享一個簡單的Demo--用戶查詢系統，以鞏固以前所學知識。功能需求須要知足兩點 1.查詢全部用戶信息，並在前端展現 2.根據id查詢用戶信息，展現在前端。Ok，需求很簡單，那麼咱們就開始實現所提的功能需求。javascript

代碼框架

前端的代碼一般包含三部分：html, css, 和JavaScript，咱們使用html編寫視圖文件，css來進行視圖樣式控制，JS來實現控制器代碼。本文的重點在於AngularJS的回顧學習，使用簡單的html視圖便可，不會涉及很炫的CSS代碼編寫。本例的代碼的文件目錄結構很簡單，以下圖所示，分爲簡單的兩層目錄，UserMgt爲整個Demo的包名，JS目錄用於存儲第三方js代碼如angular.js，controller用於存儲咱們的控制器代碼，tml目錄存儲html前端文件， conf中用於存儲配置文件。css

----------UserMgthtml

-------------JS前端

-------------controllerjava

-------------tmldjango

-------------confjson

Code

本例中咱們引入angular.js和angular-route.js v1.2.20文件，放在咱們的JS目錄下。angularJS自身提供的route使用不夠方便，咱們使用第三方的angular-route框架進行路由分配。首先咱們須要編寫咱們前端的顯示界面。瀏覽器

1. index.html，代碼以下所示

<!DOCTYPE html> <!--定義AngularJS app--> <html ng-app="UserMgt"> <head> <meta charset="utf-8"/> <title>user mgt demo </title> </head> <body> <h1>用戶管理Demo</h1> <!--使用ng-show，代表咱們使用路由控制來管理頁面之間的跳轉 --> <div ng-view> loading... </div><!--視圖模板容器--> <!--引入ng-app所需的js文件--> <script type="text/javascript" src="../js/angular.js"></script> <script type="text/javascript" src="../js/angular-route.js"></script> <script type="text/javascript" src="../js/controller/mgt_controller.js"></script> </body> </html>

2.detail.html, 用於顯示一條用戶的數據信息，代碼以下所示

<table border="1"> <tr> <td>用戶名</td> <!--使用ng-model綁定item對象的username屬性--> <td><input type="text" ng-model="item.username"/></td> </tr> <tr> <td>男</td> <!--使用ng-model綁定item對象的gender屬性--> <td><input type="text" ng-model="item.gender"/></td> </tr> <tr>` <td>郵箱</td> <!--使用ng-model綁定item對象的email屬性--> <td><input type="text" ng-model="item.email"/></td> </tr> <tr> </tr> </table>

3. list.html用於顯示全部數據，code很簡單以下所示

<table border="1"> <tr> <!--設置表頭--> <td>用戶名</td> <td>性別</td> <td>郵箱</td> </tr> <!--使用ng-repeat，遍歷全部的user--> <tr ng-repeat="user in users"> <td>{{user.username}}</td> <td>{{user.gender}}</td> <td>{{user.email}}</td> </tr> </table>

4. mgt_controller.js，

<!--定義UserMgt Ajs模塊，模塊依賴ngRoute--> var umService = angular.module('UserMgt', ['ngRoute']); <!--路由定義--> umService.config( function ($routeProvider) { $routeProvider <!--項目打開默認調到list.html頁面，綁定ListController進行相應的控制--> .when('/', { controller: ListController, templateUrl: '../tml/list.html' }) <!--定義訪問url--> .when('/get/:id', { <!--定義綁定的控制器--> controller: GetController, <!--定義跳轉的頁面--> templateUrl: "../tml/detail.html" }) .otherwise({ <!--其餘狀況，指定url跳轉--> redirectTo: '/' }); } ) <!--ListController定義--> function ListController($scope, $http) { <!--獲取本地json資源文件--> $http.get('../conf/user.json').success(function (data) { <!--瀏覽器console端口打印讀取的數據--> console.log(data); $scope.users = data; }); } <!--GetController控制器定義--> function GetController($scope, $http, $routeParams) { var id = $routeParams.id; <!--獲取本地json資源文件--> $http.get('../conf/user.json').success(function (data) { console.log(data); $scope.item = data[id]; }); }

5. user.json中json中存儲以下的數據：

[
    { "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" }, { "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" }, { "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" }, { "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" }, { "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" }, { "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" } ]

angularJS獲取json數據（實戰）