Angular入门-运行

一、搭建环境

1.安装nodeJs和npm（npm是伴随着nodejs一起安装的），并且注意的是：要确保nodejs是6.9.x，npm是3.x.x，越新版本的越好，旧版本的容易出问题。

2.安装angular全局客户端：

npm install -g @angular/cli

二、创建新项目

1.打开终端创建一个angular的骨架程序，输入如下命令：

ng new my-app

这里要注意的是，新建的项目安装需要一定的时间，因为大多数需要安装依赖的npm包。

三、运行项目

安装完之后，就可以输入命令：ng serve，去运行项目了，此时angular客户端会监视你的系统文件，当文件有所变更的时候客户端会重新生成。如果运行：ng serve --open或者ng serve -o,则将自动打开你的浏览器，访问http://localhost:4200/.。你也可以自定义URL和端口号，还能指定重载端口号：(angular-cli官网地址：https://github.com/angular/angular-cli)

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

四、编辑项目

1.CLI客户端会为你创建一个Angular组件，你可以在./src/app/app.component.ts文件中编辑title:

2.你可以在src/app/app.component.css文件中给组件一些样式：

五、文件结构

1.先看src文件夹：

刚开始我们关注的是程序的入口，先来看看angular的运行机制：

先要import某个组件，才能在本程序文件中调用：

2.外层目录

此处介绍一下angular-cli.json的一些配置，如下图所示："apps"-"root"下配置了原代码的路径，"apps"-"outDir"配置了打包后的输出路径。

先记下目录的用处，后面开发的时候能快速上手。虽然有些用处暂时还没有了解，用到的时候自然会去深入。