Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to use AngularJS to develop a large-scale single-page application, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Introduction

(SPA) what does such a name imply? If you are a fan of the classic Seinfeld TV show, you must know the name Donna Chang. When Jerry met Donna, Donna was not actually Chinese, but because she was talking about her inherent impressions of China, such as her interest in acupuncture, and the occasional pronunciation of a word with a Chinese accent, she reduced her last name to Chang Donna to talk to George's mother on the phone and gave her some advice (by quoting Confucius). When George introduced Donna to her parents, George's mother realized that Donna was not Chinese, so she did not accept Donna's advice.

Single page reference (SPA) is defined as a single web page application, or website, designed to provide a smooth user experience close to a desktop application. In a SPA, all the necessary code-HTML, JavaScript, and CSS-is obtained when a single page is loaded, or related resources are dynamically loaded and added to the page 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 or transfer control to another page in the process. Interactions with single-page applications are often designed to interact dynamically with web servers located in the background.

How do you compare this technology to ASP.NET 's master page, Master Pages? It is true that ASP.NET 's master page allows 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 a group of pages) in the entire application. Then you can create separate pages of the content you want to display. When a user initiates a request for a content page, they mix the layout from the master page with the content from the content page to produce output.

When you delve into the differences between the implementation of SPA and ASP.NET master pages, you begin to realize that there are more similarities than differences-that is, SPA can be seen as a simple shell page containing content pages, just like a master page, but the shell pages in SPA cannot be reloaded and executed according to each new page request like the master page.

Maybe "single page app" is an unlucky name (like Donna Cheng) that makes you believe that this technology is not suitable for Web apps that need to be extended to the enterprise level and may include hundreds of pages and thousands of users.

Based on a single-page application, hundreds of pages of content are developed, including authentication, authorization, session state and other functions, which can support thousands of users of enterprise applications.

AngularJS-Overview

The sample of this article includes the functions of creating / following new user accounts, creating / updating customers and products. Moreover, it allows users to execute queries against all information, create and follow new sales orders. In order to implement these functions, the sample will be developed based on AngularJS. AngularJS is an open source Web application framework maintained by developers in the Google and AngularJS community.

AngularJS only needs HTML,CSS and JavaScript to create a single-page application on the client side. Its goal is to make it easier to develop and test and enhance the performance of MVC Web applications.

The library reads other custom tag attributes contained in the HTML; then it obeys the instructions of this custom attribute and combines the page's Imax O into the module generated by the standard JavaScript variable. The values of these JavaScript standard variables can be set manually or obtained from static or dynamic JSON data sources.

Getting started with AngularJS-shell pages, modules and routing

One of the first things you need to do is to download the AngularJS framework to your project, and you can get the framework from https://angularjs.org. The sample program in this article was developed using MS Visual Studio Web Express 2013 Edition, so I installed AngularJS from a Nuget package using the following command:

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 the core reference. This application will use the Web API 2 library to implement server-side requests for RESTful API.

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 to get the content page. In the beginning, the shell page only needs a reference to the team AngularJS JavaScript library and a ng-view to tell AngularJS where the content page needs to be rendered.

AngularJS Shell Page example Add New Customer Show Customers

In the shell page example above, several links map to AngularJS routes. The ng-view instruction on the div tag is an instruction that includes the selected routed rendered content page into the shell page to supplement AngularJS's $route service. Each time the current route changes, the included view changes according to the configuration of the $route service. For example, when the user selects the "Add New Customer" link, AngularJS renders the content used to add a new customer in the div where the ng-view is located. The rendered content is a HTML fragment.

The app.js file is also referenced by the shell page. The JavaScript in this file will create an AngularJS module for the application. In addition, all routing configurations for the application are also defined in this file. You can think of an 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 connects them. AngularJS applications do not have a main method, but let the module declaratively specify how the application is started and configured. The sample program in this article will have only 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 the routing of AngularJS as shown below. AngularJS's $routeProvider service accepts the when () method, which matches 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 gets a reference with a specific routing request content.

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

The AngularJS controller is nothing more than a native JavaScript function that is bound to a specific scope. The controller is used to add logic to your view. The view is the HTML page. These pages are just simple data presentation, and we will use two-way data binding to bind data to these HTML pages. It is the controller's responsibility to glue the model (that is, data) with the data.

Create

For the above AddCustomer template, the ng-controller instruction will refer to the JavaScript function customerController, which executes all data bindings 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-scalability issues

When I developed this strength program for this article, the first 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 shell page of the application be introduced and downloaded along with the startup of the application. For a large application, there may be hundreds of JavaScript files, so the situation will not look ideal. Another problem I encountered was the routing table of AngularJS. All the examples I found have hard-coded all routes for all content. And I really don't want a scheme that contains hundreds of routing records in the routing table.

After reading the above, do you have any further understanding of how to use AngularJS to develop a large-scale single-page application? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.