Angular6学习笔记3(修改Angular组件:app.component)
Angular组件 继学习笔记2后,启动应用。浏览器出现如下界面:
文章图片
这个是由一个名称是 “AppComponent”
的 Angular 组件控制的。
关于组件:组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
【Angular6学习笔记3(修改Angular组件:app.component)】打开项目的目录:src/app , 可以看到AppComponent实现的三个文件:
-
app.component.ts
— 组件的类代码,这是用 TypeScript 写的。
-
app.component.html
— 组件的模板,这是用 HTML 写的。
app.component.css
— 组件的私有 CSS 样式。
app.component.ts(
组件的类文件),将已有的
title
属性的值修改为 'Tour of Heroes'title = 'Tour of Heroes';
2) .打开app.component.html(组件的模版文件),将Angular CLI 自动生成的默认模板。改为下列 HTML 内容
{{title}}
注意:双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的
title
属性的值绑定到 HTML 中的 h1
标记中然后浏览器会自动刷新,出现如下界面:
文章图片
2.增加应用样式 大多数应用都会努力让整个应用保持一致的外观。 因此,CLI 会生成一个空白的
styles.css
文件。 你可以把全应用级别的样式放进去。进入目录: src/
styles.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;
}
然后浏览器刷新,出现以下界面:
文章图片
推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- 由浅入深理解AOP
- 继续努力,自主学习家庭Day135(20181015)
- python学习之|python学习之 实现QQ自动发送消息
- Android中的AES加密-下
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习