Angular Web应用(1)
...新建项目 ...创建一个组件(template)
准备工作。
angular使用的是TypeScript这是ES6版的一个超集
- npm install -g typescript
Angular提供了一个命令行工具angular-cli，它能让用户通过命令行创建和管理项目。它自动化了一系列任务。当你创建和维护应用时，它能帮你遵循很多常用模式。
- npm install -g @angular/cli
如果失败了，npm install -g cnpm 安装cnpm，然后再全书中使用cnpm代替npm命令。可以通过ng命令设置为ng的默认鲍管理工具：ng set --global packageManager=cnpm
示例项目
运行应用 是运行在4200端口上
ng serve
制作Component
创建一个组件
组件化
比如说创建第一个组件就使用app-hello-world
<app-hello-world> </app-hello-world>
这个需要使用angular-cli来创建新组件，可以使用generate（生成）命令.
要生成hello-world组件，我们需要运行下列命令：
ng generate component hello-world
新建完成的组件在文件中的路径为：
src/app/hello-world/hello-world.component.ts
注意，TypeScript文件的后缀是.ts而不是.js。问题在于浏览器并不知道该如何解释Typescript文件，为了解决这个问题，ng serve 命令会自动把.ts文件变异为.js文件。
Component注解
@Component({
selector:'app-hello-world',
templateUrl:'./hello-world.component.html'
styleUrls:['./hello-world.component.css']
})
用templateUrl添加模板
添加template
@Component({
selector:'app-hello-world',
template:`
<p>hello-world works inline!</p>
`
})
用styleUrls添加CSS样式
效果如图所示
