Angular4.x开发环境及项目创建指令汇总

一.安装Node.js

官方网址：https://nodejs.org/en/download/
 

---

二.全局安装Angular CLI 脚手架工具

 

 npm install -g @angular/cli 

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm uninstall -g @angular/cli  //卸载angular/cli /

 

npm cache clean  //清除缓存

cnpm install -g @angular/cli //重新安装

 

 

ng -v  //查看版本能否正常显示

 

---

三.创建项目

先到cmd里进入项目所在的目录，用cd命令进入。

ng new angular01  //

 

 

cd angular01

 

cnpm install     //安装依赖 

 

ng serve --open  //启动服务

   也可以进入指定文件目录，win7下shift右键选择如图所示启动：

 

---

四.项目的基本目录结构

. 
├── README.md 
├── e2e 
│ ├── app.e2e-spec.ts 
│ ├── app.po.ts 
│ └── tsconfig.e2e.json 
├── karma.conf.js 
├── package.json 
├── protractor.conf.js 
├── src //主目录 
│ ├── app 
│ │ ├── app.component.css 
│ │ ├── app.component.html 
│ │ ├── app.component.spec.ts 
│ │ ├── app.component.ts //组件 
│ │ └── app.module.ts //根模块 
│ ├── assets 
│ ├── environments 
│ │ ├── environment.prod.ts 
│ │ └── environment.ts 
│ ├── favicon.ico 
│ ├── index.html 
│ ├── main.ts 
│ ├── polyfills.ts 
│ ├── styles.css 
│ ├── test.ts 
│ ├── tsconfig.app.json 
│ ├── tsconfig.spec.json 
│ └── typings.d.ts 
├── tsconfig.json 
└── tslint.json

---

五.补充命令

Angualr CLI提供了许多常用命令供我们选择：

 

全写法比较麻烦，记住简写的首字母也可以的，唯一需要记忆的只有cl和c的区别

ng generate class my-new-class              // 新建 class
 ng generate component my-new-component      // 新建组件
 ng generate directive my-new-directive      // 新建指令
 ng generate enum my-new-enum                // 新建枚举
 ng generate module my-new-module            // 新建模块
 ng generate pipe my-new-pipe                // 新建管道
 ng generate service my-new-service          // 新建服务

ng g cl my-new-class        // 新建 class
 ng g c my-new-component     // 新建组件
 ng g d my-new-directive     // 新建指令
 ng g e my-new-enum          // 新建枚举
 ng g m my-new-module        // 新建模块
 ng g p my-new-pipe          // 新建管道
 ng g s my-new-service       // 新建服务