AngularJS2 学习笔记（一）

How Works

Each components is composed of three parts:
• Component Decorator
• A View
• A Controller

The @Component is called a decorator. It adds metadata to the class that follows it .
The @Component annotation specifies:
• a selector, which tells Angular what element to match
• a template, which defines the view
The Component controller is defined by a class, the InventoryApp class, in this case.

Using the {{…}} syntax is called template binding.

Unlike Angular 1, where all directives are essentially globals, in Angular 2 you must specifically say
which directives you’re going to be using.

1 @Component({
2 //…
3 inputs: [‘name’, ‘age’, ‘enabled’]
4 //…
5 })
6 class MyComponent {
7 name: string;
8 age: number;
9 enabled: boolean;
10 }

if we wanted to represent the exposed property enabled in my component as isEnabled,
we could use the alternative notation, like this:

1 @Component({
2 //…
3 inputs: [
4 ‘name: name’,
5 ‘age: age’,
6 ‘isEnabled: enabled’
7 ]
8 //…
9 })
10 class MyComponent {
11 name: string;
12 age: number;
13 isEnabled: boolean;
14 }

To create a custom output event we do three things:
1. Specify outputs in the @Component configuration
2. Attach an EventEmitter to the output property
3. Emit an event from the EventEmitter, at the right time

1 let ee = new EventEmitter();
2 ee.subscribe((name: string) => console.log(Hello ${name}));
3 ee.emit(“Nate”);
4
5 // -> “Hello Nate”

When we assign an EventEmitter to an output Angular automatically subscribes for us.
You don’t need to do the subscription yourself (necessarily, though you can add your own
subscriptions if you want to).

32 @Component({
33 selector: ‘product-image’,
34 host: {class: ‘ui small image’},
35 inputs: [‘product’],
36 template:
37 <img class="product-image" [src]="product.imageUrl">
38
39 })
40 class ProductImage {
41 product: Product;
42 }

1 <!-- wrong, don't do it this way -->2 <img src="{{ product.imageUrl }}">

Why is that wrong? Well, because in the case where your browser loads that template before Angular
has run, your browser will try to load the image with the literal string {{ product.imageUrl }} and
then it will get a 404 not found, which can show a broken image on your page until Angular runs.

backtick string
${variable}

In Angular 1, the default option was two-way data binding. Two-way data binding is super easy
to get started: your controllers have data, your forms manipulate that data directly, and your views
show the data.
The problem with two-way data binding is that it often causes cascading effects throughout your
application and makes it really difficult to trace data flow as your project grows.
Another problem with two-way data binding is that because you’re passing data down through
components it often forces your “data layout tree” to match your “dom view tree”. In practice, these
two things should really be separate.

build-in compoents

HgIf
NgSwitch
NgStyle
NgClass
NgFor
NgNonBindable

FORMS

to be continue…