Best practices for front-end cloud components based on AngularJS

AngularJS is a front-end development framework designed and developed by google based on the best practices of AngularJS front-end cloud components. It can help developers develop front-end products more conveniently. AngularJS is designed to overcome the shortcomings of HTML in building applications. It is comprehensive and easy to learn. Therefore, AngularJS has quickly become a mainstream javascript framework.

1. Angular of Amazing

AnguarJS features

Convenient REST: RESTful has gradually become a standard way of communication between servers and clients. You only need to use a line of javascript code to quickly obtain data from the server. AugularJS converts these objects into JS objects. As a Model, they follow the MVVM (modelview-model) design pattern.

MVVM savior: The Model interacts with the ViewModel (through the $ scope object) and listens for Model changes. View can be used to send and render the code, and HTML can be used to display the code. View can be controlled through the $ routeProvider object, so you can link and organize your View and Controller in depth and convert them into navigation URLs. AngualrJS also provides stateless Controller, which can be used to initialize and control $ scope objects.

Data Binding and dependency injection: everything in the MVVM design mode automatically communicates with the UI no matter what happens. This helps us to remove wrapper, getter/setter method or class definition. AngularJS will help us process all of this content, and you can process data like processing basic javascript data types. Of course, you can also customize complex data processing. Because everything happens automatically, you don't have to call a main () to execute your code, but are driven by dependency.

Scalable HTML: Most websites use non-semantic

Tag. You need to define the relevant DOM hierarchies in the CSS class. With AngularJS, you can operate HTML like XML. There are infinite ways to complete tag and attribute definitions. AngularJS uses its own compiler and Ves ves to complete relevant settings, which is also the cornerstone of component implementation.

When people came into contact with jQuery, they found that they had to bind the data in advance and retrieve the data to make it back. They had to worry about the process. However, with Angular, once the data is retrieved, the injection variable is automatically completed, including event binding. Data Binding, MVVM, and dependency injection make you feel that you have to worry about a lot of things before, and now you don't need to worry about it. You only need to care more about the data structure and business layer, it frees us from tedious DOM binding.

2. componentization

A component is a simple encapsulation of data and methods. In this style class, Directive type, and other components with UI effects, methods, and other components are collectively referred to as components. In large software, componentization is a consensus, which improves development efficiency and reduces maintenance costs.

Componentization and component display

Componentization can have many things to do, such as templatification. Now the task of templated is handed over to the front-end. The second is the public style Library, the third public function library, some business components, and the modularization is special.

Components may be displayed in the form of a unified style Library, code snippets with a certain HTML Structure, Function functions controlled by some JavaScript, and control of certain data input and output.

Iii. Unveil cloud Components

Cloud and cloud component concepts

Cloud is a metaphor for networks and the Internet. In the past, telecom networks were often represented by clouds, which were also used to abstract the Internet and underlying infrastructure.

Cloud services are the services required through the network in an on-demand and scalable manner. This kind of service can be related to IT and software, Internet, or other services. It means that computing power can also be used as a commodity to flow through the Internet. Combining the cloud and components constitutes a cloud component. In the end, we hope to put all N projects under unified control.

Push component type

Push component types include style components, command components, service components, public filters, and public function libraries.

From the component classification, we can find that the exclusive CSS is a style component. Adding a template is a very simple component, and then putting the Add controller in, it is the component with certain JS and logic that we mentioned earlier. The link is added with animation, and the data layer is added with certain input and output capabilities. This data layer may contain multiple types of data, which may be interacting with your page controller, or the component may be very strong, directly communicate with the server to obtain and transmit data (of course, in practice, the former may be more suitable for our current environment, and the latter may have higher requirements for unified interfaces ).

It is a technical solution for pushing cloud components. Based on the three front-end components and some other components such as geo-fencing components (we need to connect Baidu map to our entire project), there are also visual projects, such as the flow of people in a scenic spot in Hangzhou during the G20 period, A visualization project uses a third-party library. Using LESS to write CSS, develop cloud components based on these.

According to some situations of cloud components, the best practice object is to start from a management system with a certain degree of universal interaction of table forms, and gradually include system applications with complex interactions, it also has some support for the response type. Personal push starts from the launch of the PUSH Service, followed by many product lines. The push service has many 2B and 2C platforms, which are managed.

Problems in actual use

The release of cloud components has a certain degree of periodicity, but the actual project needs to respond quickly, at this time, you need to use the cloud component extension module (model) Development: develop the component-level modules of this project based on cloud components to expand or customize cloud components by project.

Iv. Experiences and summary of AngularJS

1. modularization: Prepare modular abstraction at any time. This is a dynamic process.

Second, think more about the surrounding area, more than the ending part-empathy to facilitate downstream and reverse upstream.

Third, there is no effect that cannot be achieved, and there is only a price that cannot be tolerated.

4. There are many methods. If time permits, you can try them.