前言：目前 Angular  JS  好多公司都在用【当下面试不可缺少的技能】，但是说到它，该如何玩，怎么去创建项目？

官方文档：https://angular.io/cli

官方说30分钟不到就可以创建完成入门。

给我8分钟记录一下，呵呵。

1.在本地创建存放项目的文件夹。

2.双击进入文件夹，在文件管理器的上方点击文件，选择（打开Windows PowerShell）。

3.安装Angular CLI 。

运行命令：npm install -g @angular/cli

4.创建项目。

运行命令：ng new my-app

5.这时在文件夹TestAngular里面会有my-app项目，然后我们使用命令进入项目并且运行它。

运行命令：cd my-app   

ng serve --open

6.运行效果。

这样项目已经创建好了*—*

接下来我们使用VS Code将其打开【VS Code安装地址：https://code.visualstudio.com/】，看看项目的基础结构，就可以开始玩了*-*

对angular项目中的一些文件的概述

angular-cli.json

Angular CLI 的配置文件。 在这个文件中，你可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。

karma.conf.js

karma 测试运行器的配置。

protractor.config.js

protractor 端对端 (e2e) 测试器运行器的配置。

package-lock.json

package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

package.json

为项目指定 npm 依赖包。包含了一些命令脚本，用来运行应用、运行测试与其他。

tsconfig.json

为 TypeScript 编译器指定如何将 TypeScript 代码转换为 JavaScript 文件，用来在所有现代浏览器中运行。

tslint.json

利用 npm 安装的 TypeScript 语法检查器 (linter) 检测 TypeScript 代码并在你违反它的规则时提示你。

文件夹e2e/

应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。

文件夹node_modules/

用 npm install 命令安装的 npm 包。

polyfills.ts

不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用 core-js 和 zone.js 通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。

environments/*

这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在产品环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。

对其中一些文件的详细描述

package.json

概述:package.json是npm创建的并且是需要使用npm引入依赖包的时候的配置文件。
　　每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

最基本的package.json文件

{"name" : "xxx","version" : "0.0.0",
}

package.json文件中各个字段的说明

　　1、scripts字段指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

　　2、dependencies字段，devDependencies字段dependencies字段指定了项目运行所依赖的模块，
　　　　devDependencies指定项目开发所需要的模块。
　　　　它们都指向一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

　　3、peerDependencies
　　　　有时，你的项目和所依赖的模块，都会同时依赖另一个模块，但是所依赖的版本不一样。比如，你的项目依赖A模块和B模块的1.0版，而A模块本身又依赖B模块的2.0版。
　　　　大多数情况下，这不构成问题，B模块的两个版本可以并存，同时运行。但是，有一种情况，会出现问题，就是这种依赖关系将暴露给用户。
　　　　最典型的场景就是插件，比如A模块是B模块的插件。用户安装的B模块是1.0版本，但是A插件只能和2.0版本的B模块一起使用。这时，用户要是将1.0版本的B的实例传给A，就会出现问题。因此，需要一种机制，在模板安装的时候提醒用户，如果A和B一起安装，那么B必须是2.0模块。
　　　　peerDependencies字段，就是用来供插件指定其所需要的主工具的版本。

　　4、bin字段用来指定各个内部命令对应的可执行文件的位置。

　　5、main字段指定了加载的入口文件，require(‘moduleName‘)就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。

　　6、config 字段段用于添加命令行的环境变量。

　　7、browser字段指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。

　　8、engines 字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器。

　　9、man字段用来指定当前模块的man文档的位置。

　　10、style字段指定供浏览器使用时，样式文件所在的位置。样式文件打包工具parcelify，通过它知道样式文件的打包位置。

tsconfig.json

tsconfig.json的作用

　　在项目的根目录下创建 tsconfig.json 文件。
　　浏览器不能直接执行 TypeScript ，需要用编译器转译成JavaScript，而且编译器需要进行一些配置。 tsconfig.json 的配置就是指导编译器如何生成JavaScript文件。

tsconfig.json中各个参数的作用

{"compilerOptions": {"declaration": false,"module": "commonjs", // 组织代码的方式"target": "es5", // 编译目标平台"moduleResolution": "node","sourceMap": true, // 把ts文件变异成js文件时，是否生成对应的SourceMap文件"emitDecoratorMetadata": true, // 让TypeScript支持为带有装饰器的声明生成元数据"experimentalDecorators": true, // 是否启用实验性装饰器特性"noImplicitAny": true,"lib": ["dom", "es6"],"suppressImplicitAnyIndexErrors": true},"exclude": ["node_modules","dist"],"awesomeTypescriptLoaderOptions": {"forkChecker": true,"useWebpackText": true},"compileOnSave": false,"buildOnSave": false
}

Polyfills

/*配置好上述的几个文件之后呢，我们在项目中的根目录下创建一个 src 文件夹。在 src 文件夹的下面新建一个 polyfills.ts 文件。polyfills.ts 文件里引入了运行Angular应用时所需的一些标准js。
*/
import ‘core-js/es6/symbol‘;
import ‘core-js/es6/object‘;
import ‘core-js/es6/function‘;
import ‘core-js/es6/parse-int‘;
import ‘core-js/es6/parse-float‘;
import ‘core-js/es6/number‘;
import ‘core-js/es6/math‘;
import ‘core-js/es6/string‘;
import ‘core-js/es6/date‘;
import ‘core-js/es6/array‘;
import ‘core-js/es6/regexp‘;
import ‘core-js/es6/map‘;
import ‘core-js/es6/set‘;
import ‘core-js/es6/weak-map‘;
import ‘core-js/es6/weak-set‘;
import ‘core-js/es6/typed‘;/** Evergreen browsers require these. **/
import ‘core-js/es6/reflect‘;import ‘core-js/es7/reflect‘;/*** Zone JS is required by Angular itself.*/
import ‘zone.js/dist/zone‘;import ‘ts-helpers‘;if (process.env.ENV === ‘production‘) {// Production
} else {// Development and testError[‘stackTraceLimit‘] = Infinity;require(‘zone.js/dist/long-stack-trace-zone‘);
}

初始结构的讲解也可以看下这个：https://blog.csdn.net/wulex/article/details/82222629