The basic role of Component, Module and Router

Component

Component is the key of Angular, and is the core goal of the whole framework. The component can encapsulate the logic inside the component. The encapsulated component can reuse, no matter inside the project or other projects.

Module

NgModule is the best way to organize the business code. Base on different scenario, package the components, services and routers to a independent module. The module like a piece of building blcok, which can build the whole building.

Router

There are 3 duties of router:

1. enables navigation from one view to the next as users perform application tasks.
2. load the Async module.
3. manage the life circle of component.

The Component template

The component template is the most important part of Angualr. We need to understand the following points:

The idea of Angular: Logic-less

Logic-less means DO NOT write complex JavaScript expressions in the template. The reason is that the template will be excute many times, the complex will effect the performance.

That’s why the Angular offical site says:

You can’t use JavaScript expressions that have or promote side effects, including:

• Assignments (=, +=, -=, …)
• Operators such as new, typeof, instanceof, etc.
• Chaining expressions with ; or ,
• The increment and decrement operators ++ and –
• Some of the ES2015+ operators

Other notable differences from JavaScript syntax include:

• No support for the bitwise operators such as | and &
• New template expression operators, such as |, ?. and !

Like this Angular template

<ul>
  <li *ngFor="let race of races">
    {{race.name}}
  </li>
</ul>

The browser doesn’t know the sytax of *ngFor and . Thus there must be a ‘compile’ operation in the browser to get the template function, then pass the date to the funxtion, and combine with the html tags, finally insert all these to the DOM tree.

There is another reason why Angular use Logic-less: in the whole life cycle of component, the template function will be excuted many time.

Mustache Syntax

The Mustache Syntax can do the following:

1. Interpolation: embedding expressions into marked up text. Means insert the value to this place.
2. Template expressions: produces a value and appears within the double curly braces.
3. Get the return value of the funciton which is defined in the component.

Binding syntax

Property Binding

It is One-way from data source to view target. Use [].

<img [src]="imgSrc" />

public imgSrc:string="./assets/imgs/1.jpg";

Event Binding

It is One-way from view target to data source. Use ().

<button class="btn btn‐success" (click)="btnClick($event)">
  Test event
</button>

public btnClick(event):void{
 alert("Test Event Binding！");
 }

Two-way Binding

<font‐resizer [(size)]="fontSizePx"></font‐resizer>

public fontSizePx:number=14;

Structural Directives

There are 3 Structural directives: *ngIf, *ngFor and ngSwitch.

*ngIf code example

<p *ngIf="isShow" style="background‐color:#ff3300">Show or not?</p>
 <button class="btn btn‐success" (click)="toggleShow()">Control visiable</butto
n>

public isShow:boolean=true;
public toggleShow():void{
this.isShow=!this.isShow;
}

*ngFor code example

<li *ngFor="let race of races;let i=index;">
  {{i+1}}‐{{race.name}}
</li>

public races:Array=[
 {name:"human"},
 {name:"animal"},
 {name:"other"}
 ];

Structural directives are responsible for HTML layout. They shape or reshape the DOM’s structure, typically by adding, removing, or manipulating elements.

A Html tag can ONLY use ONE Structural Directives in the same time.

Built-in attribute directives

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually applied to elements as if they were HTML attributes, hence the name.

• NgClass - add and remove a set of CSS classes
• NgStyle - add and remove a set of HTML styles
• NgModel - two-way data binding to an HTML form element

*ngClass code example

<div [ngClass]="currentClasses">a set of CSS classes</div>
<button class="btn btn‐success" (click)="setCurrentClasses()">Set</button>

public currentClasses: {};

public canSave: boolean = true;
public isUnchanged: boolean = true;5 public isSpecial: boolean = true;

setCurrentClasses() {
this.currentClasses = {
'saveable': this.canSave,
'modified': this.isUnchanged,
'special': this.isSpecial
};
}

.saveable {
  font‐size: 18px;
}
.modified {
  font‐weight: bold;
}
.special {
  background‐color: #ff3300;
}

Avoid to use ngStyle

ngStyle write CSS style inside the code, avoid to use it. It’s a bad way to code.