根据文档创建angular英雄模型

[muyuqiu001]

No description provided.

[muyuqiu001]

根据quickstart创建后，运行时候有错误：

• cmd窗口

D:\js\angular2\quickstart>npm start

> angular-quickstart@1.0.0 prestart D:\js\angular2\quickstart
> npm run build


> angular-quickstart@1.0.0 build D:\js\angular2\quickstart
> tsc -p src/

node_modules/@types/jasmine/index.d.ts(39,52): error TS1005: '=' expected.

• debuglog

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.9
3 info using node@v6.9.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle angular-quickstart@1.0.0~prestart: angular-quickstart@1.0.0
6 verbose lifecycle angular-quickstart@1.0.0~prestart: unsafe-perm in lifecycle true
7 verbose lifecycle angular-quickstart@1.0.0~prestart: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\js\angular2\angular-tour-of-heroes\node_modules\.bin;C:\Users\yang\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\yang\bin;C:\Program Files (x86)\Common Files\NetSarang;C:\Program Files\Java\jdk1.7.0_79\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\Program Files\apache-maven-3.3.9\bin;D:\Program Files\apache-ant-1.9.7\bin;D:\Program Files\Go\bin;C:\Program Files\TortoiseSVN\bin;C:\Program Files (x86)\Common Files\Thunder Network\KanKan\Codecs;C:\Program Files\Git\cmd;C:\Program Files\Git\usr\bin;C:\Program Files\nodejs;C:\Program Files\TortoiseGit\bin;C:\Program Files\Microsoft VS Code\bin;C:\Users\yang\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
8 verbose lifecycle angular-quickstart@1.0.0~prestart: CWD: D:\js\angular2\angular-tour-of-heroes
9 silly lifecycle angular-quickstart@1.0.0~prestart: Args: [ '/d /s /c', 'npm run build' ]
10 silly lifecycle angular-quickstart@1.0.0~prestart: Returned: code: 1  signal: null
11 info lifecycle angular-quickstart@1.0.0~prestart: Failed to exec prestart script
12 verbose stack Error: angular-quickstart@1.0.0 prestart: `npm run build`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
12 verbose stack     at emitTwo (events.js:106:13)
12 verbose stack     at EventEmitter.emit (events.js:191:7)
12 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
12 verbose stack     at emitTwo (events.js:106:13)
12 verbose stack     at ChildProcess.emit (events.js:191:7)
12 verbose stack     at maybeClose (internal/child_process.js:877:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
13 verbose pkgid angular-quickstart@1.0.0
14 verbose cwd D:\js\angular2\angular-tour-of-heroes
15 error Windows_NT 6.1.7601
16 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
17 error node v6.9.2
18 error npm  v3.10.9
19 error code ELIFECYCLE
20 error angular-quickstart@1.0.0 prestart: `npm run build`
20 error Exit status 1
21 error Failed at the angular-quickstart@1.0.0 prestart script 'npm run build'.
21 error Make sure you have the latest version of node.js and npm installed.
21 error If you do, this is most likely a problem with the angular-quickstart package,
21 error not with npm itself.
21 error Tell the author that this fails on your system:
21 error     npm run build
21 error You can get information on how to open an issue for this project with:
21 error     npm bugs angular-quickstart
21 error Or if that isn't available, you can get their info via:
21 error     npm owner ls angular-quickstart
21 error There is likely additional logging output above.
22 verbose exit [ 1, true ]

去执行quickstart同样报错。看样子可能是npm或者node的原因

从quickstart里面有相同的问题，好像是jasmine的版本不对，可以跟踪：
angular/quickstart#367 (comment)

---

✅
不知道什么原因devDependencies:@types/jasmine修改成了^2.5.36，将版本号修改为2.5.36，就可以了

[muyuqiu001]

http://blog.csdn.net/woxueliuyun/article/details/39294375

Dependencies
可选字段，指示当前包所依赖的其他包。

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  }
}

版本格式可以是下面任一种：

• version 完全匹配
• >version 大于这个版本
• >=version大于或等于这个版本
• <version
• <=version
• ~version 非常接近这个版本
• ^version 与当前版本兼容
• 1.2.x X代表任意数字，因此1.2.1, 1.2.3等都可以
• http://... Unix系统下使用的tarball的URL。
• * 任何版本都可以
• ""任何版本都可以
• version1 - version2 等价于 >=version1 <=version2.
• range1 || range2 满足任意一个即可
• git... Git地址

[muyuqiu001]

https://angular.cn/docs/ts/latest/tutorial/toh-pt2.html中的如下内容：
我们在AppComponent上创建一个公共属性，用来暴露这些英雄，以供绑定。

我们并不需要明确定义heroes属性的数据类型，TypeScript 能从HEROES数组中推断出来。

❓ 没看懂在哪里添加

✅
在AppComponent类中添加的属性

[muyuqiu001]

span class="badge">{{hero.id}}</span> {{hero.name}}
关于badge的介绍 http://www.runoob.com/bootstrap/bootstrap-badges.html
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 添加到链接、Bootstrap 导航等这些元素上即可。

[muyuqiu001]

• 把AppComponent变成应用程序的“壳”，它只处理导航

• 把现在由AppComponent关注的英雄们移到一个独立的HeroesComponent中

• 添加路由

• 创建一个新的DashboardComponent组件

• 把仪表盘加入导航结构中

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/app.component.css Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:420 Unhandled Promise rejection: Failed to load app.component.css ; Zone: ; Task: Promise.then ; Value: Failed to load app.component.css undefined
consoleError @ zone.js:420
zone.js:422 ZoneAwareError

---

🏁
关于module.id的介绍
http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component

[muyuqiu001]

从效果看，在主页没有显示Top Heroes，需要检查哪里设置的不对。

dashboard.component.html里面不对

<h3>Top Heroes</h3>
<a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">