angular.js的路由和模板在asp.net mvc 中的使用

首先創(chuàng)建asp.NET mvc 程序，創(chuàng)建一個(gè)web api :

 1 public class UserController : ApiController 2     { 3         private static List<User> userList = new List<User>() { 
 4                                       new User(){ UserID=1, Name="zhangsan"}, 5                                       new User(){UserID=2, Name="lisi"}, 6                                       new  User (){UserID=3, Name="wangwu"}, 7                                       new User(){ UserID=4,Name="zhaoliu"} 8         }; 9 10 11         public IEnumerable<User> Get()12         {13             return userList.OrderBy(p => p.UserID);14         }15 16         public User Get(int id)17         {18             return userList.Where(p => p.UserID.Equals(id)).FirstOrDefault();19         }20 21         public void Post(User user)22         {23             userList.Add(user);24         }25 26         public void Put(User user)27         {28          userList.Remove(userList.Where(p => p.UserID.Equals(user.UserID)).FirstOrDefault());29          userList.Add(user);30         }31 32     }

其中User 類：

1     public class User2     {3         public int UserID { get; set; }4         public string Name { get; set; }5     }

這樣web api 就創(chuàng)建完畢了，接下來我們就要在項(xiàng)目中引用angular.js 所需要的js 文件。可以在nuget 中下載直接搜索anjular :

 安裝完成之后，項(xiàng)目中就會(huì)在scripts文件夾出現(xiàn)以下文件：

然后在新建 一個(gè)AngularJS 文件夾添加兩個(gè)js空文件：app.js和controllers.js：

其中app.js 代碼：

1 var userapp = angular.module("userapp", ['ngRoute']);2 3 userapp.config(['$routeProvider', function ($routeProvider) {4 5     $routeProvider.when('/Home/index', { templateUrl: '/Home/UserList', controller: 'userlistController' })6                   .when('/Home/EditUser/:id', { templateUrl: '/Home/EditUser', controller: 'edituserController' })7                   .otherwise({ templateUrl: '/Home/UserList', controller: 'userlistController' });8 9 }]);

 我們知道anjular.js 是模塊化的所以定義了一個(gè)userApp模塊， 在UserApp模塊中，我們定義了路由和布局模板。userApp的默認(rèn)URL是/Home/index，即http://localhost:10554/Home/Index。跳轉(zhuǎn)到編輯用戶的路由是/Home/EditUser/:id 其中:id 是傳遞的參數(shù)，如果不滿足這兩個(gè)路由的話就會(huì)跳轉(zhuǎn)到/Home/UserList 。我分別給每個(gè)路由指定了路由對(duì)應(yīng)的地址以及controller。

controllers.js 代碼：

 1 userapp.controller('userlistController', function ($scope, $http) { 2  3     $scope.Users = []; 4  5     $scope.Load = function () { 6         $http.get("/api/user").success(function (data, status) { 7  8             $scope.Users = data; 9         })10 11     };12 20     $scope.Load();21 22 });23 24 25 userapp.controller('edituserController', function ($scope, $routeParams, $http) {26 27     $scope.UserID = $routeParams.id;28     $scope.User = {};29     $scope.Save = function () {30         $http.put("/api/user", { userid: $scope.User.UserID, name: $scope.User.Name }).success(function (data, status) {31            32         })33     };34 35     $http.get("/api/user/" + $scope.UserID).success(function (data, status) {36         $scope.User = data;37     })38 39 });

我定義了兩個(gè)controller :userlistController 和edituserController，這兩個(gè)controller 是在app.js中的路由中定義好的，必須一致。其中userlistController 是調(diào)用web api 來獲取用戶的列表，edituserController 是用來編輯用戶。$routeParams.id 是獲得傳遞過來的參數(shù)的。

 這樣js 文件基本寫好。然后看頁面是怎么和angular.js 來配合使用的。

Home/Index.cshtml 代碼：

 1 <div ng-app="userapp"> 2     <div ng-view></div> 3 </div> 4  5  6 @section scripts{ 7     <script src="~/Scripts/angular.min.js"></script> 8     <script src="~/Scripts/angular-route.js"></script> 9     <script src="~/angularjs/app.js"></script>10     <script src="~/angularjs/controllers.js"></script>11 }

其中ng-app 是告訴頁面需要加載的是anjular.js 的那個(gè)模塊，這里是userapp。app.js 中已經(jīng)定義。ng-view 是告訴angular.js 這一塊來呈現(xiàn)view 。其中angular-route.js文件需要被引用，不然是不支持路由的。

然后我們需要在home 文件夾新建UserList.cshtml 和EditUser.cshtml。

UserList.cshtml 代碼：

 1 @{ 2     Layout = null; 3 } 4  5 <div > 6     <table class="table table-bordered table-hover"> 7         <thead> 8             <tr> 9                 ID10             </tr>11             <tr>12                 UserName13             </tr>14         </thead>15         <tr ng-repeat="user in Users">16             <td>17                 `user`.`UserID`18             </td>19             <td>20                 `user`.`Name`21             </td>22             <td>23                 <a class="btn-link" href="#/Home/EditUser/`user`.`UserID`">Edit</a>24             </td>25         </tr>26     </table>27 </div>

其中href="#/Home/EditUser/`user`.`UserID` 就是一個(gè)路由地址點(diǎn)擊的時(shí)候anjular.js 會(huì)檢查這個(gè)路由和那個(gè)路由相匹配然后跳轉(zhuǎn)到相應(yīng)的url 中。

EditUser.cshtml 代碼：

1 @{2     Layout = null;3 }4 5 <div >6     Name:  <input ng-model="User.Name" />7     <br />8     <button class="btn btn-info" ng-click="Save()">Save</button>9 </div>

效果如下：

首先我們運(yùn)行程序,一開始的時(shí)候的路由是/Home/Index 就會(huì)跳轉(zhuǎn)到/Home/UserList.cshtml 中

然后我們點(diǎn)擊編輯：注意查看地址欄的地址：

通過/Home/EditUser/1 這個(gè)路由，angular.js 就會(huì)讓頁面跳轉(zhuǎn)到/Home/EditUser.cshtml 這個(gè)頁面。點(diǎn)擊保存成功。