Angular入门系列:第一章:创建项目
本文参考自Angular中文网,原文链接:https://angular.cn/tutorial/toh-pt0
应用的外壳
首先,使用 Angular CLI 来创建最初的应用程序。 在本教程中,你将修改并扩展这个入门级的应用程序,以创建出《英雄之旅》应用。
在教程的这个部分,你将完成下列工作:
- 设置开发环境。
- 创建新的工作区,并初始化应用项目。
- 启动开发服务器。
- 修改此应用。
1. 搭建开发环境
安装Node.js
和npm
安装 Angular CLI
你可以使用 Angular CLI 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
要使用 npm 命令安装 CLI,请打开终端/控制台窗口,输入如下命令:
npm install -g @angular/cli
安装时候如果遇到
ng : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1,因为在此系统上禁止运行脚本
请参考此文章:https://blog.csdn.net/df981011512/article/details/105663996
2. 创建工作空间和初始应用
ng new angular-tour-of-heroes
前面两个输入Y,第三个选择CSS就行,然后等待完成就可以了
3. 启动应用服务器
进入工作区目录,并启动这个应用。
cd angular-tour-of-heroes
ng serve --open
ng serve
命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。
--open
标志会打开浏览器,并访问 http://localhost:4200/。
你会发现本应用正运行在浏览器中。
执行后的过程:
执行完成后如下
打开浏览器输入http://localhost:4200/,结果如下
4. 修改此应用
Angular 组件
你所看到的这个页面就是应用的外壳。 这个外壳是被一个名叫 AppComponent
的 Angular 组件控制的。
组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
修改应用标题
用你最喜欢的编辑器或 IDE 打开这个项目,并访问 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';
打开组件的模板文件 app.component.html
并清空 Angular CLI 自动生成的默认模板。改为下列 HTML
内容:
<h1>{{title}}</h1>
双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title
属性的值绑定到 HTML
中的 h1
标记中。
浏览器自动刷新,并且显示出了新的应用标题。
添加应用样式
大多数应用都会努力让整个应用保持一致的外观。 因此,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[type="text"], button {
color: #333;
font-family: Cambria, Georgia;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
效果如下:
查看最终代码
下面是本页所提到的源代码:
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';
}
src/app/app.component.html
<h1>{{title}}</h1>
src/styles.css (excerpt)
/* 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[type="text"], button {
color: #333;
font-family: Cambria, Georgia;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
小结
- 你使用 Angular CLI 创建了初始的应用结构。
- 你学会了使用 Angular 组件来显示数据。
- 你使用双花括号插值显示了应用标题。