Building a single-page Web program through Web APIs and Angular.js

In a traditional Web application, the browser sends a request to the server, and then the server sends the HTML to the browser based on the request, and the response affects the entire page, for example, the user navigates to a page through a connection, sends a request to the server side, The server will then send a new page to the browser.
However, in a single-page application, the entire page is only loaded when the browser starts the request, the next request, the interaction request is done through Ajax, which means that only a portion of the page will be updated, does not need to load the entire page, which reduces the response time for user actions, This allows the user to have a smoother experience. But in traditional Web applications, there is no such architecture, but emerging technologies such as Web APIs, Angular.js, etc., are easy to design and implement for single-page Web applications. Is the principle of a single-page program:

This article shows you how to create a Web application through the Web API and Angular.js.

First Open vs 2013 and then create a new ASP. Note The Web API option,

Create a new user class in the Models folder:

1      Public class User 2     {3public         intgetset;} 4          Public string Get Set ; } 5     }

Then create a Web Api:usercontroller, this article shows how to load and add data, I believe if you read this article, update and delete will do.

1      Public classUsercontroller:apicontroller2     {3         Private StaticList<user> userlist =NewList<user>() { 4                                       NewUser () {userid=1, name="Zhangsan"},5                                       NewUser () {userid=2, name="Lisi"},6                                       NewUser () {userid=3, name="Wangwu"},7                                       NewUser () {userid=4, name="Zhaoliu"}8         };9 Ten  One          PublicIenumerable<user>Get () A         { -             returnuserlist; -         } the          Public voidPost (user user) -         { - userlist.add (user); -         } +  -}

Next we need to use Anjular.js to create the interface, first we need to install the angular.js. Angular.js is an open-source, MVC-based JavaScript framework that enables better development and testing of Web applications. We can use the VS Package management tool to install Angualr.js. View > Other Windows > Package Manager Console Enter the code to install Angular.js:

After successful, the Scripts folder will have anjular.js related files. We know anjular.js based on MVC first we create a new controller in the scripts folder named Appcontroller.js

1 varAppmodule = Angular.module (' app ', []);//angular is modular, so first we need to instantiate a module2 3 //Create a controller4Appmodule.controller (' AppController ',function($scope, $http) {5 6$scope. UserID = ';7$scope. Name = ' ';8$scope. Users = [];9$scope. Load =function () {Ten  One$http. Get ("/api/user"). Success (function(data, status) { A  -$scope. Users =data; -         }) the  -     }; -  -$scope. AddUser =function () { +  -$http. Post ("/api/user", {userid: $scope. UserID, Name: $scope. Name}). Success (function(data, status) { + $scope. Load (); A         }) at     }; -  - $scope. Load (); -      -});

Then the code for the view:

1 @{2 viewbag.title = "Home page";3 }4 5 <DivNg-app= "App">6 7     <DivNg-controller= "AppController">8         <Table>9             <caption>ADD User</caption>Ten             <TR><TD>User ID</TD><TD>Name</TD></TR> One             <TR> A                 <TD><inputtype= "text"Ng-model= "UserID"placeholder= "Input the user ID" /></TD> -                 <TD><inputtype= "text"Ng-model= "Name"placeholder= "Input the user name" /> </TD> -             </TR> the             <TR> -                 <TD> -                     <ButtonNg-click= "AddUser ()">ADD User</Button> -                 </TD> +             </TR> -         </Table> +  A         <Tableclass= "Table table-bordered table-hover"> at             <caption>User List</caption> -             <thead> -                 <TR> -                     <th>User ID</th> -                     <th>Name</th> -                 </TR> in             </thead> -             <tbody> to  +                 <TRng-repeat= "User in Users"> -                     <TD> the {User.} UserID}} *                     </TD> $                     <TD>Panax Notoginseng {User.} Name}} -                     </TD>            the                 </TR>          +             </tbody> A         </Table> the     </Div> + </Div> - @section scripts{ $     <Scriptsrc= "~/scripts/angular.js"></Script> $     <Scriptsrc= "~/scripts/appcontroller.js"></Script> -}

Where the code:

Ng-app: This is the module that tells Angular.js which Dom's root element to use.

Ng-controller: is to tell Angular.js which DOM element is using this controller.

Ng-click: Indicates which function is called when the user clicks.

{{}}: This is the syntax for data binding.

Effect

Summarize:

I am also a preliminary study anjular.js. It feels a bit like knockout.js. In fact, learning these is not difficult, as long as the principle of mastering it, familiar with its grammar. I believe I can get started quickly. Anjular.js is to support two-way binding, its good multi-function has not been detailed understanding, will be shared later. Anyway, we don't need to do some DOM manipulation and write some redundant code.

Building a single-page Web program through Web APIs and Angular.js