A probe into the cloud component of push front end based on Angularjs

Angularjs is a front-end development framework designed and developed by Google to help developers make front-end development easier. Angularjs is designed to overcome the shortcomings of HTML in building applications, is very comprehensive and easy to learn, so Angularjs quickly became the mainstream JavaScript framework.

First, the angular of amazing

Characteristics of Anguarjs

Convenient rest: RESTful is gradually becoming a standard way of communicating with servers and clients. With a single line of JavaScript code, you can quickly get data from the server side. Augularjs these into the JS object, which, as model, follows the MVVM (Modelview view-model) design pattern.

MVVM Savior: Model will interact with ViewModel (via $scope object) and monitor the model changes. It can be sent and rendered by view, and the code is presented by HTML. View can be dominated by $routeprovider objects, so you can link and organize your view and controller in depth, turning them into navigation URLs. Angualrjs also provides a stateless controller that can be used to initialize and control $scope objects.

data binding and Dependency injection: anything in the MVVM design pattern automatically communicates with 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 these things and you can process the data like the basic JavaScript data types. Of course you can also handle complex data by customizing it. Just because everything happens is automatic, you don't have to invoke a main () to execute your code, but to drive it through dependencies.

Extensible HTML: Most websites are built using non-semantic <div> tags. You need to define the relevant DOM hierarchy yourself in the CSS class. With Angularjs, you can manipulate HTML just as you do XML, and there are endless ways to define tags and attributes. ANGULARJS uses its own compilers and directives to complete the relevant setup, which is the cornerstone of the component implementation.

When we contacted jquery, we found that to do pre-binding, retrieve data fortress back, plug the process is to care for themselves. But with angular, data retrieval is done automatically as long as the injected variable, including event binding. Data binding, MVVM, Dependency injection makes you feel like there's a lot of things to care about, and now you don't have to worry about it, just more about the data structure and the business layer, which frees us from the cumbersome DOM bindings.

Second, the road of component

A component is a simple encapsulation of data and methods, such as a component that has UI effects, such as a style class, a directive type, and a component called a method. In large-scale software, the component is a common understanding, it improves the development efficiency on the one hand, and reduces the maintenance cost on the other.

Modular and component Presentation forms

There are many things that can be done with the component, such as templating, and now the templating task is delivered to the front end. The second is the public style library, the first XXX common function library, some business components, a special point of modularity.

The components of the approximate presentation include: A unified style library, with a certain HTML structure of the code snippet, with a part of the JS control function, with a certain data input and output control.

Iii. uncovering the veil of cloud components

Cloud and cloud Component concepts

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

A cloud service is a network that obtains the required services in an on-demand, easy-to-scale manner. 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. The combination of the cloud and components makes up the cloud component. In the final analysis, it is hoped that all n items will be controlled together through a unified control.

A push component type

Push component types include style class components, directive components, serviced components, public filters, public function libraries, and so on.

From the component classification can be found that the exclusive CSS is a style class component, plus the template is a very simple component, and then put the controller put in, is the front of a certain JS and a certain logic of the components, add link in, with the animation, the data layer added in to have a certain input and output capacity. This data layer may contain a number of possible interactions with your page controller, or it is possible that the component is very strong, that it is able to communicate directly with the server to get the data and pass the data (although in practice it may be more appropriate for our environment, the latter for the unified interface requirements will be higher).

is a technical solution to push cloud components. Based on the front-end big Three and some other libraries such as geo-fence components (need to let Baidu map to our entire project docking), as well as visual projects, such as the G20 period in Hangzhou, a scenic spot of people, visualization projects will be used to third-party libraries. A push to use less to write CSS, based on these development cloud components.

According to some cases of cloud components, the best practice object is to start with the management System of table Form class with certain general interaction, and gradually contain the system application of complex interaction, and have some support to the response style. A push starts with a push service, followed by a lot of product lines. The push service will have a lot of 2 B, 2C platform, this is the management type.


is a push cloud component to use the directory structure, with gulp packaging, CSS inside the WD folder, mainly put some third-party libraries. More key is the main or below, JS is the same, WD is the base library. The fifth is the most important, and all components are placed under this folder, each containing its own big three-templates, logic, interactions, effects, and styles.
Gulp-based packaging

Cloud Component Showcase Site

There are three main categories of users of cloud components, the first of which are front-end users (including the pan front-end staff) who need to learn how to use the components quickly (and must 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 pull a whole body, if the cloud component mechanism is not good use such as an old component updated a bug, there will be a lot of negative impact, then what to do?

Back to the beginning of the cloud, it's easy to see that when resources are isolated they don't have that kind of impact (cloud components are using their reverse thinking to achieve convenience), 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 described, thus optimizing the results.

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

Under multiple versions, our development model is for the project to be determined by the cloud component upgrade. Because if the cloud component is rolled up, all projects are upgraded to cloud components The cost of this backtesting is high, and the original version of the cloud component is enough for the current version of the project that was already online.

Project system diagram of a push

Problems in the actual use

The cloud component's release has a certain periodicity, but the actual project needs to respond quickly, this time need to adopt the Cloud Component Expansion Module (pattern) Development: cloud-based components to develop the project's component-level modules, cloud components to expand or project customization.

Iv. experience and summary of ANGULARJS

First, modularity: Always ready for modular abstraction, which is a dynamic process. Second, think about the surrounding, more than the rest of the part---------------- Third, there is no realization of the effect, only can not bear the price. Four, there are many ways, time permitting can try.

A probe into the cloud component of push front end based on Angularjs