Angular学习笔记——起步

发表于 | 分类于 | 本文总阅读量 次
字数统计: 618 | 阅读时长 ≈ 3

前言

对于Angular其实早就想学习一番了，毕竟它的所支持的很多东西（比如TypeScript和Rx.js）在我看来都是很有学习的价值的。但由于最近几月事情很多，所以一直没有抽出时间来学习它。前段时间地平线的一位师兄又说到这事，自己下来后好好地想了一想，觉得还是不能将很多事情当做自己不学新东西的借口。所以清理杂念，争取每天都抽出一些时间来学习Angular。此外这些笔记都是基于现在最新的Angular6.17的文档学习的（话说我咋记得我最开始想学Angular的时候版本好像还在5呢，这才几个月就跳了一个版本了。。。。。。）

安装

Angular在安装上和Vue以及React并没有太大的不同，都是通过下载相应的cil，然后就可以搭建好脚手架，直接启动相应的示例项目：

1
2
3
4
cnpm install -g @angular/cli
ng new angular-tour-of-heroes
cd angular-tour-of-heroes
ng serve --open

然后我们就可以在浏览器中打开 http://localhost:4200/ 就可以。页面的图我就不截了，反正三大框架都差不多。

然后还是老套路，找到主文件：
输入图片说明

然后就可以按照官方文档所说的：
image

按照上面的步骤，对其中对应的文件进行修改，首先是app.component.ts下的文件：

1
2
3
4
5
6
7
8
9
10
11
// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

然后是相对于的HTML的文件：

1
2
<!--src/app/app.component.html-->
<h1>{{title}}</h1>

就可以得到这样的效果了：

输入图片说明

（其实Angular和Vue还是有很多相似的地方的，无论是两者统一的使用cil进行脚手架的构建，还是他们的模板语法（双括号）。）

然后我们又可以从src的目录下找到style.css的css文件
。它是CLI生成了一个空的css文件。我们可以将应用程序范围的样式放在那里。比如官方示例的CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 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;
}