项目目录结构
| app
|—core（单例组件目录）
|—|—components (组件)
|—|—constants(常数变量)
|—|—directives(自定义指令)
|—|—guards(路由守卫)
|—|—pipes(管道)
|—|—services(服务)
|—|—modules(模型)
|—shared（多例组件目录）
|—page（大颗粒组件目录）
组件化 原子化 设计理念
- 组件化，将页面拆分为多个可重复使用的组件，是为了提高复用性组件应该避免处理逻辑，仅用来呈现view
- 原子化是为了方便管理组件，将组件拆分跟容易阅读，管理
- 将原件根据不同的颗粒大小划分为
- atoms （原子）
- menber (分子)
- organization（组织）
- template （模板）
- page（页面）
路由
- 路由懒加载
- 正常加载
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyTestComponent } from './lazy-test.component';
const routes: Routes = [
{
path: '',
component: LazyTestComponent,
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LazyTestRoutingModule {}
- 使用懒加载
- 注意 app-router.module.ts 使用
forRoot()方法来代入路由
子路由必须使用forChild()
- 注意 app-router.module.ts 使用
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () =>
import('./pages/lazy-test/lazy-test.module').then(
(m) => m.LazyTestModule
),
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LazyTestRoutingModule {}
- 注意，路由需要在component.module.ts中如引入
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { LazyTestComponent } from './lazy-test.component';
import {LazyTestRoutingModule} from './lazy-test-routing.module'
@NgModule({
imports: [CommonModule,LazyTestRoutingModule],
declarations: [LazyTestComponent],
})
export class LazyTestModule {}
-
注意：
- 路由的 routerlink 的路径如果没有匹配的项 导航栏是不会改变路径的， 也就是路径无效 无反应
使用 ts 进行路由跳转
import { Router } from '@angular/router';
export class AppComponent {
constructor(private readonly router: Router) {}
public async navigate() {
await this.router.navigate(['/dashboard']);
// TODO
}
}
路由数据的预设值
- 在进入路由前， 可以直接设置
data或者resolve的属性，让数据进行预加载 - 在 server 定义方法向外暴露数据
public getProfile(): ProfileModel {
return {
name: 'Danie',
date: new Date(),
comment:
'We supply a series of design principles, practical patterns and high quality design resources(Sketch and Axure), to helppeople create their product prototypes beautifully and efficiently.',
};
}
- 创建一个provide.server.ts，在其中获取数据
@Injectable()
export class ProfileProvider implements Resolve<ProfileModel> {
// 实现接口
/**
* @param profileService 練習用
*/
constructor(private readonly profileService: ProfileService) {}
/**
* 練習用
*
* @method public
* @return 練習用
*/
public async resolve(): Promise<ProfileModel> {
return await this.profileService.getProfile();
}
}
- 在路由中预加载
import { ProfileProvider,ShoppingCartService } from './services';
{
path: 'profile',
component: ProfileComponent,
pathMatch: 'full',
resolve:{
profile:ProfileProvider
}
},
{
path: 'shopping-cart',
component: ShoppingCartComponent,
pathMatch: 'full',
resolve:{
commodities:ShoppingCartService
}
},
- 在组件中获取数据
public getData(){
this.activedRoute.data.subscribe((data) => {
// TODO
console.log(data)
});
}
RxJs
Observable
在开始讲服务之前，我们先来看一下一个新东西——Observable（可观察对象），是属于RxJS库里面的一个对象，可以用来处理异步事件，例如HTTP请求（实际上，在Angular中，所有的HTTP请求返回的都是Observable），或许，你以前接触过一个叫promise的东西，它们本质上面是相同的：都是生产者主动向消费者“push”产品，而消费者是被动接收的，但是他们两者还是有很大区别的：Observable可以发送任意多值，并且，在被订阅之前，它是不会执行的！这是promise不具备的特点，下面砸门来详细了解一下Observable
————————————————
原文链接：https://blog.csdn.net/qq_34414916/article/details/85194098
心法
- Observable用于在发送方和接收方之间传输消息，为了更好地理解，你可以将这些消息看成是流
- 在创建Observable对象时，需要传入一个函数作为构造函数的参数，这个函数叫订阅者函数，这个函数也就是生产者向消费者推送消息的地方
- 在被消费者subscribe（订阅）之前，订阅者函数不会被执行，直到subscribe()函数被调用，该函数返回一个subscription对象，里面有一个unsubscribe()函数，消费者可以随时拒绝消息的接收！
- subscribe()函数接收一个observer（观察者）对象作为入参
- 消息的发送可以是同步的，也可以是异步的
- 我们可以使用一系列的RxJS操作符，在这些消息被接收方接收之前，对它们进行一系列的处理、转换，因为这些操作符都是纯函数，没有副作用，可以放心使用，并不会产生期望之外的结果！
————————————————
原文链接：https://blog.csdn.net/qq_34414916/article/details/85194098
详细看原文
原文链接：https://blog.csdn.net/qq_34414916/article/details/85194098
