angular-cli创建项目

概述

Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它可以帮你做以下这些事情：

• 创建一个新的 Angular 应用程序
• 运行带有 LiveReload 支持的开发服务器，以便在开发过程中预览应用程序
• 添加功能到现有的 Angular 应用程序
• 运行应用程序的单元测试
• 运行应用程序的端到端 (E2E) 测试
• 构建应用程序

安装

1.在使用 Angular CLI 之前，你必须确保系统中 Node.js 的版本高于 6.9.0 且 npm 的版本高于 3.0.0。

若你尚未安装 Node.js，你可以访问 Node.js 官网，然后根据你所用的操作系统选择对应的安装方式。

2.当你本机 Node.js 环境确认无误后，你可以在命令行使用 npm 安装 TypeScript：

$ npm install -g typescript   # 安装最新的TypeScript稳定版

3.安装 Angular CLI

$ npm install -g @angular/cli  #安装Angular CLI

4.创建新的 Angular 应用程序

$ ng new jin-admin  # 创建新的目录，然后在新建的目录中运行 ng init 命令

当运行上面的命令后，将发生以下事情：

• 新的 jin-admin 目录被创建
• 应用程序相关的源文件和目录将会被创建
• 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
• 自动配置项目中的 TypeScript 开发环境
• 自动配置 Karma 单元测试环境
• 自动配置 Protractor (end-to-end) 测试环境
• 创建 environment 相关的文件并初始化为默认的设置
  此时 jin-admin 目录中 Angular 应用程序的目录结构如下：

.
├── 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

image.png

5.运行应用程序

$ cd jin-admin  #进入程序目录
$ ng serve  #运行程序

6.打开浏览器 输入http://localhost:4200/ 运行

当运行上面的命令后，将发生以下事情：

• Angular CLI 从 .angular-cli.json 文件中加载配置信息
• Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
• Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200

---

项目创建完成

至此，一个完整的项目框架通过angular-cli 命令创建完成，后面我们将进一步学习完成项目组件的创建，类的创建，指令的创建，模块的创建，测试，项目的构建等内容，详情及代码请移至github上查看，欢迎提出问题，也可以一并完成一个后台管理项目的常用组件集合，也请给个start，哈哈。