Angular authoritative tutorial reading summary (1)

set off

During the winter vacation, the teacher arranged a web homework, made a personal blog, and gave the seed project code. At first glance, I found that it was written in angularjs, and it was something from several years ago (probably already eliminated 233), So I read the angular documentation and decided to use angular5 for development. Now I join a team, and the front-end framework in it happens to use angular5, so I set a goal for myself, combining the project code, official documents, and this book for more in-depth study. Here is a record of my experience from reading the book.

deconstruct

When importing module components, the destructuring assignment feature of es6 is used, such as import { componet } from '@angular/core'
and then the project has import { ...something } from 'xxModule'; I don't quite understand the meaning of the expression.

backticks template string

Backtick strings expand template variables!

input property

In Angular, adding a property with square brackets (like [foo] ) means passing a value to the input property of the same name on the component (like foo )

Boot process

ng serve >> angular-cli.json >> main.ts >> bootstrap bootstrap module (AppModule) >> top-level component AppComponent >> render template

template variable

<input name="link" #newlink></input>

The #newlink syntax here is called a parsing. Angular assigns the tag element with #(hash) set to a local variable, which represents the Dom of this element. The effect is to make the variable newlink available to all expressions in the view. middle.

component host option

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
  host:{
    class: 'row'
  }
})

The host of a component is the element to which the component is attached. With the host option, we can set the host element inside the component. (I don't quite understand what the specific effect is.)

optional parameter

constructor(aa: string, bb: string, cc?: number){
    this.cc= cc|| 0;
  }

The cc parameter above is an optional parameter, indicated by the ? marked out.

Extended reading

1. Fat model, skinny controller
2. Destructuring assignment of variables
3. Angular Advanced Style Guide
4. Angular Directive