Home > Developer > Web Develop
From last year to this year, I participated in two projects using Angularjs as the client development framework. It mainly uses asp.net web api as the restfull service to provide the framework and angularjs combination. Angularjs, as an extension of html, is designed to build a rich set of Dynamic web applications. It uses direve ve to build a set of html-extended DSL models, and uses the PM mode to deform MVVM's many MVC models on the Internet, I think angular0.8 belongs to the classic MVC mode, but after the scope is independently injected in 1.0, it is more inclined to the MVVM mode, which will be written in the future) simplify front-end development and separate front-end business logic. The separation of view and presentation logic makes it easier to maintain and expand. Angularjs was originally developed using TDD and provides a unit test component and End 2 End testing framework. Angularjs is powerful in providing a set of powerful data binding, formatting, and filtering components like WPF and Silverlight, which is also necessary for the MVVM mode. In addition, the IOC injection mechanism, this makes it impossible to separate the business logic and abstract and reuse the service code to a greater extent.
In this section, I will discuss some of the basic principles for angularjs development. Why is this article so casual? I have seen some projects that are useless for angularjs.
1: Do not use a page. A God may be omnipotent. The controller contains all the page logic.
Angularjs ng-controller is designed to differentiate the business logic. It is recommended to divide the controller according to the business logic to achieve high cohesion of business functions. The controller's single principle is SRP.
2: View contains as few logic as possible.
Like jsp and asp server-side template engines, we should put as few logic as possible in the view, because this will lead to tight coupling between the view and logic, view is the most changeable in software development, while the presentation layer logic is relatively stable compared with view. At the same time, the logic in the view cannot be automated for testing, and continuous integration will overwrite it. This will cause the pain of later modification and refactoring and integration of modules. Obviously, there are too many angularjs ng-switch, ng-when, and page calculation expressions.
3: Pay attention to some special node-type angularjs ctictive, because this is unknown on IE7, because IE strictly adopts the XML mode. If you want to make ie7 happy,
1: Import json2 or json3 js
2: xmlns: ng Command Space and node element direve ve.
<Html xmlns: ng = "http://angularjs.org">
<Head>
<! -- [If lte IE 8]>
<Script>
Document. createElement ('ng-include ');
Document. createElement ('ng-pluralize ');
Document. createElement ('ng-view ');
// Optionally these for CSS
Document. createElement ('ng: include ');
Document. createElement ('ng: pluralize ');
Document. createElement ('ng: view ');
</Script>
<! [Endif] -->
</Head>
4: html DOM and CSS Code cannot appear in the controller and service.
This will lead to mixed logic coupling. For the html operations bound to angularjs itself, you may not be clear about the source of view impact, resulting in fixing bugs and difficulties in adding features and restructuring, there are often many strange behaviors. The best practice mode is to move the required dom and css operations to angular direve ve or view. In angularjs mode, only direve VE and view can perform dom and css logical operations.
5: The common logic in the controller is pushed to servicefactory, value, config). IOC injection is used to improve code reuse. The single point of modification and the principle of opening and closing are implemented.
6: The controller should only contain the business logic. The formatting and filtering of the data model should be handled by angular framework filter.
7: it is best to create a general attribute in viewmodel, such as vm, which carries the minimal Quantization model of view rendering, and the deformation event of the model is beyond the scope of the vm. This is the recommended MVVM method. The event is equivalent to the command in WPF. It is responsible for transmitting and modifying the model of model events, so that the model must implement the INotifyPropertyChange interface in the forced update of the view from the model changes ). At the same time, vm attributes facilitate data filling and collection and sending back to the server.
8: IOC injection is preferred. Note: it helps with good design, logic reusability and unit testability, object-oriented "open and closed Principles", and a single point of modification.
9: Good hierarchical design. For Server view interaction, the controller pushes through viewmodescope. server interaction is pushed to the service level, and angularjs $ resource or $ http gets the updated data model, interact with the server. The hierarchy is vertical split. A Class of functional logic interfaces are put together and the architecture hierarchy is separated while the model is horizontally separated from the business logic.
10: the interface of the service on the server needs to be provided by the client on the performance Layer. This is a good SOA service design principle. No additional description is required here. For details, see the step-by-step architecture.
11: if your company has applied agile development, TDD Development is essential. angularjs is also a development project designed to solve the javascript test drive.
Finally, I would like to say that angularjs is not a silver bullet, and it is not omnipotent. Not all projects are suitable for applications. It is applicable to CRUD application systems and has built-in default rules and conventions ), it is not applicable to projects with frequent interaction at the presentation layer. It is not so friendly for some special projects such as spring hdiv projects, or you want to be compatible with more application systems of IE8 or later versions, it is also not practical.
This article from the "wolf" blog, please be sure to keep this source http://whitewolfblog.blog.51cto.com/3973901/1161630
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
