Best practices based on ANGULARJS front-end cloud components _angularjs

Angularjs is Google's design and development of a front-end development framework, he can help developers more convenient front-end development. Angularjs is designed to overcome the lack of HTML in the construction application, it is very comprehensive and easy to learn, so angularjs quickly become the mainstream JavaScript framework.

First, the angular of amazing

Characteristics of Anguarjs

The convenient rest:restful gradually becomes a standard server and the client communicates the way. You can quickly get data from the server by using just one line of JavaScript code. Augularjs these into JS objects, as model, following the MVVM (Modelview view-model) design pattern.

MVVM Savior: Model will interact with ViewModel (through $scope objects) and monitor the changes in model. You can send and render by view, and the code is displayed by HTML. View can be dominated by $routeprovider objects, so you can deeply link and organize your view and controller and turn them into navigation URLs. ANGUALRJS also provides stateless controller that can be used to initialize and control $scope objects.

Data binding and Dependency injection: Everything in MVVM design mode is automatically communicated to the UI regardless of what happens. This helps us to go beyond the Wrapper,getter/setter method or class definition. Angularjs will help us deal with all of this content, and you can work with data like the basic JavaScript data types. Of course, you can also customize the processing of complex data. Just because everything happens automatically, you don't have to call a main () to execute your code, but to drive it through dependencies.

Extensible HTML: Most sites are built using semantically <div> tags. You need to define the relevant DOM hierarchy in the CSS class. With Angularjs, you can manipulate HTML just like you do with XML, and there are endless ways to complete tags and attribute definitions. Angularjs through its own compilers and directives to complete the relevant settings, which is also the cornerstone of component implementation.

When we touch jquery, we find that to do the binding, retrieve the data fortress back, plug the process is to their own concern. But with angular, the data is retrieved as long as the injection variable is completed automatically, including event binding. Data binding, MVVM, Dependency injection makes you feel like you've got a lot to care about, and you don't need to care anymore, just be more concerned about the data structure and business layer, which frees us from the tedious dom bindings.

Second, the component of the road

A component is a simple encapsulation of data and methods, in this style class, instruction type, and other components with UI effects, and methods are collectively called components. In large software, the component is a kind of consensus, it improves the development efficiency, on the other hand reduces the maintenance cost.

Component and component Presentation form

Component can have a lot of things to do, such as templating, now the template of the task to hand over to the front. The second is the common style library, the third public function library, some business components, a special modular.

The general presentation form includes: A unified style library, a code fragment with certain HTML structure, a function function with JS control, a certain data input and output control.

Iii. uncovering the veil of cloud components

Cloud and cloud Component concepts

The cloud is a metaphor for the internet and the Internet. In the past, telecommunications networks were used to represent the cloud, and were later used to represent the Internet and underlying infrastructure in an abstract way.

Cloud services refer to the need and scalability of the services available through the network. This service can be it and software, Internet-related, but also other services. It means that computing power can also be used as a commodity to circulate through the Internet. Combining the cloud and the components makes up the cloud component. In the final analysis, it is hoped that through a unified control of things, all n projects are controlled together.

A push component type

A push component type includes a style class component, a directive component, a serviced component, a public filter, a common function library, and so on.

You can see from the component category that the exclusive CSS is a style class component, plus the template is very simple components, and then put the controller put in, is the front of a certain JS and a certain logic components, link added, with the animation, the data layer added to have a certain input and output capabilities. This data layer may contain a variety of it is possible to interact with your page controller, and it is possible that this component is very strong and that you are directly communicating with the server to obtain data and pass data (of course, in practice, the former is more suitable for our current environment, which requires a higher requirement for a unified interface).

The above diagram is a technical solution to the cloud-pushing component. Based on the front-end three piece and some other libraries such as the geo-fence components (need to let Baidu map to our entire project docking), there are visualization projects, such as the G20 period in Hangzhou, a scenic spot, visualization projects will be used to third-party libraries. A push uses less to write CSS based on these development cloud components.

Based on some of the cloud components, the best practice object is to start with the management system of form forms with certain general interaction, which gradually contains the complex interactive system application, and has certain support to the response type. A push is starting with a push service, followed by a lot of product lines. Push service will have a lot of 2 B, 2C platform, this is the management type.

The image above is a push cloud components used by the directory structure, with the Gulp packaging, CSS has a WD folder, mainly put some of the third party library. More key or below, JS is the same, WD is the basic library. The fifth is most important, all components are placed under this folder, and each component contains its own proprietary three piece-templates, logic, interactions, effects, and styles.

Packaging based on Gulp

Cloud Component Display Site

The user of a cloud component is divided into three main categories, the first of which is the front-end users (including the pan-front-end), who need to learn how to use, and quickly use components (need to know some basic concepts and usages of angular). The second category is UI designers, projects, and products, and they need to see if the effect is appropriate and design new systems based on the library. The third category is tourists and other people.

New Thinking about cloud components

Cloud components will move the whole body, if the cloud component mechanism is not good, such as an old component update a bug, will have a lot of negative impact, then what to do?

Back to the beginning of the cloud, it's not hard to see that when resources are cut off, it's not going to happen (the cloud component is using its reverse thinking to be convenient), so we can reduce the impact by closing the cloud component resources. This is version control, and different projects refer to the corresponding cloud to achieve the balance between the two just mentioned, thereby optimizing the results.

Therefore, only reasonable control to truly play the advantages of cloud components.

In more than one version, our development model is that the cloud component upgrades for a project are determined by the project. Because if the cloud component comes out and all the projects are upgraded to the cloud component, then the cost of the test is high, and the original cloud component version is enough for the current version of the item that was already online.

A push project system diagram

Problems in the actual use

The distribution of the cloud component has a certain periodicity, but the requirement of the actual project needs to respond quickly, then need to adopt cloud Component Expansion Module (pattern) Development: The component level module that develops this project based on cloud component, the cloud component expands or the customization of the project.

Iv. experience and summary of ANGULARJS

The first, modular: Ready to modular abstraction, this is a dynamic process.

Second, think about the surrounding, more than the rest of the part--transposition thinking, convenient downstream, backward push upstream.

Third, there is no effect can not be achieved, only to bear the price.

Four, there are many methods, time permitting can try.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.