Angular4示例--数据显示

参考引用
项目输出：

步骤：
1，新建一个空web项目

2，新建tsconfig.json、package.json配置文件

{
  "compilerOptions": { "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"lib": [ "es2015","dom" ],"noImplicitAny": true,"suppressImplicitAnyIndexErrors": true,"typeRoots": [ "../node_modules/@types/" ] },"compileOnSave": true,"exclude": [ "node_modules/*","**/*-aot.ts" ] }

package.json

{
  "name": "angular-io-example","version": "1.0.0","private": true,"description": "Example project from an angular.io guide.","scripts": { "test:once": "karma start karma.conf.js --single-run","build": "tsc -p src/","serve": "lite-server -c=bs-config.json","prestart": "npm run build","start": "concurrently "npm run build:watch" "npm run serve"","pretest": "npm run build","test": "concurrently "npm run build:watch" "karma start karma.conf.js"","pretest:once": "npm run build","build:watch": "tsc -p src/ -w","build:upgrade": "tsc","serve:upgrade": "http-server","build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js","serve:aot": "lite-server -c bs-config.aot.json","build:babel": "babel src -d src --extensions ".es6" --source-maps","copy-dist-files": "node ./copy-dist-files.js","i18n": "ng-xi18n","lint": "tslint ./src/**/*.ts -t verbose" },"keywords": [],"author": "","license": "MIT","dependencies": { "@angular/animations": "~4.2.0","@angular/common": "~4.2.0","@angular/compiler": "~4.2.0","@angular/compiler-cli": "~4.2.0","@angular/core": "~4.2.0","@angular/forms": "~4.2.0","@angular/http": "~4.2.0","@angular/platform-browser": "~4.2.0","@angular/platform-browser-dynamic": "~4.2.0","@angular/platform-server": "~4.2.0","@angular/router": "~4.2.0","@angular/tsc-wrapped": "~4.2.0","@angular/upgrade": "~4.2.0","angular-in-memory-web-api": "~0.3.2","core-js": "^2.4.1","rxjs": "^5.1.0","systemjs": "0.19.39","zone.js": "^0.8.4" },"devDependencies": { "@types/angular": "^1.5.16","@types/angular-animate": "^1.5.5","@types/angular-cookies": "^1.4.2","@types/angular-mocks": "^1.5.5","@types/angular-resource": "^1.5.6","@types/angular-route": "^1.3.2","@types/angular-sanitize": "^1.3.3","@types/jasmine": "2.5.36","@types/node": "^6.0.45","babel-cli": "^6.16.0","babel-preset-angular2": "^0.0.2","babel-preset-es2015": "^6.16.0","canonical-path": "0.0.2","concurrently": "^3.0.0","http-server": "^0.9.0","jasmine": "~2.4.1","jasmine-core": "~2.4.1","karma": "^1.3.0","karma-chrome-launcher": "^2.0.0","karma-cli": "^1.0.1","karma-jasmine": "^1.0.2","karma-jasmine-html-reporter": "^0.2.2","karma-phantomjs-launcher": "^1.0.2","lite-server": "^2.2.2","lodash": "^4.16.2","phantomjs-prebuilt": "^2.1.7","protractor": "~5.1.0","rollup": "^0.41.6","rollup-plugin-commonjs": "^8.0.2","rollup-plugin-node-resolve": "2.0.0","rollup-plugin-uglify": "^1.0.1","source-map-explorer": "^1.3.2","tslint": "^3.15.1","typescript": "~2.3.2" },"repository": {} }

2，添加必不可少的systemjs.config.js

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },// map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',// angular bundles
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js','@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js','@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js','@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js','@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',// other libraries
      'rxjs':                      'npm:rxjs','angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },// packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js'
      },rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

4，添加index.html、style.css、main.ts

<!DOCTYPE html>
<html>
  <head>
    <title>Displaying Data</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfills -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script> System.import('main.js').catch(function(err){ console.error(err); }); </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

style.css

/* Master Styles */
h1 { color: #369; font-family: Arial,Helvetica,sans-serif; font-size: 250%; }
h2,h3 { color: #444; font-family: Arial,sans-serif; font-weight: lighter; }
body { margin: 2em; }
body,input[text],button { color: #888; font-family: Cambria,Georgia; }
a { cursor: pointer; cursor: hand; }
button { font-family: Arial; background-color: #eee; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; cursor: hand; }
button:hover { background-color: #cfd8dc; }
button:disabled { background-color: #eee; color: #aaa; cursor: auto; }

/* Navigation link styles */
nav a { padding: 5px 10px; text-decoration: none; margin-right: 10px; margin-top: 10px; display: inline-block; background-color: #eee; border-radius: 4px; }
nav a:visited,a:link { color: #607D8B; }
nav a:hover { color: #039be5; background-color: #CFD8DC; }
nav a.active { color: #039be5; }

/* everywhere else */
* { font-family: Arial,sans-serif; }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

5，新建app文件夹，并添加hero.ts、app.module.ts、app.component.ts
hero.ts

export class Hero {
  constructor(
    public id: number,public name: string) { }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],declarations: [
    AppComponent
  ],bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'my-app',template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero.name}}</h2> <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"> {{ hero.name }} </li> </ul> <p *ngIf="heroes.length > 3">There are many heroes!</p> `
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = [
    new Hero(1,'Windstorm'),new Hero(13,'Bombasto'),new Hero(15,'Magneta'),new Hero(20,'Tornado')
  ];
  myHero = this.heroes[0];
}

6，项目结构：

7，生成项目。第一次生成比较慢，因为要通过npm下载各种依赖。如果第一次执行生成时提示 node_modules/xxx 不存在，找不到，关闭并重新打开Visual Studio再试。
8，源码下载