Use AngularJS to develop a large-scale single page application (SPA)

The goal of this article is to develop hundreds of pages of content based on a single-page application, including authentication, authorization, session state and other features that can support the enterprise applications of thousands of users.

Download source code

Introduced

(SPA) What does a name contain? If you are a fan of the classic Seinfeld TV show, then you must know the name Donna Chang. Jerry and Donna meet, Donna is not actually Chinese, but because of the inherent impression on China, such as the interest in acupuncture, as well as the occasional word pronunciation with a little Chinese accent, she reduced her name at the end of Chang Donna She spoke to George's mother on the phone and gave her some advice (by quoting Confucius). When George introduced Donna to his parents, George's mother realized that Donna was not Chinese and therefore did not accept Donna's advice.

Single page reference (SPA), defined as a single Web page application, or Web site, that is designed to provide a smooth user experience near a desktop application. In a spa, all the required code –html, JavaScript, and css– are obtained when a single page is loaded, or the associated resources are dynamically loaded and added to the page as needed, often in response to user actions. While modern web technologies, such as those introduced in HTML5, provide the ability to perceive and navigate each other's own logical pages in an application, the page does not reload any endpoints in the process, or transfer control to another page. Interactions with single-page applications are often designed to interact dynamically with Web servers that are located in the background.

What about this technology compared to the master pages of ASP. Admittedly, the master page of ASP allows you to create an all-in-one layout for the pages in your application. A separate master page defines the appearance and standard actions that you want to apply across all pages (or a set of pages) throughout your application. Then you can create the individual pages of the content you want to show. When a user initiates a request for a content page, they mix the layout from the master page and the content from the content page to produce output.

When you delve into the difference between spa and ASP. NET Master pages, you begin to realize that there are more similarities between them than in different places-the spa can be seen as a simple shell page that contains a content page, like a master page, Just the shell page in the spa cannot be reloaded and executed as a master page, based on each new page request.

