创建新应用
使用 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 组件来显示数据。
-
你使用双花括号插值表达式显示了应用标题
效果如下