Angular学习笔记1

我们按照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端口启动。改变缺省端口有两种方法：

1. 在配置文件.angular-cli.json中的添加:

"defaults"{
    ...
    "serve": {
        "port": 4201
    }
}

2. 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的一些基本概念和设计理念。