angular-cli 安装与使用

安装Angular CLI

1.首先确认安装了node.js和npm

// 显示当前node和npm版本
$ node -v
$ npm -v
// node 版本高于6.9.3  npm版本高于3.0.0

2.全局安装typescript（可选）

$ npm install -g typescript 
// 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。

3.安装Angular CLI

$ npm install -g @angular/cli

经过不算漫长的等待，你的Angular CLI就装好了。确认一下：

$ ng v

// 出现下面画面说明安装成功，如果不成功你可能需要uninstall一下，再重新来过
$ ng v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64

这里强烈推荐使用淘宝镜像安装：

$ ng new myapp --skip-install  // 先跳过npm安装
$ cd myapp
$ cnpm install                      // 使用淘宝源安装

成果展示

安装完成之后就可以启动项目了：

cd myapp
ng serve -open

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

使用--open（或-o）参数可以自动打开浏览器并访问 http://localhost:4200/。

结果如下：

改变运行端口：

通过命令行方式修改，如下：

ng serve --port 4201

具体应用：

创建module，component，service，class

具体的工程目录如下：