查看“Angular2”的源代码

=QuickStart=

<source lang='text'>
0、安装npm。

1、新建项目文件夹angular2，放入4个初始文件。
    package.jon
    tsconfig.json
    typings.json
    systemjs.config.js

2、安装包，项目文件夹下就会新增node_modules、typings文件夹。
    npm install

3、在项目文件夹根下运用文件夹app，新增3个运用文件。
    app.component.ts
    app.module.ts
    main.ts

4、在项目文件夹下新增2个文件。
    index.html
    types.css

5、编辑、运行程序。使用Browsersync来动态刷新页面。
    npm start
</source>


=安装ng2-file-upload =

在项目目录下，运行如下命令：
<source lang="bash">
npm install ng2-file-upload --save
</source>

=Tutorial=

==The Hero Editor==

Let’s take stock of what we’ve built.

* Our Tour of Heroes uses the double curly braces of interpolation (a kind of one-way data binding) to display the application title and properties of a Hero object.
* We wrote a multi-line template using ES2015’s template strings to make our template readable.
* We can both display and change the hero’s name after adding a two-way data binding to the <input> element using the built-in ngModel directive.
* The ngModel directive also propagates changes to every other binding of the hero.name.

==Master/Detail==

Here’s what we achieved in this chapter:

* Our Tour of Heroes now displays a list of selectable heroes
* We added the ability to select a hero and show the hero’s details
* We learned how to use the built-in directives ngIf and ngFor in a component’s template


==Multiple Components==

Let’s take stock of what we’ve built.

* We created a reusable component
* We learned how to make a component accept input
* We learned to declare the application directives we need in an Angular module. We list the directives in the NgModule * decorator's declarations array.
* We learned to bind a parent component to a child component.

==Services==

Let’s take stock of what we’ve built.

* We created a service class that can be shared by many components.
* We used the ngOnInit Lifecycle Hook to get our heroes when our AppComponent activates.
* We defined our HeroService as a provider for our AppComponent.
* We created mock hero data and imported them into our service.
* We designed our service to return a Promise and our component to get our data from the Promise.

=代码片段=

==file-size.pipe.ts==
<source lang="javascript">
import {Pipe, PipeTransform} from '@angular/core';

/*
 * Convert bytes into largest possible unit.
 * Takes an precision argument that defaults to 2.
 * Usage:
 *   bytes | humanFileSize:precision
 * Example:
 *   {{ 1024 |  humanFileSize}}
 *   formats to: 1 KB
*/
@Pipe({
    name: 'fileSize'
})
export class FileSizePipe implements PipeTransform {
    // In fact unit we should be get from Static Api, at the moment we set static
    private units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    // In French
    // private units = ['bit', 'kilo', 'Mo', 'Go', 'To', 'bps', 'dpi'];
    public transform(bytes: number = 0, precision: number = 2): string {
        if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) {
            return bytes.toString();
        }
        let unit = 0;
        while (bytes >= 1024) {
            bytes /= 1024;
            unit++;
        }

        return bytes.toFixed(precision).toString().replace(/\./g, ',') + ' ' + this.units[unit];
    }
}
</source>