Eighth chapter front-end framework

Source code github:https://github.com/zhaord/zrd_0001_authoritymanagement One, Introduction

The main front-end frame used in this demo is bootstrap, Angularjs, angle. Bootstrap is a Twitter open source CSS framework, providing beautiful interface elements; Angularjs is Google's front-end JS framework, the most core is: MVVM, modular, two-way data binding, dependency injection, etc. angle is a front-end admin management framework, Includes a number of components, with angular/html/music SAP and many other versions.

This chapter mainly introduces the front-end framework of angle. Second, Angularjs routing combined with MVC routing

Angularjs as the front-end MVC framework, also with the concept of routing, specifically not elaborated in this article. This demo uses the MVC function daemon, then how to combine the route of Angularjs and MVC?

The front end uses the routing functionality provided by Angualrjsui, with the following code

First set the app's page, here is the default, access the MVC settings of the default home page, view the default code for

The path to the default orientation is:/app/index, the page code is as follows

Here defines the entire layout of the way, including the head, left, and the bottom of a few chunks, the right blank, the meaning of the div specified ui-view can be

In this way, in the specific sub-page, as long as the specified layout=null can use the default layout of App/index three, menu definition

This demo is to define all the menu contents in a JSON file, the front-end access to the JSON file loading menu, which can later access a path to get JSON object to load the menu.

The file contents of this menu are broadly formatted as follows:

Text is the specified menu name that needs to be displayed, Sref is the name of the specified front-end route, icon is the menu icons, translate is a choice for multi-lingual translation, no content is set here, Angularjs delay definition factory, service, Controller and other content

ANGUALRJS provides a good single-page framework, which needs to be loaded before you need to load all the JS files, in this demo type, JS code is written in the cshtml file, which needs to be loaded in the page page, to Angularjs defined app load the required content, such as Factroy, service, controller and other content.

The core code to complete the ANGUALRJS lazy load is as follows:

The main is to add a configuration item to the default app, which adds a register object to the app to register the corresponding content.

Use the way shown

This completes when the background page is accessed, and once the page is loaded successfully, the corresponding controller is registered. V. ANGULARJS access to background data

ANGULARJS uses the $http service to access background data, mainly using the following methods:

Use Promise Way, can specify the front-end business access order, about promise mode, here do not introduce, interested can Baidu (here is pit, after doing fill,). Vi. Summary

Through the front-end framework introduced in this chapter, ANGULARJS and Access back-end pages and data together, so that the integration of the front and back end.

In this way, the front and back end can be independently developed, Angularjs and C # both provide good unit testing, if just start to define the access path or access to the data Webapi interface, the front and back of the personnel can be developed according to the interface, the final integration test can be.

Recommended QQ Group:

278252889 (angularjs Chinese community)

5008599 (MVC EF Communication Group)

134710707 (ABP Architecture Design Exchange Group)

59557329 (C # Base)

230516560 (. NET DDD)

Contact information: qq:351157970

Eighth chapter front-end framework