app/app.component.ts – It is the root component of what will become a tree of nested components as the application evolves.
app/app.module.ts – the root module that tells Angular how to assemble the application.
main.ts – The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src
folder named src/main.ts
quickstart
git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start
@Component
decorator’s templateUrl
property
Interpolation {{ … }}
<p>My current hero is {{currentHero.name}}</p>
Template expression
JavaScript expression that have or promote side effects are prohibited, includes :
- assignments (
=
,+=
,-=
, …) new
- chaining expressions with
;
or,
- increment and decrement operators (
++
and--
)
The pipe operator
<div>Title through uppercase pipe: {{title | uppercase}}</div>
The safe navigation operator (?.) and null property path
The Angular safe navigation operator (?.
) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank, but the app keeps rolling without errors.
The current hero's name is {{currentHero?.name}}
*NgIf
<hero-detail *ngIf="isActive"></hero-detail>
*NgFor
<div *ngFor="let hero of heroes">{{hero.name}}</div>
NgFor
is a repeater directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list.
microsyntax
“let hero from heroes” – Take each hero in the heroes array, store it in the local hero looping variable, and make it available to the templated HTML for each iteration.
create class
export class Hero { constructor( public id: number, public name: string) { } }
- Declares a constructor parameter and its type.
- Declares a public property of the same name.
- Initializes that property with the corresponding argument when creating an instance of the class.