Home > Developer > Web Develop
Original address:Http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single
Crossing, please do not spray
Introduction:
...
Single page application (SPA), defined as on a separate page?? Provides sites that are similar to the desktop application-level user experience. At Spa, basically all the code-such as Html,javascript and CSS-is loaded dynamically in response to user actions. The page is not refreshed at any time, nor does it jump to another page, but modern web technologies such as HTML5 can provide navigation like separate pages. Single-page applications often need to interact dynamically with the background Web server.
...
The goal of this article is to develop an enterprise-level single-page application that can support a large number of users, including authentication, authorization, and answering functions.
Overview - AngularJS
The sample application for this article contains create and update user accounts, create and update customer and product features. In addition, the application allows you to query, create, and update sales orders. The sample application will be built using ANGULARJS. Angularjs is an open source Web application framework whose communities are maintained by Google.
ANGULARJS enables you to create a single-page application that only includes client-side scripts such as Html,css and JavaScript. Its goal is to enhance the ability of the Web application's model-View-Controller (MVC) to make development and testing easier.
The library reads the properties of custom tags in HTML, and through these custom attributes, binds the JavaScript model variables of the input and output functions. These JavaScript variables can be set manually or retrieved from JSON.
Angularjs Getting Started-Templates page, module, routing
The first thing you need to do is download the ANGULARJS framework into the project. You can have the Angularjs frame in https://angularjs.org. The sample application for this article uses Web Express to develop, so here are the ANGULARJS packages installed through NuGet ...
I created an empty visual Studio Web application project and selected the Microsoft Web API 2 Library. This application will use the Web API 2 library to provide RESTful interface services.
Now, you need to do two things to build a Angularjs single-page application: Create a template page and set up related routes. First, the template page only needs a reference to the Angularjs JavaScript library and increases the ng-view instruction to tell Angularjs where other content needs to be loaded.
<!DOCTYPE HTML><HTMLLang= "en"><Head><title>AngularJS Shell Page Example</title></Head><Body> <Div><ul><Li><ahref= "#Customers/addnewcustomer">ADD New Customer</a></Li><Li><ahref= "#Customers/customerinquiry">Show Customers</a></Li></ul></Div><!--ng-view directive to tell AngularJS where to inject content pages -<DivNg-view></Div><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></Script><Scriptsrc= "App.js"></Script></Body></HTML>
In the template page above, the link is mapped to the ANGULARJS route. The ng-view directive in the div tag loads different content into the template page through the Angularjs $route service . For example, if the user chooses the "Add New Customer" link, Angularjs will insert the added customer's content into the div tag where the ng-view instruction exists. The rendered content is part of the HTML page.
At the same time App.js JavaScript also needs to be referenced in the template. This JS file will create a ANGULARJS module for the application. In addition, the routing configuration will also be defined in this file. You can use the Angularjs module as a different part of an application. The ANGULARJS application does not have a main method. The module needs to declare how the specified application is configured. The sample application for this article will have only one ANGULARJS module, which contains several different parts of the application such as customers, products, orders, and users.
Now, the main purpose of the following App.js file is to establish a angularjs route. AngularJS $routeProvider The service uses the When () method to match the URI. When the match succeeds, part of the HTML content of the page is loaded into the template page and associated with the corresponding controller file. The controller file is simple, which is the JavaScript file that handles the specified routing request.
//Define an angular module for our appvarSampleApp = Angular.module (' SampleApp '), []);//Define Routing for the applicationSampleapp.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 Controllers
The ANGULARJS controller is a JavaScript function. The controller is used to add business logic to your view. The view is an HTML page. These pages will show data that is bound by two-way data. The controller is responsible for transmitting the data to the view.
<DivNg-controller= "Customercontroller"><inputNg-model= "FirstName"type= "text"style= "width:300px" /><inputNg-model= "LastName"type= "text"style= "width:300px" /> <Div><Buttonclass= "btn btn-primary btn-large"Ng-click= "CreateCustomer ()"/>Create</Button>
For the Addcustomer template above, theng-controller directive invokes the Customercontroller method in the JavaScript function and data binding.
function Customercontroller ($scope) { = "William"; = "Gates"; function () { var customer = $scope. Createcustomerobject (); Customerservice.createcustomer (Customer, $scope. createcustomercompleted, $scope. Createcustomererror) ; }}Original address:Http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single
Crossing, please do not spray
Scalability of
When I developed the sample program for this article, the first two extensibility issues for single-page applications became more apparent. Angularjs need to reference and download all relevant JavaScript files on the page. A large application may contain hundreds of JavaScript files, which does not seem ideal. Another problem is that when I use the ANGULARJS routing table, I write every routing rule to the routing table, which is obviously not a good idea when there are hundreds of rules in the routing table.
Dynamically loading JavaScript files using Requirejs
For this example, I don't want to load all the JavaScript files on the template page. A large application typically requires hundreds of JavaScript files. In general, JavaScript files are loaded by using the script tag one at a. In addition, each file may be dependent on other files. Requirejs This JavaScript library is capable of dynamically loading JavaScript files.
Requirejs is a well-known JavaScript module and file loader that is supported in mainstream browsers. When using Requirejs, JavaScript code needs to be split into modules, each of which is responsible for a single function. In addition, we can configure dependencies for the corresponding files.
REQUIREJS provides a neat way to load and manage your JavaScript applications.
Angularjs Route ConversionIn Angularjs, you need to configure different routes for different rules. I decided to unify the naming conventions for Web pages and related JavaScript files, and to allow the application to resolve routing names, automatically binding JS methods and page bindings.
For example, the Client Maintenance content page is named Customermaintenance.html,angularjs controller that corresponds to the JavaScript file that is named Customermaintenancecontroller.js.
Let's start by modifying the sample application. First, each application requires some form of authentication and authorization mechanism to control permissions. This application will use ASP. NET Forms authentication for authentication. Once verified, the user will be able to access the rest of the application. The general Web site will have a different master page, a login page for display, and another master page usually contains a main menu bar, sidebar and header menu options, content area and footer area. This sample application is implemented through multiple template pages. Once the login is successful, the user will be routed to a new template page.
Multi-Template page
The first template page is index.html. This page displays information about the login and user registration. As you can see, only one JavaScript file is referenced here. The main.js will contain configuration information for the Requirejs to dynamically load the module. We name the index.html angularjs controller indexcontroller.js. If the user successfully registers or logs in, the application jumps to a new template page applicationmasterpage.html. On the template page, there is a ng-view directive. As mentioned earlier, this command tells the ANGULARJS where the content will be loaded.
<!--index.html -<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title> </title> <ScriptData-main= "Main.js"src= "Scripts/require.js"> </Script> <Linkhref= "Content/angular-block-ui.css"rel= "stylesheet" /> <Linkhref= "Content/bootstrap.css"rel= "stylesheet" /> <Linkhref= "Content/application.css"rel= "stylesheet" /> <Linkhref= "Content/sortablegrid.css"rel= "stylesheet" /></Head><BodyNg-controller= "Indexcontroller"Ng-init= "Initializecontroller ()" > <Divclass= "NavBar navbar-inverse navbar-fixed-top"> <Divclass= "Container"> <Divclass= "Navbar-collapse collapse"ID= "MainMenu"> <ulclass= "Nav navbar-nav"ng-repeat= "MenuItem in MenuItems"> <Li> <ahref= "{{Menuitem.route}}">{{Menuitem.description}}</a> </Li> </ul> </Div> </Div> </Div> <!--ng-view directive to tell AngularJS where to put the content pages - <Divstyle= "margin:75px 50px 50px 50px"Ng-view> </Div> </Body></HTML>
Building Large ASP. NET single page application with Angularjs (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
