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

    咱們知道angular.js是基於mvc 的一款優秀js框架，它也有一套本身的路由機制，和asp.net mvc 路由不太同樣。asp.net mvc 的路由是經過不一樣的URL到不一樣的controller而後交給controller去呈現視圖。可是在angular.js則是須要提早指定一個module(ng-app)，而後去定義路由規則，經過不一樣的URL，來告訴ng-app 去加載哪一個頁面。再渲染到ng-view。經過angular.js路由的使用，能夠很容易實現頁面的局部刷新。更加高效的去建立一個單頁面的web 應用程序。

  本文就演示一下angular.js 的路由是如何在asp.net mvc 中實現的，後臺數據依然是用web api 來取得（參見 經過Web Api 和 Angular.js 構建單頁面的web 程序）。

首先建立asp.net mvc 程序，建立一個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 User
2     {
3         public int UserID { get; set; }
4         public string Name { get; set; }
5     }

這樣web api 就建立完畢了，接下來咱們就要在項目中引用angular.js 所須要的js 文件。能夠在nuget 中下載直接搜索anjular :

 安裝完成以後，項目中就會在scripts文件夾出現如下文件：

而後在新建 一個angularjs 文件夾添加兩個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 是模塊化的因此定義了一個userApp模塊， 在UserApp模塊中，咱們定義了路由和佈局模板。userApp的默認URL是/Home/index，即http://localhost:10554/Home/Index。跳轉到編輯用戶的路由是/Home/EditUser/:id 其中:id 是傳遞的參數，若是不知足這兩個路由的話就會跳轉到/Home/UserList 。我分別給每一個路由指定了路由對應的地址以及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 });

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

 這樣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 的那個模塊，這裏是userapp。app.js 中已經定義。ng-view 是告訴angular.js 這一塊來呈現view 。其中angular-route.js文件須要被引用，否則是不支持路由的。

而後咱們須要在home 文件夾新建UserList.cshtml 和EditUser.cshtml。

UserList.cshtml 代碼：

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <div style="width:500px; margin:20px auto;">
 6     <table class="table table-bordered table-hover">
 7         <thead>
 8             <tr>
 9                 ID
10             </tr>
11             <tr>
12                 UserName
13             </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}} 就是一個路由地址點擊的時候anjular.js 會檢查這個路由和那個路由相匹配而後跳轉到相應的url 中。

EditUser.cshtml 代碼：

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

效果以下：

首先咱們運行程序,一開始的時候的路由是/Home/Index 就會跳轉到/Home/UserList.cshtml 中

而後咱們點擊編輯：注意查看地址欄的地址：

經過/Home/EditUser/1 這個路由，angular.js 就會讓頁面跳轉到/Home/EditUser.cshtml 這個頁面。點擊保存成功。

 

 好了，這篇文章到此就結束了，關於angular.js 還有許多很是有意思的知識點，接下來我還會和你們分享。