Front-end architecture based on ANGULARJS and Requirejs

1. Outline Description 1.1,AngularJSDescription:Angularjs is a complete, end-to-end solution for Web applications that can be used to build Web applications. Simplify application development by presenting a higher level of abstraction from the developer. The best thing to do is use it to build a CRUD application, which provides a very convenient and unified and efficient solution, with data binding, basic template identifiers, form validation, routing, deep linking, component reuse, dependency injection, and HTML markup, among the most popular are its two-way data binding. 1.2,RequirejsDescription:Requirejs is to solve the traditional page load script tag operation, through its initialization configuration to implement on-demand, parallel, delay loading JS library, declaring the dependency between different JS files, it is to follow the front-end AMD Specification (asynchronous module loading). JS code can be organized in a modular way (modular programming). The meaning of modularization is to show the dependencies and execution order of the modules through the code logic, decompose the code according to the logic of the module, and play a role in cooperating with the MVC Framework Architecture project. 1.3, Integration:Using Requirejs module to define the dependencies of the module quality control, packaging does not need to file a cross-reference, very convenient. The script script is extracted from the template page, and the JS module that needs to be relied on is loaded by JS current module. Load on demand. Routing is more convenient. 2, design ideas2.1, thought:Emulate the basic idea of the back-end MVC architecture, adopt the MVVM pattern, break away from the traditional front-end coupling too tight thought, adopt the method of front and rear end separation, make its maintenance cost reduce development efficiency increase. Let front-end developers only need to focus on data and page interactions, and back-end people only need to provide data. 2.2,Rest:Rest refers to a set of schema constraints and principles that the application or design that satisfies these constraints and principles is restful. The rest principle is that the interaction between the client and the server is stateless between requests, and an important principle is the hierarchical system, which indicates that the component cannot understand the components beyond the middle tier to which it interacts. By restricting system knowledge to a single layer, you can limit the complexity of the entire system and promote the underlying independence. Rest is a lightweight, WebService architectural style designed to reduce the complexity of development and improve the scalability of the system. 2.3, principle:The Angularjs and Requirejs integration, the operation principle steps are as follows:

1, initial loading initial page such as index.html, first load the style file, then load the Requirejs configuration file and the source file.

2, through the Requirejs configuration of the Data-main main function entrance, loading ANGULARJS and application-dependent JS source files.

