全局安装 Angular CLI 脚手架并创建项目
1.使用 npm 安装命令
$ npm install -g @angular/cli
2.使用 ng new 项目名 命令创建项目
$ npm new my-app
3.进入创建的项目并运行
$ cd my-app && ng server --open
目录结构解析
项目结构
| 文件 | 用途 |
|---|---|
| e2e/ | 在 e2e/ 下是端到端（End-to-End）测试，它们不在 src/ 下，是因为端到端的测试实际上和应用相互独立的，它只适用于测试你的应用而已，这也就是为什么它会拥有自己的 tsconfig.json |
| src | 项目的所有文件都放在 src 里面，所有的 Angular 组件、模板、样式、图片以及应用所需要的任何东西 |
| node_modules/ | Node.js 创建了这个文件夹，并把 package.json 中的依赖模块都放在这里面 |
| .angular-cli.json | Angular CLI 的配置文件。在这个文件中，我们可以设置一些默认值，还可以配置项目编译时要包含的那些文件 |
| .editorconfig | 用于编辑器的简单配置文件，它用于确保参与项目的每个人都具有基本的编辑器配置，详情参见 http://editorconfig.org |
| .gitignore | Git 配置文件，用于确保某些生成的文件不会被提交到 Git 上 |
| Karma.conf.js | 给 Karma 的单元测试配置,当运行 ng test 时会用到 |
| package.json | npm 配置文件。其中列出了项目使用到的第三方依赖包。还可以在这里添加自定义脚本 |
| protractor.conf.js | 给 Protractor 使用的的端到端测试配置文件，当运行 ng e2e 时会用到 |
| README.md | 项目的基础文档 |
| tsconfig.json | TypeScript 编译器的配置 |
| tslint.json | 给 TSLint 和 Codelyzer 用的配置信息，当运行 ng lint 时会用到。Lint 功能可以帮助你保持代码风格的统一 |
src 目录结构
| 文件 | 用途 |
|---|---|
| app/app.component.{ts,html,css,spec.ts} | 组件使用的 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。它是根组件 |
| app/app.module.ts | 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用。目前，它之声明 AppModule。稍后它还会声明更多组件 |
| assets/* | 静态资源文件，这个文件夹下可以放如图片等任何资源，在构建应用时，它们会全都拷贝到发布包中 |
| environments/* | 这个文件夹中包括了各个目标环境准备的文件，它们导出了一些应用要用到的配置变量。这些文件会在构建应用时被替换 |
| favicon.ico | 站点图标 |
| main.ts | 应用的主要入口点 |
| polyfills.ts | 不同的浏览器对 Web 标准的支持程度不同。填充库（polyfill）能帮助我们把这些不同点进行标准化。可以查看 浏览器支持指南 |
| style.css | 全局样式 |
| test.ts | 单元测试的主要入口点 |
| tsconfig.{app|spec}.json | TypeScript 编译器的配置文件。tsconfig.app.json 是为 Angular 应用准备的。tsconfig.spec.json 是为单元测试准备的 |
app.module.ts 代码分析
// BrowserModule 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// angular 核心模块
import { NgModule } from '@angular/core';
// 根组件
import { AppComponent } from './app.component';
@NgModule({
// 引入当前项目运行的组件
declarations: [
AppComponent
],// 引入当前模块运行依赖的其他模块
imports: [
BrowserModule
],// 定义的服务
providers: [],// 根据应用的主视图（称为跟组件）通过引导根 AppModule 来启动应用，这里一般写的都是跟组件
bootstrap: [ AppComponent ]
})
// 根模块不需要导出任何东西，因为其他组件组件不需要导入根模块，但一定要写
export class AppModule { }
创建自定义组件
1.通过 ng g component 组件名称 命令创建自定义组件
$ ng g component components/header
2.app.module.ts 会自动添加 header 组件的引用
// BrowserModule 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// angular 核心模块
import { NgModule } from '@angular/core';
// 根组件
import { AppComponent } from './app.component';
// Header 组件
import { HeaderComponent } from './components/header/header.component';
@NgModule({
// 引入当前项目运行的组件
declarations: [
AppComponent,HeaderComponent
],// 引入当前模块运行依赖的其他模块
imports: [
BrowserModule
],// 定义的服务
providers: [],// 根据应用的主视图（称为根组件）通过引导根 AppModule 来启动应用，这里一般写的都是根组件
bootstrap: [AppComponent]
})
// 根模块不需要导出任何东西，因为其他组件不需要导入根模块，但一定要写。
export class AppModule { }
3.打开 app/components/header/header.component.ts
// 引入 angular 核心模块
import { Component,OnInit } from '@angular/core';
@Component({
// 在 HTML 中的引用标签名称
selector: 'app-header',// 组件 html 模板
templateUrl: './header.component.html',// 组件 css 样式
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit { // 实现 OnInit 接口
// 构造函数
constructor() { }
// 初始化加载的生命周期
ngOnInit() { }
}
4.在 app/app.component.html 中引入 header 组件
<app-header></app-header>
5.通过命令运行项目
$ ng server --open
