Angular快速上手-总结入门篇04

创建新应用

使用 CLI 命令创建一个名叫 angular-tour-of-heroes 的新项目。

ng new angular-tour-of-heroes

启动应用服务器

进入项目目录，并启动这个应用

cd angular-tour-of-heroes
ng serve --open

根据之前的文章【Angular快速上手-入门例子02】中我们可以知道他包含里面的具体内容【dos下命令为dir】，而展现在我们浏览器的页面是一个应用外壳，这个外壳是被一个名叫 AppComponent 的 Angular 组件控制的。
组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

1、在app.component.ts文件中将title内容改变为【你想要修改的内容】

2、在app.component.html文件中将welcome to {{title}} 改成 {{title}}

3、在文件app.component.css中添加以下css样式

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

小结

• 你使用 Angular CLI 创建了初始的应用结构。

• 你学会了使用 Angular 组件来显示数据。

• 你使用双花括号插值表达式显示了应用标题

效果如下