Perhaps a "single page app" is an unlucky name (like Donna's) that makes you believe that this technology is not suitable for developing Web applications that need to be extended to the enterprise level, potentially containing hundreds of pages, and thousands of of users.

The goal of this article is to develop hundreds of pages of content based on a single-page application, including authentication, authorization, session state and other features that can support the enterprise applications of thousands of users.

AngularJS-Overview

The examples in this article include the ability to create/follow new user accounts, create/update customers and products. It also allows users to execute queries against all information, create and follow new sales orders. To implement these features, the sample will be developed based on AngularJS . AngularJS is an open-source Web application framework maintained by developers in the Google and AngularJS communities.

Angularjs only requires html,css and JavaScript to create a single page app on the client. Its goal is to develop and test more easily and enhance the performance of MVC Web applications.

This library reads the other custom tag attributes contained in the HTML, and then obeys the instructions for this custom attribute, combining the I/O of the page with the module generated by the standard JavaScript variable. The values of these JavaScript standard variables can be set manually or obtained from a static or dynamic JSON data source.

Getting started with Angularjs-shell pages, modules and routing

The first thing you need to do is talk about the ANGULARJS framework downloaded to your project, and you can get the framework from https://angularjs.org. The sample program for this article was developed using MS Visual Studio Web Express Edition, so I used the following command to install Angularjs from a NuGet package:

Install-package angularjs-version 1.2.21

On the nuget package Management Console . To keep it simple and flexible, I created an empty Visual Studio Web application project and selected the Microsoft Web API 2 Library as a core reference. This application will use the Web API 2 library to implement server-side requests for RESTful APIs.

Now when you're going to use ANGULARJS to create a spa app, the first two things to do is set up a shell page and a routing table to get the content page. At the beginning, the shell page only needed a reference to a team Angularjs JavaScript library, and a ng-view to tell the Angularjs content page to be rendered in that place on the shell page.

2. <! DOCTYPE HTML>
4. <HTML lang="en">
6. <head>
8. <title>angularjs Shell Page example</title>
10. </head>
12. <body>
14. <div>
16. <ul>
18. <li><< Span class= "Tag-name" >a href= "#Customers/ Addnewcustomer ">add new customer</a ></li>&NBSP;
20. <li><a href="#Customers/customerinquiry">show Customers</A ></li>
22. </ul>
24. </div>
26. <!--ng-view directive to tell AngularJS where to inject content pages--
28. <div Ng-view></div>
30. <script src="Http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </Script>
32. <script src="App.js"></script>
34. </body>
36. </html>

In the example of the shell page above, several links are mapped to the ANGULARJS route. The ng-view instruction on the div tag is an instruction that can include the rendered content page of the selected route to the Shell page to supplement the Angularjs $route service. Each time the current route changes, the included view will change depending on the configuration of the $route service. For example, when the user selects the "Add New Customer" link, AngularJS renders the content for adding a new customer in the div where Ng-view is located. The rendered content is an HTML fragment.

The App.js file is also referenced by the shell page. The JavaScript in this file will create the Angularjs module for the application. In addition, all of the application's routing configuration is defined in this file. You can think of a angularjs module as a container that encapsulates different parts of your application. Most applications have a Main method that initializes different parts of the application and ties them together. The ANGULARJS application does not have a master method, but rather allows the module to declaratively specify how the application is started and configured. The sample program for this article will only have one ANGULARJS module, although there are several distinct parts in the application (customer, product, order, and user).

Now, the main purpose of App.js is to set the route for Angularjs, as shown below. Angularjs's $routeProvider service will accept the When () method, which will match a pattern for a URI . When a match is found, the HTML content of the standalone page is loaded into the shell page along with the controller file for the relevant content. The controller file is simply a JavaScript file that will get a reference with the content of a particular routing request.

2. Define an angular module for our app
4. var SampleApp = Angular.module (&apos;sampleapp&apos;, []);
6. Define Routing for the application
8. Sampleapp.config ([&apos; $routeProvider &apos;
10. function ($routeProvider) {
12. $routeProvider.
14. When (&apos;/customers/addnewcustomer&apos;, {
16. Templateurl: &apos; Customers/addnewcustomer.html&apos;,
18. Controller: &apos; addnewcustomercontroller&apos;
20. }).
22. When (&apos;/customers/customerinquiry&apos;, {
24. Templateurl: &apos; Customers/customerinquiry.html&apos;,
26. Controller: &apos; customerinquirycontroller&apos;
28. }).
30. Otherwise ({
32. Redirectto: &apos;/Customers/AddNewCustomer&apos;
34. });
36. }]);

AngularJS's Controller

The AngularJS controller is nothing more than a native JavaScript function, but is bound to a specific scope. The controller is used to add logic to your view. A view is an HTML page. These pages just do simple data presentation work, and we use two-way data binding to bind data to these HTML pages. The basic mountain is the controller's responsibility to glue the model (i.e. data) to the data.

2. <div ng-controller="Customercontroller">
4. <input ng-model="FirstName" type="text" style="width:300px" />
6. <input ng-model="LastName" type="text" style="width:300px" />
8. <div>
10. <button class="btn btn-primary btn-large" ng-click="CreateCustomer ()" />create </button>

For the Addcustomer template above, the Ng-controller directive will refer to the JavaScript function Customercontroller, which performs all data binding and JavaScript functions for that view.

2. function Customercontroller ($scope)
4. {
6. $scope.  FirstName = "William";
8. $scope.   LastName = "Gates";
12. $scope. CreateCustomer = function () {
14. var customer = $scope. Createcustomerobject ();
16. Customerservice.createcustomer (Customer,
18. $scope. createcustomercompleted,
20. $scope. Createcustomererror);
22. }
24. }

Out-of-the-box-scalability issues

When I developed this strength program for this article, the top two extensibility issues became apparent when applying a single-page application. In fact, an out-of-the-box, ANGULARJS requires that all JavaScript files and controllers in the application's shell page are introduced and downloaded with the launch of the application. For a large application, there might be hundreds of JavaScript files, which would not seem ideal. Another problem I encountered was the ANGULARJS routing table. All of the examples I found have hard-coded all routes for all content. And I want to be really not a scenario that contains hundreds of routing records in the routing table.

English Original: Developing a Large scale application with a single Page application (SPA) using AngularJS

Link: http://www.oschina.net/translate/developing-a-large-scale-application-with-a-single

"Editor's recommendation"

1. Debug AngularJS application via terminal
2. angularjs--using modules to organize your code
3. angularjs– implementation of role-based access control GUI
4. 3 ANGULARJS instructions to improve the user experience
5. How to access external APIs with ANGULARJS services

Use AngularJS to develop a large-scale single page application (SPA)