ANGULARJS Development Guide 16:angularjs building Large Web applications

Angularjs is a JS framework created by Google that allows you to extend the HTML functionality in your application to use HTML to declare dynamic content in a Web application. Brian Ford, a software engineer working for the team, recently wrote a blog that shares the experience of how to build large Web applications using ANGULARJS. These experiences are also useful for developers who use other JS frameworks to build large-scale applications.

This blog is particularly concerned about large applications, and the author's first advice is to try not to make the app too big. Instead, you should write small, focused, modular parts, and then gradually combine them to become bigger and larger, making up your application.

Next, Brian Ford first described how to organize the structure of the application, and then gave a brief summary of the performance, testing, tools, server, and build process.

In terms of the organizational structure of the application, Brian Ford provides the following recommendations for various aspects:

Directory: It is recommended to place only index.html a file in the root directory, and then create scripts, styles, views and other directories as needed, in the scripts directory, First, the App.js file will be stored, and then in this directory you can create multiple subdirectories, such as: controllers, directives, filters, services, vendor, etc., in which to classify different content. And, as you create more content for your app, you might add more subdirectories to hold a variety of files.

Files: There should be only one thing in each file, which could be controls, instructions, filters, or services, and so on. This results in smaller but more focused files. is also conducive to better testing.

Modules: First define and configure all modules in App.js, such as:

Angular.module (' Yourappname ', [' YOURAPPDEP ']); Angular.module (' YOURAPPDEP ');

Then define the controls, services, and so on in the module, such as:

function  () {      // ...});

Dependencies: In general, services, controls, directives, and so on should have as few dependencies as possible, and this is a good software development practice that can help with testing. The API should be layered. Controls do not in particular combine many different levels of abstraction.

directive: Use the app-specific prefix for instructions, which helps to avoid duplicate names with third-party components. For example, the following code uses "Btla" as the prefix:

function  () {     // ...});

Service: You can declare the service in the following way:

function  () {     // ...});

Model: Angularjs, as a JavaScript framework, is unique in that you have complete control over the model layer. This is the strength of angularjs, because the core of the application is your data, and the data between the various applications is very different. So Brian Ford strongly advises you to think carefully about how data is used and how it will be stored.

Controller: It is recommended that the controller start with "Ctrl" such as:

function  () {     // ...});

In addition to the above, Brian Ford also provides various recommendations for performance, testing, and more in the article:

In terms of performance, ANGULARJS applications are generally very, very fast. Most applications do not require any special optimizations, so unless you find a serious performance problem, you should spend time in other areas to improve your application.

For large projects, testing is very important. It gives you the confidence to refactor, which is important to keep your large project code clean. Large applications should have both unit testing and end-to-end (end-to-end) testing. Unit testing helps to locate problems, and end-to-end testing ensures that the entire application works as expected. Each controller, service, filter, and directive should have a series of unit tests. Each feature of the application should have an end-to-end test.

In terms of tooling, it is recommended to use Yeoman for best practices and a good project structure, as well as Angularjs Batarang, which is effective for debugging and finding performance bottlenecks.

On the server side, you can use any desired server and ANGULARJS collaboration. It's just the client's library. My recommended and preferred settings are the use of node. js plus nginx. I use Nginx to store static files and use node. js to create restful APIs and embedded (socketed) applications. For cloud providers, I have used Nodejitsu and Linode successfully. The former will make it easier for you to deploy the program, and you don't need to care about the server environment. If you need more control over your server environment, then Linode will let you control the virtual machine from the bottom. Linode also provides a good API to manage virtual machines.

In terms of the build process, I think angular needs to do more, and my biggest goal in 2013 is to contribute. I have released ngmin and hope that this tool will eventually solve the problem of minimizing the ANGULARJS application for the production environment.

Finally, Brian Ford concludes that Angularjs is a very useful JS framework for writing large applications. You can use it directly, it's quick, and it's helpful for the structure of your organization's application.

Talk about how to get started with Angularjs building web Apps

Angularjs's philosophy is not the same as the jquery library or other front-end JS frameworks, and the goal of ANGULARJS is to develop Web applications. For example, using the Angularjs Chinese community of Jsgen, the general audience will think that this is just an ordinary website, but in fact it is an application running in a browser. When the browser accesses the website, the server first feedback a ANGULARJS app's boot page jsgen/static/index.html , which contains the HTML, CSS, JS and other resource paths to build the complete ANGULARJS application, and the browser then obtains the related resources from the server according to these resource paths. Form a complete ANGULARJS application. Once the ANGULARJS application is loaded, it will read the site information, articles, etc. from the Web site, or obtain relevant data based on the user's request, insert the data into the ANGULARJS application-related location, and render the page that the user eventually sees. Composition ANGULARJS application of HTML, CSS, JS and other resources are static files, we can put these static files independent (that is jsgen/static , directory files), the relative path of data resources to the absolute path of the server, packaged in the local computer, Then this native ANGULARJS application is still a complete ANGULARJS application that can run in the browser and get the data with the server communication. Said so much, just to tell you a little: the Angularjs app is a Web program, not a Web page that gets from the server.

Angularjs's four features help you build your Web application:

1. UI View Routing Navigation

   This feature helps you switch from one view to another, or to a local area in the view. In a Web page, it is displayed as a Web page to another page, or a page area to update. The instructions for implementing the function are ng-view ,, ng-include , and ng-switch ng-show/hide so on.

2. Data Model two-way binding

   This feature helps you update the data in the view in a timely manner, or when you enter data in the view, the data is immediately updated to the ANGULARJS application's logic program (the JS program). The instructions that implement this function are ng-bind , ng-template wait for, or most directly the most commonly used {{}} . The basis for implementing two-way binding is scope!

3. Bidirectional communication with remote server

   This feature helps you to request data or send data to the server. The service that implements the feature is the $http and $resource .

4. Modular Management

   This feature helps you with modular programming for large, complex web applications. Of course, simple ANGULARJS applications should also be managed using modular programming, which is a good habit. To achieve this function angular.module , Angular.module can be said to be the basis of angularjs, all instructions, services, filters, controllers are derived from it.

Angular development Guide Almost ended up like this, next, will use angular source to explain how angular some mechanism is realized, and so we understand the source code, you can easily use angular to develop.

Come on!

ANGULARJS Development Guide 16:angularjs building Large Web applications