The use of Angular.js Routing and templates in ASP.

First create an ASP. NET MVC program and create a Web API:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

 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                      &nbsP;                 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     } 

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

Where the user class:

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

So the Web API is created, and then we will refer to the JS file required by Angular.js in the project. You can download the direct search anjular in NuGet:

650) this.width=650; "src=" Http://images.cnitblog.com/blog/349270/201501/140116283701813.png "style=" border:none; height:auto;margin:0px;padding:0px; "/>

After the installation is complete, the following files appear in the Scripts folder in the project:

650) this.width=650; "src=" Http://images.cnitblog.com/blog/349270/201501/140118429337169.png "style=" border:none; height:auto;margin:0px;padding:0px; "/>

Then add two JS empty files in the new Angularjs folder: App.js and Controllers.js:

Where App.js code:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

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 }]); 

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

We know that anjular.js is modular, so we define a Userapp module, and in the Userapp module, we define the routing and layout templates. The default URL for Userapp is/home/index, which is http://localhost:10554/Home/Index. The route to the edit user is/home/edituser/:id where: ID is the passed parameter, and if the two routes are not met, the jump to/home/userlist. I assigned each route the address of the route and the controller separately.

Controllers.js Code:

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

 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&NBSP). 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 });

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

I have defined two Controller:userlistcontroller and Editusercontroller, and these two controllers are defined in the routes in app.js and must be consistent. Where Userlistcontroller is called the Web API to get a list of users, Editusercontroller is used to edit the user. $routeParams. ID is the parameter that gets passed in.

This JS file basically write well. And then see how the page is used with Angular.js.

Home/index.cshtml Code:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

1 <div ng-app= "Userapp" > 2 <div ng-view></div> 3 </div> 4 5 6 @section scripts{7 <SC Ript 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" & GT;</SCRIPT>11}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

Where Ng-app is to tell the page needs to load is the Anjular.js module, here is Userapp. already defined in App.js. Ng-view is telling angular.js this piece to present the view. Where the Angular-route.js file needs to be referenced, otherwise it is not supported for routing.

Then we need to create new userlist.cshtml and edituser.cshtml in the home folder.

Userlist.cshtml Code:

650) this.width= 650, "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

 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                  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>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

Which href= "#/home/edituser/{{user. UserID} is a routed address when Anjular.js checks that the route matches that route and jumps to the corresponding URL.

Edituser.cshtml Code:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

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= "Sav E () ">save</button>9 </div>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" border:none;margin:0px;padding:0px; "/>

The effect is as follows:

First we run the program, at the beginning of the route is/home/index will jump to/home/userlist.cshtml

650) this.width=650; "src=" Http://images.cnitblog.com/blog/349270/201501/140142546203205.png "style=" border:none; height:auto;margin:0px;padding:0px; "/>

Then we click on Edit: Note To view the address of the address bar:

650) this.width=650; "src=" Http://images.cnitblog.com/blog/349270/201501/140144052455795.png "style=" border:none; height:auto;margin:0px;padding:0px; "/>

By/HOME/EDITUSER/1 This route, Angular.js will let the page jump to the/home/edituser.cshtml page. Click Save to succeed.

650) this.width=650; "src=" Http://images.cnitblog.com/blog/349270/201501/140146105428716.png "style=" border:none; height:auto;margin:0px;padding:0px; "/>

The use of Angular.js Routing and templates in ASP.