全局安装AngularCLI脚手架并创建项目1.使用npm安装命令$npminstall-g@angular/cli2.使用ngnewprojectname命令创建项目$npmnewmy-app3.进入创建的项目，运行$cdmy-app&&ngserver--opendirectorystructureanalysisprojectstructurefilepurposee2e/undere2e/areend-to-end(End-to-End）测试，它们不在src/，因为端到端测试其实是独立于应用程序的，它只适合测试你的应用程序，这也是为什么它会有自己的tsconfig.json所有文件src项目的所有内容都放在src中，所有Angular组件、模板、样式、图像以及应用程序所需的任何内容node_modules/Node.js创建此文件夹并将依赖模块放在package.json中it.angular-cli.jsonCLI的Angular配置文件。在这个文件中，我们可以设置一些默认值，还可以配置在项目编译时包含这些文件。editorconfig是一个简单的编辑器配置文件，用于保证参与项目的每个人都有一个基本的编辑器配置，详情见http://editorconfig.org。gitignoreGit配置文件，用于确保某些生成的文件不会提交给GitKarma.conf.jsKarma的单元测试配置，在对package.jsonnpm配置文件运行ngtest时使用。列出了项目使用的第三方依赖包。您还可以在此处将自定义脚本protractor.conf.js添加到Protractor使用的端到端测试配置文件中。运行nge2e时，会使用README.md项目的基础文件tsconfig.json和TypeScript编译器的配置tslint。TSLint和Codelyzer的json配置信息，将在运行nglint时使用。Lint功能可以帮助您维护统一的代码样式src目录结构文件目的app/app.component.{ts,html,css,spec.ts}组件使用的HTML模板、CSS样式和单元测试定义了AppComponent组件。根组件app/app.module.ts定义了AppModule，它告诉Angular如何组装应用程序。目前，它声明了AppModule。后面会声明更多的组件assets/*静态资源文件，图片等任何资源都可以放在这个文件夹下，在构建应用的时候会全部复制到releasepackageenvironments/*这个文件夹包括为每个target准备的文件环境，它导出一些配置变量以供应用程序使用。这些文件在构建应用程序时被替换favicon.ico站点图标main.ts应用程序的主要入口点polyfills.ts不同的浏览器在不同程度上支持Web标准。Polyfill帮助我们标准化这些差异。您可以查看浏览器支持指南。style.css全局样式test.ts单元测试的主要入口点tsconfig.{app|spec}.jsonTypeScript编译器配置文件。tsconfig.app.json是为Angular应用程序准备的。tsconfig.spec.json是为单元测试准备的app.module.ts代码分析//BrowserModulebrowserparsedmoduleimport{BrowserModule}from'@angular/platform-b??rowser';//Angular核心模块import{NgModule}from'@angular/core';//根组件import{AppComponent}from'./app.component';@NgModule({//引入当前项目运行的组件声明：[AppComponent],//引入当前模块依赖的组件其他模块导入：[BrowserModule],//定义的服务提供者：[],//根据应用程序的主视图（称为根组件），通过引导根AppModule来启动应用程序，这里一般写成与组件bootstrap:[AppComponent]})//根模块不需要导出任何东西，因为其他component组件不需要导入根模块，而必须写exportclassAppModule{}创建自定义组件1.通过nggcomponent组件名命令创建自定义组件$nggcomponentcomponents/header2.app.module.ts会自动在头组件中添加引用//BrowserModule浏览器解析的模块import{BrowserModule}from'@angular/platform-b??rowser';//Angular核心模块import{NgModule}from'@angular/核';//根组件import{AppComponent}from'./app.component';//头部组件import{HeaderComponent}from'./components/header/header.component';@NgModule({//导入当前项目运行组件声明:[AppComponent,HeaderComponent],//引入当前模块运行依赖的其他模块imports:[BrowserModule],//定义服务提供者:[],//根据到应用程序的主视图（称为根组件）通过引导根AppModule来启动应用程序，这里一般写成根组件bootstrap:[AppComponent]})//根模块不需要导出任何东西，因为其他组件不需要导入根模块，但是必须这样写导出类AppModule{}3。打开app/components/header/header.component.ts//导入angular核心模块import{Component,OnInit}from'@angular/core';@Component({//ReferenceinHTMLTagnameselector:'app-header',//componenthtmltemplatetemplateUrl:'./header.component.html',//componentcssstylestyleUrls:['./header.component.css']})exportclassHeaderComponentimplementsOnInit{//实现OnInit接口//Constructorconstructor(){}//初始化加载的生命周期ngOnInit(){}}4.引入header组件
