Detailed explanation of the steps to develop Angular2 components

This time I will bring you a detailed explanation of the steps for developing Angular2 components. What are the precautions for developing Angular2 components? The following is a practical case, let’s take a look.

Let’s briefly talk about the responsibilities and status of components under the ng1 to ng2 framework:

One of the major features of ng1 is instructions, which are divided into attribute types and tags. Type, css type and annotation type. The components written in css classes and comments are probably not used by most people, while attribute-type instructions and label-type instructions are one of the contributors to the popularity of ng1 throughout the universe. In ng2, the tag-type instructions are simply separated, upgraded following the style of emerging forces such as vue and called components, and used to handle all things that deal with the view (DOM), including displaying data andanimation. Attribute instructions are used to improve the functions of components, such as receiving user input and responding to user clicks and other events. In fact, many functions embedded in ng2 are attribute-based instructions - ngFor, ngIf, etc., and components are more dependent on specific projects, so it is suitable to use components based on projects to write interfaces visible to users. Come. At the same time, components also need to deal with routing. Front-end routing can be regarded as dynamically changing the DOM. After formulating the rules in ng2 routing, it actually dynamically renders or destroys different components to achieve front-end page switching.

Then let’s talk about how I used ng2 components to build a website in my previous project:

1. According to the official practice, each application must have a root component.

2. Differentiate front-end routing. Each routing entry points to a component, and each component renders a page.

3. As the project expands, a single module cannot meet the business classification, so the root route first guides lazy loading of each sub-module, and then the sub-routes of the sub-modules point to specific sub-components, and Render their respective pages.

4. Focusing on a single page rendered by a single sub-component, you can actually encapsulate some reusable tag blocks into a new component (such as complex data items that require ngFor traversal).

5. I found that some components (such as side buttons or message modal boxes) may actually be used by the entire project, and these must be encapsulated into globally shared components.

I still feel a little confused. The reason is probably the name of the component, because under the ng2 framework, everything from routing pages to data entries uses components. Declaration The methods are all the same, so it will inevitably be confusing.

I have no choice but to continue to subdivide the components myself, so the author divided the components of ng2 into four categories:

Page components

• When dealing with routing, we only care about matching routing rules and rendering the interface. This type of component does not require a selector parameter when declaring (it is only positioned by routing and does not require specific tags)

• Receive routing parameters or resolve data, try not to make other business interaction requests, and do not set Input and Output variables

Layout components

• Modules used to subdivide pages. If the page is simple, you can skip using the unit component directly. There must be specific selector parameters because it must be used in the page component

• is not responsible for obtaining routing or resolve data, and try not to request data but pass in data through Input or respond to events through Output. All business interaction requests should be completed in the layout component as much as possible (not as difficult as placing it in the page component) chaos, and each layout component can not affect each other)

Unit component

• Must have its own selector , generally reusable in its own module, modified by various attribute-type instructions

• is used to simplify repeated tags at the unit level, such as each data item in the obtained list data. The interface display can be encapsulated into a unit component

• It is only responsible for passing in data and displaying it through Input, and responding to events through Output to the outer layout component or page component for processing

Shared components

• There must be a selector, a component shared by the entire project. It is relatively free to implement and focuses on reducing the complexity of the entire project. Duplicate code and facilitate maintenance

• are more suitable, such as message pop-up boxes, loading progress bars, etc.

• most attribute-type instructions, in fact, the functions are generally It is relatively general and can be treated the same as shared components, except that shared components have specific views and shared instructions are only used to implement common functions

In fact, there are no technical difficulties at all. It just implies one thing - project directory arrangement is very important.

ng2 doesn’t know the many types of components that the author has subdivided for it. These classifications are for you to see. The specific embodiment is a project derived from this classification systemDirectory structure .

The author added some plus signs and some minus signs in front of the folder names, which can be regarded as his own seemingly strange directory structure arrangement.

The explanation is: the outermost term represents the directory of the entire lazy loading module. The components in the directory with a plus sign inside represent page components, and the components without any symbols represent layout components with a minus sign. The component representatives under the directory are unit components. The unit components may be used in the entire lazy loading module, so they are directly at the outermost layer of the lazy loading directory, while the layout components are all in the same level directory of the specific page components.

The summary is that after putting aside the appearance of ES6 and TypeScript, the use of ng2 components is not technically difficult. This article is purely a clumsy experience. Of course, the author’s current experience is still It is far from enough. I hope to have deeper insights after studying the ng2 source code thoroughly in future development.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

js realizes the uniform fade-in and fade-out of pictures

How to realize the mutual conversion between numbers and strings in JS

The above is the detailed content of Detailed explanation of the steps to develop Angular2 components. For more information, please follow other related articles on the PHP Chinese website!