3. Manually initialize the static page through Ng.bootstrap (document, [' app]] to support angularjs,ng.resumebootstrap () delay boot.

4, through the index.html page configuration layout instructions, loading smart-device-detect, Smart-fast-click, smart-layout, smart-page-title processing pages and the overall planning layout.

5, through the Index.html specified property Ui-view, through the Angularjs Ui-router plug-in to dynamically switch routes.

6, through the main function portal Main.js registered application App.js to register the entire application of the various modules, each module defines the respective routes.

7. Define a globally dependent module, such as a includes.js file, to load the services, directives, and components used by the global application.

8, define the corresponding interceptor processing HTTP request Exception Unified operation, such as whether to log on, whether to have the operation permissions.

9, by the respective definition of the route to load the corresponding template, the corresponding controller processing data provided to the template display.

3, design advantages and disadvantages3.1, Advantages3.1.1,AngularJSis aMVVMFront End Frame,This can be completely out of the back-end program coupling degree, can completely stand out, the front and back end can be deployed separately, developed separately. 3.1.2,AngularJSModularity solves the coupling of code logic, which is decoupled by dependency injection, making it easy to split the combination. 3.1.3,The templates are powerful and rich, with rich angular instructions and customizable instructions. 3.1.4,The MVVM framework of the front-end contains all the functions of template, data bidirectional binding, routing, modularization, service, filter, Dependency injection and so on, front-end processing is convenient. 3.1.5,Modular, high maintenance, flexible architecture focus separation, convenient module combination, decomposition, single module function debugging, upgrade. 3.1.6,testability, unit testing can be done. 3.1.7,JS/CSS, image file compression merge, improve the user experience. 3.2, shortcomings3.2.1,Verify that the feature error message appears weak. 3.2.2,The third party libraries is not very convenient to use, manual packaging requiredDirective. 3.2.3,Not suitable for frequent operationDOM. 3.2.4,Version upgrade compatibility is not very good, the high version does not have a good compatibility with the low version. 3.2.5,System layering, call chain growth, inter-module communication loss performance. 4. Architecture Implementation 4.1, Overall architecture description

The architecture is implemented using JavaScript scripting technology, and the system architecture diagram is as follows:

4.2, Project Environment construction

The front end does not need any dependent tools at all, a notepad editor. Need to fit back endJavadevelopment, just followJavadevelopment environment to create aWebproject, the front-end frame is builtWebAppdirectory Copy toWebof the projectWebRootYou can start developing it below. After the development is completed usingGruntbuild Tool Packaging compressionWebAppof theJSfile.

4.3, Technical Applications

1, AngularJS, the overall framework supporter, the MVVM pattern architecture.

2. Requirejs, modularization and loading JS files on demand.

3, Require-domready, use callback method to let the page load completed after the Requirejs.

4, Bootstarp, adopt bootstrap style library.

5, jquery, jquery file library, manipulating DOM elements.

6, Angular-route, routing control, through the hash and the history of two ways to achieve.

7, Angular-couch-potato, with ui-router to achieve delay by module loading.

8, Angular-animate, realize the animation effect of the angular plug-in.

9, Angular-sanitize, the realization of HTML purification angular plugin.

10, the above is the main source file of the framework, there are a large number of plug-ins and components, as well as custom components.

4.4, frame construction steps

1, create a new WebApp folder, under which the corresponding folder, such as API, app, plugin, styles, vendor and entry address index.html.

2, ready angular and require and the required plug-in source files, stored under the vendor directory, it is best to set different folders according to the function. Configure application-dependent JS files with Config.js.

3, define the functions required by the app, set up the corresponding folders, such as auth, components, dashboard, layout, modules. Define the application's main functions and application files, such as Main.js, App.js, and the extracted configuration file config.js, includes.js files.

4. Start writing index.html, use the standard HTML5 specification, import the style file required by the application, and define script script to load the Requirejs file.

5, define the overall application layout, through the ANGULARJS instructions and routing operations.

6. Define REQUIREJS configuration files and configure dependencies for the entire application.

7, write the main function entry file main.js, load the application, start angular.

8, write the application master file App.js, define the application module, load module. Configure the Interceptor.

9. Configure the application's global dependency includes.js.

10, planning the overall application of the module, layout and related components and mutual dependence.

11, the Interception machine to verify user information, permission information.

Specific directory description

4.5, module Development steps

1, planning module design, define the data structure of the front and rear end sockets.

2, in the modules directory of the app, define a module such as system, then define a module.js to the system, define the route of the module, and start the module.

3, define the corresponding controller, views, services, directives and filters.

4. To the system module, define the template file required by the views.

5. Develop the controller of the System parsing template and provide the data of the JSON interface needed by the backend.

6, if you need to customize instructions and data filter to the appropriate folder under the definition of development. Specifies the directives and filters that it relies on in the routing of the Module.js file.

7, the front and back end data docking, authorization verification.

5, build and Compress 5.1, grunt build tool 5.1.1, Introduction: Grunt is a task-based JavaScript application of the command line of the automated build tool. It can be used for compression, compilation, unit testing, code checking, and package publishing tasks. Smarter, easier, and without duplication, especially in large projects, just configure the tasks you want to do. 5.1.2, how to build: Grunt is to be used with node. JS with the following steps:

1, download Nodejs Server, install to local computer.

2, install grunt command line interface Grunt-cli,sudo NPM install GRUNT-CLI-G.

3, create a Grunt folder in the application, and configure a copy of the Package.json and Gruntfile files.

4, install grunt module plug-in, common modules are: NPM install grunt--save-dev

Check JS syntax: NPM install Grunt-contrib-jshint--save-dev

Merging files: npm install Grunt-contrib-concat--save-dev

Compressed files: npm Install grunt-contrib-uglify--save-dev

Monitoring files: npm install Grunt-contrib-watch--save-dev

Delete files: npm install Grunt-contrib-clean--save-dev

Copy files: npm install grunt-contril-copy--save-dev

Image compression: NPM insatll grunt-contril-imagemin--save-dev

Compression merge css:npm install Grunt-contril-cssmin--save-dev

Save-dev: Automatically adds it to the Devdependencies configuration segment, following the Tildeversion range format.

5, to the grunt directory under the application Engineering directory, run the grunt command.

6, Precautions6.1, each module injected into a service or a plug-in, you should pay attention to whether the corresponding source files are configured, otherwise it will be reported injection failure. 6.2, angular plug-in service injection name to the various source files can be found, such as source files in angular.module (' xxx '), where xxx is the service name.

Front-end architecture based on ANGULARJS and Requirejs