ANGULAR2 Development Notes

Problem

1. What to look for when using dependency injection
2. What services are generally used to do
3. What is the general use of directives?
4. Angular2 How to extract public components
5. Angular2 why not need to mention public components
6. How to communicate between parent and child components
7. When should I use Ngmodel?
8. Why do you use typescript? I like JavaScript.
9. Why do I have to add () after the syntax such as input?

Solution what you should be aware of using dependency injection

First we need to understand what is dependency injection (Dependency injection, DI), Java programmer should not be unfamiliar, DI is a programming mode, it lets a class from the external resources to obtain its dependence, rather than create it yourself. What are the benefits of this? The advantage is that we don't have to care about how to create a dependency on the process, we just need to be comfortable with this already created instance of the line. The use of Di in ANGULAR2 is generally in components, and what we inject is commonly referred to as service, marked with @injectable (). When using Di, be aware that the service is declared in providers in component and then declared in class contructor, eg:

@Component ({selector: ' source-list ', Styles:require (' xxx.scss '), Template:require (' xxx.html '), providers: [ Regions]}) export class SourceList {constructor (private region:regions) {}}

In addition, if a service is introduced in the parent component of the component providers, it can be declared in its subcomponents without introducing it directly in the contructor, otherwise it will report "Not providers ..." error

What services are generally used to do

What is the service? "Service" is a broad category encompassing any value, the function or feature that we application needs. It can be a value, a function, or a desired attribute, and a typical service should be a class with a focused, well-defined definition. It should do a specific thing and do it well. I understand that services are typically used to communicate with the backend to get the data required for the component, or to manage component-specific properties.

In addition, the introduction of the service is a singleton, that is, you change the value of the service object in a component, and another component that uses the service will follow the change in the service.

What is the general use of directives?

Directives are typically used to manipulate the DOM, which is introduced in the directives of the component, which is a new instance of the change, which is opposite to the service. In my opinion, most of the time, the instructions are packaged by functionality, and are used uniformly by the parent component.

There are two other kinds of directives, structural directives and attribute-type directives. A structured instruction changes the DOM tree layout by adding/removing DOM elements. Ngfor and Ngif are some of the two most familiar examples. An attribute-type directive alters the appearance or behavior of an element.

Angular2 How to extract public components

The styles are isolated at the ANGULAR2 framework level, and the styles subordinate to each component have no effect on the other components.

How to communicate between parent and child components

Parent and child components: I typically do this by using input () to declare variables received from the parent component in a subcomponent, passing the change data where the parent component template uses the subassembly, eg:

Parent component

@Component ({selector: ' source-list ', Styles:require (' xxx.scss '), Template: ' 

Sub-component

  @Component ({ Selector: ' Nav-breadcrumb ', Template:require ('./breadcrumb.html ')}) export class Navbreadcrumb {constructor () { } @Input () paths;}  
 " > @Component ({selector: ' Nav-breadcrumb ', Template:require ('./breadcrumb.html ')}) export class Navbreadcrumb {Co Nstructor () {} @Input () paths;}  

Subcomponents and Parent components: I typically do this by using the Output and Eventemitter classes, declaring the class instance with @output () in a subassembly to get the channel that communicates with the parent component, supporting triggering events, and returning the corresponding data. Captured by the parent component where it is used in the template. eg

Parent component

@Component ({selector: ' source-list ', Styles:require (' xxx.scss '), Template: ' 

Sub-component

@Component ({selector: ' Nav-breadcrumb ', Template:require ('./breadcrumb.html ')}) export class Navbreadcrumb {con Structor () {} @Output () Canceldialogrequest = new Eventemitter (); @Input () paths; Canceldialog () {this.cancelDialogRequest.emit (1); }}

When should I use Ngmodel?

The Ngmodel is used for data bidirectional binding in the general form:

    <input [(ngModel)]="title">

It is actually:

 <input [ value]="title" (input) ="title= $event .target.value" >  
 " ><input [value]= "title" (Input) = "title= $event. Target.value";  

is that what it means? My understanding is that [] means that the value is passed, that is, the value is defined elsewhere, and here is the reference to the value, () the event listener, the listener that is worth the change in this tag, and the place where the change will be transmitted. Therefore, we can take advantage of this feature to pass data into subcomponents and to respond to changes in the data in the parent component. For example, now that we have an orders variable in the parent component, I can use it in the parent component's Template:

<delete-order-dialog [(orders)]="orders"></delete-order-dialog>

In this way, we input the object in the subassembly, and by certain actions, changes to orders can be passed back to the parent component and displayed on the page accordingly.

Why do you use typescript? I like JavaScript.

Why use typescript ah, I prefer JavaScript this weak type of language, how to use it, never need to consider the type of these ghosts. No matter in what field there will be a variety of groups, like the current front-end, there are react, Angular, Vue, and so on, these frameworks are many users, we can not simply judge a framework of the pros and cons, because some things are designed for a particular crowd, such as typescript, Java is a very handy back-end programmer to use. Well, with an open mind to learn something more, I started using spring and typescript.

Why do I have to add () after the syntax such as input?

On the question of parentheses, the official website has actually been mentioned many times, Don ' t forget the parentheses! Neglecting them leads to a error that's difficult to diagnose. No () will cause unexpected errors! Be sure to write. Why is it? Here I make a hypothesis, () in JavaScript, the general is to execute a function, then here the input (), in my view is to execute a function, marked with the following variables, help the program to run the positioning.

Finally Anli take my old driver Snow Wolf eldest brother translated Angular2 Chinese official website

To learn more, please visit my blog.

PS: I still like the Wind youth!

ANGULAR2 Development Notes