#1 :Angular环境配置

---

No1：安装nodejs

No2：检查版本号：node -v          [ > 6.9.x]

No3：检查版本号：npm -v            [> 3.x.x]

No4：安装cnpm ：npm install -g cmp --registry=https://registry.npm.taobao.org

No5：安装Angular CLI脚手架工具： cnpm install -g @angular/cli

No6：检查版本号：ng -v

No7：创建项目：ng new projectName

No8：进入项目 ：cd projectName

No9：安装依赖：cnpm install

No10：启动服务：ng serve --open

No11：用webStorm  /  VSCode 打开projectprojectName文件

No12：创建组件：ng g component componentContainer/componentName

注：Visual Studio Code：https://code.visualstudio.com/

        需安装插件---Angular v4 TypeScript snippets.

---

#2 :Angular4.x 项目目录结构

---

---

#3 :Angular4.x CLI基础代码分析

---

《e2e》：端到端的测试目录

《src》：应用源代码目录 ，我们的代码都在此写入

+《app》:包含应用的组件和模块

         - <app.component.ts>：【【组件】】应用的地基

import { Component } from '@angular/core';

//从angular的核心模块中引入component装饰器

@Component({                                                                                                                                          selector: 'app-root',                                                                                                                            templateUrl: './app.component.html',                                                                                                styleUrls: ['./app.component.css']                                                                                              })

//组件元数据装饰器；用装饰器定义了一个组件  [所有的组件都需要一个装饰器来注解@]  //selector       ：css选择器，此属性表示组件可以通过app-root这个html标签来调用          //templateUrl ：指定一个html文件作为模板，最终在index.html的 app-root位置呈现          //styleUrls      ：指向一组css文件，在css中编写这个组件模板中要到的样式

export class AppComponent {  title = 'app works!';    }

//定义了这个组件的控制器[一个被装饰器修饰的TypeScript类]                                            //AppComponent  ：一个TypeScript类  [用装饰器来附加元数据]

        - <app.module.ts>：【【模块】】[一个模块也是被装饰器装饰的TypeScript类]

//用@NgModule这个装饰器声明了一个模块                                                           

//declarations ：此属性声明了模块有什么东西【组件，指令，管道】                             

//imports        ：这个属性声明了应用正常使用还需要的其他模块                       

//BrowerModule ：开发web应用必备浏览器模块                                                   

//FormsModule  ：处理表单的模块 

 //HttpModule  ：提供Http服务                                                                                       

//providers    ：声明模块中用了声明服务  只能在[]中声明 【服务】       

 //bootstrap    ：声明模块的主组件

+《assets》：用来存静态资源的

+《environments》：环境配置，angular是支持多环境的[可测试，开发，生产共用一套代码]

+  <favicon.ico>：图标文件

+ <index.html>： 应用的根html ，系统第一次访问的页面  [注:app-root]

+ <main.ts>： 整个web应用的入口点，脚本执行的入口点，angular通过这个文件来启动项目

import './polyfills.ts';

//导入必要的库 以便angular正常的运行在老版本浏览器中

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 从angular的浏览器模块中导入platformBrowserDynamic方法，告诉angular使用哪个模块来启动应用

import { enableProdMode } from '@angular/core';

//enableProdMode 关闭angular的开发者模式

import { environment } from './environments/environment';

//导入环境配置

import { AppModule } from './app/app.module';

//导入命令行生成的那个主模块

if (environment.production) {                                                                                                                enableProdMode();                                                                                                                          }

//如果是生产模式，就调用这个方法来关闭开发者模式

platformBrowserDynamic().bootstrapModule(AppModule);

//调用().bootstrapModule方法传入AppModule作为启动模块来启动模块

+ <polyfills.ts>：用来导入一些必要的库，使angular正常的运行在某些老版本浏览器

+ <style.css>：在此写应用的全局的样式

+ <test.ts>：搞自动化测试的

+ <tsconfig.json>：typescript编译器的配置文件

<.editorconfig>：webstorm的配置文件

<angular-cli.json>：angular 命令行配置文件  ,实战项目引入第三方包需修改此文件

<karma.conf.js>：karma配置文件，用来执行自动化测试。karma是单元测试的执行器

<package.json>：npm工具的配置文件，列明了当前应用所使用到的第三方依赖包

<protractor.conf.js>：做自动化测试的配置文件

<README.md>：包含了angular命令行生成的标准说明

<tslint.json>：tslint的配置文件，用来定义typescript代码质量