Angular终极教程
B站找到一个Angular的教程，个人感觉讲的清楚明白，分享给大家：B站链接
RxJS快速入门 快速跳转
NgRx 点我
贴一下文档吧
Angular 企业实战开发
1. 概述
Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。
Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。
Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。
Angular Angular 中文 Angular CLI
2. 架构预览
2.1 模块
Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 NgModule 即 Angular 模块。
NgModule 是一组相关功能的集合，专注于某个应用领域，可以将组件和一组相关代码关联起来，是应用组织代码结构的一种方式。
在 Angular 应用中至少要有一个根模块，用于启动应用程序。
NgModule 可以从其它 NgModule 中导入功能，前提是目标 NgModule 导出了该功能。
NgModule 是由 NgModule 装饰器函数装饰的类。
import { BrowserModule } from'@angular/platform-browser';
import { NgModule } from'@angular/core';
@NgModule({
imports: [
BrowserModule
]
})
export class AppModule { }2.2 组件
组件用来描述用户界面，它由三部分组成，组件类、组件模板、组件样式，它们可以被集成在组件类文件中，也可以是三个不同的文件。
组件类用来编写和组件直接相关的界面逻辑，在组件类中要关联该组件的组件模板和组件样式。
组件模板用来编写组件的 HTML 结构，通过数据绑定标记将应用中数据和 DOM 进行关联。
组件样式用来编写组件的组件的外观，组件样式可以采用 CSS、LESS、SCSS、Stylus
在 Angular 应用中至少要有一个根组件，用于应用程序的启动。
组件类是由 Component 装饰器函数装饰的类。
import { Component } from"@angular/core"
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title="angular-test"
}NgModule 为组件提供了编译的上下文环境。
import { NgModule } from'@angular/core';
import { AppComponent } from'./app.component';
@NgModule({
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }2.3 服务
服务用于放置和特定组件无关并希望跨组件共享的数据或逻辑。
服务出现的目的在于解耦组件类中的代码，是组件类中的代码干净整洁。
服务是由 Injectable 装饰器装饰的类。
import { Injectable } from'@angular/core';
@Injectable({})
export class AppService { }在使用服务时不需要在组件类中通过 new 的方式创建服务实例对象获取服务中提供的方法，以下写法错误，切记切记！！！
import { AppService } from"./AppService"
export class AppComponent {
let appService=new AppService()
}服务的实例对象由 Angular 框架中内置的依赖注入系统创建和维护。服务是依赖需要被注入到组件中。
在组件中需要通过 constructor 构造函数的参数来获取服务的实例对象。
涉及参数就需要考虑参数的顺序问题，因为在 Angular 应用中会有很多服务，一个组件又不可能会使用到所有服务，如果组件要使用到最后一个服务实例对象，难道要将前面的所有参数都写上吗 ? 这显然不合理。
在组件中获取服务实例对象要结合 TypeScript 类型，写法如下。
import { AppService } from"./AppService"
export class AppComponent {
constructor (
private appService: AppService
) {}
}Angular 会根据你指定的服务的类型来传递你想要使用的服务实例对象，这样就解决了参数的顺序问题。
在 Angular 中服务被设计为单例模式，这也正是为什么服务可以被用来在组件之间共享数据和逻辑的原因。
3.1 创建应用
-
安装 angular-cli：npm install @angular/cli -g
-
创建应用：ng new angular-test --minimal --inlineTemplate false
-
--skipGit=true
-
--minimal=true
-
--skip-install
-
--style=css
-
--routing=false
-
--inlineTemplate
-
--inlineStyle
-
--prefix
-
运行应用：ng serve
-
--open=true 应用构建完成后在浏览器中运行
-
--hmr=true 开启热更新
-
hmrWarning=false 禁用热更新警告
-
--port 更改应用运行端口
-
访问应用：localhost:4200
3.2 默认代码解析
3.2.1 main.ts
// enableProdMode 方法调用后将会开启生产模式
import { enableProdMode } from"@angular/core"
// Angular 应用程序的启动在不同的平台上是不一样的
// 在浏览器中启动时需要用到 platformBrowserDynamic 方法, 该方法返回平台实例对象
import { platformBrowserDynamic } from"@angular/platform-browser-dynamic"
// 引入根模块 用于启动应用程序
import { AppModule } from"./app/app.module"
// 引入环境变量对象 { production: false }
import { environment } from"./environments/environment"
// 如果当前为生产环境
if (environment.production) {
// 开启生产模式
enableProdMode()
}
// 启动应用程序
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err=>console.error(err))3.2.2 environment.ts
// 在执行 `ng build --prod` 时, environment.prod.ts 文件会替换 environment.ts 文件
// 该项配置可以在 angular.json 文件中找到, projects -> angular-test -> architect -> configurations -> production -> fileReplacements
export const environment= {
production: false
}3.2.3 environment.prod.ts
export const environment= {
production: true
}3.2.4 app.module.ts
// BrowserModule 提供了启动和运行浏览器应用所必需的服务
// CommonModule 提供各种服务和指令, 例如 ngIf 和 ngFor, 与平台无关
// BrowserModule 导入了 CommonModule, 又重新导出了 CommonModule, 使其所有指令都可用于导入 BrowserModule 的任何模块
import { BrowserModule } from"@angular/platform-browser"
// NgModule: Angular 模块装饰器
import { NgModule } from"@angular/core"
// 根组件
import { AppComponent } from"./app.component"
// 调用 NgModule 装饰器, 告诉 Angular 当前类表示的是 Angular 模块
@NgModule({
// 声明当前模块拥有哪些组件
declarations: [AppComponent],
// 声明当前模块依赖了哪些其他模块
imports: [BrowserModule],
// 声明服务的作用域, 数组中接收服务类, 表示该服务只能在当前模块的组件中使用
providers: [],
// 可引导组件, Angular 会在引导过程中把它加载到 DOM 中
bootstrap: [AppComponent]
})
export class AppModule {}3.2.5 app.component.ts
import { Component } from"@angular/core"
@Component({
// 指定组件的使用方式, 当前为标记形式
// app-home => 3.2.6 index.html
AngularTest