Develop a large-scale single-page application (SPA) using AngularJS - Technical Translation

Introduction

(SPA) What is contained in a name like this? If you are a fan of the classic Seinfeld TV show, then you must know the name Donna Chang. Jerry met with Donna. Donna was actually not Chinese, but because she was talking about her inherent impression of China, such as her interest in acupuncture, and accidentally pronounced a word with a Chinese accent, she shortened the last name of her name to Chang Donna talked 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, so she did not accept Donna's suggestion.

Single Page Reference (SPA), is defined as an application that aims to provide a desktop-like application A smooth user experience for a single web page application, or website. In a SPA, all required code – HTML, JavaScript, and CSS – is fetched when the single page loads, or related resources are dynamically loaded and Added to pages on demand, often in response to user actions. Although modern web technologies (such as those introduced in HTML5) provide the ability for independent logical pages in an application to perceive and navigate each other , the page does not reload any endpoints in the process, or transfer control to another page. Interaction with single-page applications is often designed to dynamically interact with the web server located in the background.

So take this How does this technology compare to ASP.NET's Master Pages? It's true that ASP.NET's Master Pages allow you to create a consistent layout for the pages in your application. A single master page can define the appearance and standard actions you want to apply to all pages (or groups of pages) in the entire application. You can then create separate pages for the content you want to display. . When a user initiates a request for a content page, they will mix the layout from the master page with the content from the content page to produce the output.

When you dig into SPA and ASP.NET master pages to achieve this When it comes to the differences between the two, you begin to realize that they are more similar than different - that is, the SPA can be regarded as a simple shell page that holds the content page, like a master page, it's just that the shell page in the SPA cannot be reloaded and executed on every new page request like the master page.

Maybe "Single Page Application" is an unlucky name (like Donna`Cheng) ), leading you to believe that this technology is not suitable for developing web applications that need to be expanded to the enterprise level and may include hundreds of pages and thousands of users.

The goal of this article is to develop an enterprise-level application with hundreds of pages of content based on a single-page application, including authentication, authorization, session state and other functions, which can support thousands of users.

AngularJS - Overview

The examples in this article include functions such as creating/new user accounts, creating/updating customers and products. Furthermore, it allows users to perform queries, create and follow up sales orders on all information. In order to implement these functions, this sample will be developed based on AngularJS. AngularJS is an open source web application framework maintained by developers from Google and the AngularJS community.

AngularJS can create single-page applications on the client side with just HTML, CSS and JavaScript. Its goal is to make development and testing easier and enhance the performance of MVC web applications.

This library reads other custom tag attributes contained in HTML; then obeys the instructions of this custom attribute and combines the I/O of the page into a module with standard JavaScript variable generation. 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 Routes

One of the first things you need to do is download the AngularJS framework into your project, you can download it from http ://www.php.cn/ Get the framework. The sample program in this article was developed using MS Visual Studio Web Express 2013 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 into the core references. This The application will use the Web API 2 library to implement server-side requests for RESTful APIs.

Now when you want to create a SPA application using AngularJS, the first two things to do are to set up a shell page and a routing table for getting the content page. At the beginning, the shell page only needs a team of AngularJS JavaScript libraries Reference, and an ng-view, to tell AngularJS where the content page needs to be rendered in the shell page.

<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Shell Page example</title>
</head>
<body> 
<p>
<ul>
<li><a href="#Customers/AddNewCustomer">Add New Customer</a></li>
<li><a href="#Customers/CustomerInquiry">Show Customers</a></li>
</ul>
</p>
<!-- ng-view directive to tell AngularJS where to inject content pages -->
<p ng-view></p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

In the shell page example above, several links are mapped to AngularJS routes. The ng-view directive on the p tag is a directive that can include the rendered content page of the selected route into the shell page to supplement AngularJS's $route service. Every time the current route changes, the included view will also be based on $ The configuration of the route service changes accordingly. For example, when the user selects the "Add New Customer" link, AngularJS will render the content for adding a new customer in the p where the ng-view is located. The rendered content is an HTML fragment .

The next app.js file is also referenced by the shell page. The JavaScript in this file will create the AngularJS module for the application. Additionally, all routing configuration for the application will be defined in this file. You can think of an AngularJS module as a container that encapsulates different parts of your application. Most applications will have a main method that initializes and connects different parts of the application. AngularJS applications, on the other hand, do not have a main method, instead letting modules declaratively specify how the application is started and configured. The sample application for this article will only have one AngularJS module, although there are several distinct parts of the application (customers, Products, Orders and Users).

Now, the main purpose of app.js is to set up AngularJS routing 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 independent page will be loaded into the shell page along with the controller file of the related content. . The controller file is simply a JavaScript file that will get a reference with the content of a specific route request.

//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for the application
sampleApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/Customers/AddNewCustomer', {
                templateUrl: 'Customers/AddNewCustomer.html',
                controller: 'AddNewCustomerController'
            }).
            when('/Customers/CustomerInquiry', {
                templateUrl: 'Customers/CustomerInquiry.html',
                controller: 'CustomerInquiryController'
            }).
            otherwise({
                redirectTo: '/Customers/AddNewCustomer'
            });
}]);

AngularJS controller

AngularJS controller is nothing more than a native JavaScript functions are just bound to a specific scope. Controllers are used to add logic to your views. Views are HTML pages. These pages are just for simple data display. We will use two-way data binding to bind data to these HTML pages. It is basically the responsibility of the controller to bond the model (that is, data) with the data.

<p ng-controller="customerController">
<input ng-model="FirstName" type="text" style="width: 300px" />
<input ng-model="LastName" type="text" style="width: 300px" />       
<p>
<button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>

For the AddCustomer template above, the ng-controller directive will reference the JavaScript function customerController, which will perform all data binding and JavaScript functions for the view.

function customerController($scope) 
{
    $scope.FirstName = "William";
    $scope.LastName = "Gates"; 

    $scope.createCustomer = function () {          
        var customer = $scope.createCustomerObject();
        customerService.createCustomer(customer, 
                        $scope.createCustomerCompleted, 
                        $scope.createCustomerError);
    }
}

Out of the box Ready to Use - Scalability Issues

As I was developing this powerhouse program for this article, the first two scalability issues became apparent when applying a single page application. In fact, out of the box, AngularJS requires that all JavaScript files and controllers in the application's shell page be introduced and downloaded at startup with the application. For a large application, there may be hundreds of them. JavaScript file, so the situation doesn't look very ideal. Another problem I encountered was AngularJS's routing table. All examples I've found have all routes hardcoded for everything. And what I want is not a solution that contains hundreds of routing records in the routing table.