我们按照Angular官方教程开始建立第一个应用。
第一个应用
安装 node & npm
Angular通过npm(Node Package Manager)进行安装,再次之前需要先安装Node.js�(请移步到官网)。
提示：
Node.js版本至少需要6.9.x, 用node -v查看。
npm版本至少需要3.x.x, 用nmp -v查看。
安装Angular
执行命令
npm i -g @angular/cli
将Angular安装为全局命令。这样你就可以通过ng命令来创建Angular APP了。
创建应用
ng new demo01
这一步需要花费一些时间,通过npm安装写需要的package。
这一步在当前目录下创建了名校demo01的子目录，这是我们的工作目录。在进行下一步之前我们来看一看目录结构。
demo01
|-e2e/...
|-node_modules/...
|-src/...
|-.angular-cli.json
|-.editorconfig
|-.gitignore
|-karma.conf.js
|-package.json
|-protractor.conf.js
|-README.md
|-tsconfig.json
|-tslint.json
| 文件及目录名 | 含义 |
|---|---|
e2e/ |
End to End 测试 |
node_modules/ |
这是Node.js创建的目录，放的是第三方依赖的package。 |
.angular-cli.json |
为Angular命令"ng"提供配置的文件。具体内容参见官方文档
|
.editorconfig |
让不同的IDE具有相同的习惯配置，具体内容请参见http://editorconfig.org |
.gitignore |
Argular会自动创建git目录，这个文件配置不用git管理的文件或目录。例如: /node_modules |
karma.conf.js |
单元测试工具Karma的配置文件,可以使用命令"ng test"执行测试用例。 具体请参见Karma官网
|
package.json |
npm 配置文件，列出了项目需要的第三方依赖包。说明文档
|
protractor.conf.js |
End to End测试工具Protractor的配置文件。通过"ng e2e"执行测试用例。 |
README.md |
项目说明文档。 Markdown格式。 |
tsconfig.json |
TypeScript的编译配置。Angular推荐使用TypeScript进行代码的编写，编译成ECMAScript后再交于浏览器执行。TypeScript中文教程 |
tslint.json |
TypeScript的代码检查工具(TSLint)配置文件。 可以使用命令"ng lint"执行代码检查。 |
src/ |
源码目录，包含所有的组件、模板、样式、图片等。此目录之外的文件都是为了支持构建应用，而不是应用本身的一部分。 |
src目录结构说明
src
|-app
| |-app.component.css
| |-app.component.html
| |-app.component.spec.ts
| |-app.component.ts
| |-app.module.ts
| |-app.component.html
|
|-assets
| |-.gitkeep
|
|-environments
| |-environment.prod.ts
| |-environment.ts
|
|-favicon.ico
|-index.html
|-main.ts
|-polyfills.ts
|-styles.css
|-test.ts
|-tsconfig.app.json
|-tsconfig.spec.json
| 文件及目录名 | 含义 | |
|---|---|---|
app/app.component.{ts,html,css,spec.ts}
|
定义AppComponent包含HTML模板、CSS样式和单元测试。这是一个根组件，随着项目的进展这个目录会形成组件树。 |
|
app/app.module.ts |
定义AppModule。一般而言一个应用可以看成一个AppModule，用于声明应用由那些内容集合而成。 |
|
assets/* |
用来防止图片或其他资源类文件 | |
environments/* |
环境配置文件存放的目录。一般用于定义生产环境和开发环境的差异。通过命令行参数可以覆盖其中的参数。 | |
favicon.ico |
浏览器访问时或在收藏夹中显示网站的图标 | |
index.html |
浏览器访问第一个页面，由命令行命令创建。通常不需要修改。 | |
main.ts |
应用的主入口。将程序引导到app/app.module.ts
|
|
polyfills.ts |
解决浏览器在实现JS标准上存在的差异。关于polyfills的详细内容可以去它的官网看看
|
|
styles.css |
全局样式 | |
test.ts |
单元测试入口 | |
tsconfig.`{app |
spec}.json` |
TypeSript语言编译设置 |
启动应用开发环境
在�开发环境中启动HTTP服务十分简单。
cd demo01
ng serve --open #也可以简写成 ng serve -o
HTTP会使用4200端口启动。改变缺省端口有两种方法：
- 在配置文件
.angular-cli.json中的添加:"defaults"{ ... "serve": { "port": 4201 } }
ng serve --port 4201 -o
修改组件内容
项目的第一个组件对应的代码在app.component.ts中。里面定义了页面显示的title属性。
src/app/app.component.ts
------------------------
...
export class AppComponent {
title = 'app';
}
...
修改为:
export class AppComponent {
title = 'Demo01';
}
可以看到页面上的"Welcome to app!" 变成了 "Welcome to Demo01!"
下面我们来调整一下样式让标题的颜色变得好看一些。
src/app/app.component.css
-------------------------
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
修改为:
h1 {
color: #9c7ed0;
font-family: Arial, Helvetica, sans-serif;
font-size: 200%;
}
总结
本次我们开始尝试使用Angular：
- 创建了第一个应用
- 了解了项目构建的目录结构
算是有了一个感性的认识。
下一篇我们要从概念上了解Angular的一些基本概念和设计理念。
网友评论