我们按照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           

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

启动应用开发环境

在�开发环境中启动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的一些基本概念和设计理念。