Use of angular. js routing and templates in asp.net mvc

Use of angular. js routing and templates in asp.net mvc
We know that angular. js is an excellent js framework based on mvc. It also has its own routing mechanism, which is not the same as asp.net mvc routing. The routes of asp.net mvc are routed to different controllers through different URLs and then presented to the controller for the view. However, in angular. js, You need to specify a module (ng-app) in advance, define routing rules, and use different URLs to tell ng-app which page to load. Then render it to ng-view. Using angular. js routing, you can easily refresh the page. Create a single page web application more efficiently. This article demonstrates angular. how js routing is implemented in asp.net mvc, and background data is still obtained using web APIs (see through Web APIs and Angular. js to build a single-page web program ). First, create the asp.net mvc program and create a 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 pu Blic 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} among them, User class: 1 public class User2 {3 public int UserID {get; set;} 4 public string Na Me {get; set;} 5} is created, and the js file required by angular. js will be referenced in the project. You can download and search for anjular directly in nuget: After the installation is complete, the following file will appear in the scripts folder in the project: Then add two js Empty files in the new angularjs Folder: app. js and controllers. js: app. js Code: 1 var userapp = angular. module ("userapp", ['null']); 2 3 userapp. config (['$ routeProvider', function ($ routeProvider) {4 5 $ routeProvider. when ('/Home/Index', {templateUrl:'/Home/userlist', controller: 'userlistcontroller'}) 6. when ('/Home/EditUser/: id', {templateUrl:'/Hom E/edituser', controller: 'editusercontroller'}) 7. otherwise ({templateUrl: '/Home/userlist', controller: 'userlistcontroller'}); 8 9}]); we know anjular. js is modular, so it defines a userApp module. In the UserApp module, we define routing and layout templates. The default URL of userApp is/Home/index, that is, http: // localhost: 10554/Home/Index. The route to jump to the editing user is/Home/EditUser/: id, where: id is the passed parameter. If the two routes do not meet the requirements, they will jump to/Home/UserList. I have specified the corresponding address and controller for each route. Controllers. js Code: 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}); I have defined two controllers: userlistController and edituserController, which are in the app. the routes defined in js must be consistent. Here, userlistController calls the web api to obtain the user list, And edituserController is used to edit the user. $ RouteParams. id is used to obtain the passed parameters. In this way, the js file is basically written. Then we can see how the page works with angular. js. Home/Index. cshtml code: 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 indicates the module of anjular. js to be loaded on the page. Here userapp is used. It has been defined in app. js. Ng-view tells angular. js to present the view. Where the angular-route.js file needs to be referenced, otherwise routing is not supported. Create UserList. cshtml and EditUser. cshtml in the home folder. UserList. cshtml code: 1 @ {2 Layout = null; 3} 4 5 <div style = "width: 500px; margin: 20px auto; "> 6 <table class =" 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 </t R> 26 </table> 27 </div>, href = "#/Home/EditUser/{user. userID} is anjular when a route address is clicked. js checks that the route matches the route and jumps to the corresponding url. EditUser. cshtml code: 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-info "ng-click =" Save () "> Save </button> 9 </div>