Skip to content

Commit 3620710

Browse files
author
Itchimonji
committed
feature(): add ui navigation
1 parent 4fe4356 commit 3620710

13 files changed

+196
-31
lines changed

‎README.md

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# DesignPatternsInAngular
1+
# Design Patterns In Angular
22

33
- Run `ng serve` for a dev server. Navigate to `http://localhost:4201/`
44
- Run `ng generate module singleton --route singleton --module app.module` to create a feature module with routing
@@ -7,16 +7,18 @@
77

88
### Abstract Factory
99

10-
- short description: create families of related objects (with abstract classes)
10+
- short description: create a related object family
11+
- applicability: system is capsulated of the creation & composition of its models
1112
- visual resource: https://refactoring.guru/design-patterns/abstract-factory
13+
- expandability: concrete factories as singletons, factory method for creation of concrete objects, for too much objects you can use the Prototype Patterm
1214

1315
##### UML
1416

15-
![AbstractFactory](./readme/images/01.%20Abstract%20Factory.jpg)
17+
![Abstract Factory](./readme/images/01.%20Abstract%20Factory.jpg)
1618

1719
##### UML for this repo example
1820

19-
![Example](./readme/images/01.%20Abstract%20Factory%20example.jpg)
21+
![Abstract Factory Example](./readme/images/01.%20Abstract%20Factory%20example.jpg)
2022

2123
### Singleton
2224

@@ -25,29 +27,32 @@
2527

2628
##### UML
2729

28-
![Builder](./readme/images/02.%20Singleton.jpg)
30+
![Singleton](./readme/images/02.%20Singleton.jpg)
2931

3032
##### UML for this repo example
3133

32-
![Example](./readme/images/02.%20Singleton%20example.jpg)
34+
![Singleton Example](./readme/images/02.%20Singleton%20example.jpg)
3335

3436
### Prototype
3537

3638
- short description: clone/copy a component
39+
- applicability: runtime specification of objects (dynamic loading), to many different objects for factories
3740
- visual resource: https://refactoring.guru/design-patterns/prototype
41+
- expandability: implementation of prototype manager (hold all prototype instances), deep-cloinig,
3842

3943
##### UML
4044

41-
![Builder](./readme/images/03.%20Prototype.jpg)
45+
![Prototype](./readme/images/03.%20Prototype.jpg)
4246

4347
##### UML for this repo example
4448

45-
![Example](./readme/images/03.%20Prototype%20example.jpg)
49+
![Prototype Example](./readme/images/03.%20Prototype%20example.jpg)
4650

4751
### Builder
4852

4953
- short description: blueprint for different products with different features
5054
- visual resource: https://refactoring.guru/design-patterns/builder
55+
- expandability: abstract class or interface isn't needed for "product"-objects
5156

5257
##### UML
5358

@@ -61,11 +66,36 @@
6166

6267
- short description: provide an interface for creating objects in superclass
6368
- visual resource: https://refactoring.guru/design-patterns/factory-method
69+
- expandability: parameterized contructor for universal factory method (like abstract factory)
6470

6571
##### UML
6672

67-
![Builder](./readme/images/05.%20Factory%20Method.jpg)
73+
![Factory Method](./readme/images/05.%20Factory%20Method.jpg)
6874

6975
##### UML for this repo example
7076

7177
![Factory Method Example](./readme/images/05.%20Factory%20Method%20example.jpg)
78+
79+
### Adapter (Wrapper)
80+
81+
- short description: allows objects with incompatible interfaces to collaborate
82+
- visual resource: https://refactoring.guru/design-patterns/adapter
83+
- expandability: 2-way-adapter for aptee and target (multiple inheritance)
84+
85+
### Facade
86+
87+
- short description: provides a simplified interface to a library
88+
- visual resource: https://refactoring.guru/design-patterns/facade
89+
90+
### Bridge
91+
92+
- short description: separate the abstraction from the implementation
93+
- visual resource: https://refactoring.guru/design-patterns/bridge
94+
95+
96+
## Resources
97+
98+
- Design Pattern by GoF
99+
- https://refactoring.guru/
100+
- https://www.geeksforgeeks.org/
101+

‎src/app/04. Builder/builder/builder.component.html

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
<h1>
33
Builder
44
</h1>
5-
6-
<mat-card *ngFor="let house of houses; index as i">
7-
<mat-card-title>House {{i+1}}</mat-card-title>
8-
<mat-card-content>
9-
<div>walls: {{house.walls}}</div>
10-
<div>doors: {{house.doors}}</div>
11-
<div>windows: {{house.windows}}</div>
12-
<div>garden: {{house.garden}}</div>
13-
<div>pool: {{house.pool}}</div>
14-
<div>floors: {{house.floors}}</div>
15-
<div>basement: {{house.basement}}</div>
16-
</mat-card-content>
17-
</mat-card>
5+
<div class="content">
6+
<mat-card *ngFor="let house of houses; index as i">
7+
<mat-card-title>House {{i+1}}</mat-card-title>
8+
<mat-card-content>
9+
<div>walls: {{house.walls}}</div>
10+
<div>doors: {{house.doors}}</div>
11+
<div>windows: {{house.windows}}</div>
12+
<div>garden: {{house.garden}}</div>
13+
<div>pool: {{house.pool}}</div>
14+
<div>floors: {{house.floors}}</div>
15+
<div>basement: {{house.basement}}</div>
16+
</mat-card-content>
17+
</mat-card>
18+
</div>
1819
</div>
1920

‎src/app/04. Builder/builder/builder.component.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ div.container {
88
align-items: center;
99
}
1010

11+
div.content {
12+
display: flex;
13+
flex-direction: row;
14+
}
15+
1116
mat-card {
1217
margin: 15px;
1318
max-width: 300px;

‎src/app/app-routing.module.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,13 @@ const routes: Routes = [
2323
loadChildren: () => import('./05. Factory Method/factory-method.module').then(m => m.FactoryMethodModule) },
2424
{
2525
path: 'adapter',
26-
loadChildren: () => import('./06. Adapter/adapter.module').then(m => m.AdapterModule) }
26+
loadChildren: () => import('./06. Adapter/adapter.module').then(m => m.AdapterModule)
27+
},
28+
{
29+
path: 'home',
30+
loadChildren: () => import('./xx. components/Home/home.module').then(m => m.HomeModule)
31+
},
32+
{ path: '', redirectTo: '/home', pathMatch: 'full' }
2733
];
2834

2935
@NgModule({

‎src/app/app.component.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
<router-outlet></router-outlet>
1+
<mat-toolbar >
2+
<button mat-icon-button aria-label="Home icon" [routerLink]="['/home']">
3+
<mat-icon>home</mat-icon>
4+
</button>
5+
</mat-toolbar>
6+
<div class="app-container">
7+
<router-outlet></router-outlet>
8+
</div>
9+

‎src/app/app.component.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div.app-container {
2+
padding: 20px;
3+
display: flex;
4+
flex-direction: row;
5+
justify-content: center;
6+
}

‎src/app/app.module.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ import { AppComponent } from './app.component';
44
import { BrowserModule } from '@angular/platform-browser';
55
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
66
import { HttpClientModule } from '@angular/common/http';
7+
import {AngularMaterialModule} from './modules/angular-material.module';
78

89
@NgModule({
910
declarations: [
10-
AppComponent,
11-
],
12-
imports: [
13-
BrowserModule,
14-
BrowserAnimationsModule,
15-
HttpClientModule,
16-
AppRoutingModule
11+
AppComponent
1712
],
13+
imports: [
14+
BrowserModule,
15+
BrowserAnimationsModule,
16+
HttpClientModule,
17+
AppRoutingModule,
18+
AngularMaterialModule
19+
],
1820
providers: [],
1921
bootstrap: [AppComponent]
2022
})

‎src/app/xx. components/Home/home-routing.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { HomeComponent } from './home/home.component';
5+
6+
const routes: Routes = [{ path: '', component: HomeComponent }];
7+
8+
@NgModule({
9+
imports: [RouterModule.forChild(routes)],
10+
exports: [RouterModule]
11+
})
12+
export class HomeRoutingModule { }

‎src/app/xx. components/Home/home.module.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { HomeRoutingModule } from './home-routing.module';
5+
import { HomeComponent } from './home/home.component';
6+
import {AngularMaterialModule} from '../../modules/angular-material.module';
7+
8+
9+
@NgModule({
10+
declarations: [HomeComponent],
11+
imports: [
12+
CommonModule,
13+
HomeRoutingModule,
14+
AngularMaterialModule
15+
]
16+
})
17+
export class HomeModule { }

‎src/app/xx. components/Home/home/home.component.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<mat-card>
2+
<mat-card-title>
3+
Creational Pattern
4+
</mat-card-title>
5+
<mat-card-content>
6+
<a mat-raised-button [routerLink]="['/abstract-factory']" routerLinkActive="abstract-factory" color="primary">
7+
Abstract Factory
8+
</a>
9+
<a mat-raised-button [routerLink]="['/factory-method']" routerLinkActive="factory-method" color="primary">
10+
Factory Method
11+
</a>
12+
<a mat-raised-button [routerLink]="['/builder']" routerLinkActive="builder" color="primary">
13+
Builder
14+
</a>
15+
<a mat-raised-button [routerLink]="['/singleton']" routerLinkActive="singleton" color="primary">
16+
Singleton
17+
</a>
18+
<a mat-raised-button [routerLink]="['/prototype']" routerLinkActive="prototype" color="primary">
19+
Prototype
20+
</a>
21+
</mat-card-content>
22+
</mat-card>

‎src/app/xx. components/Home/home/home.component.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
mat-card {
2+
text-align: center;
3+
}
4+
5+
mat-card-content {
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
a {
11+
margin: 5px;
12+
}
13+
14+
a:first-child {
15+
margin-top: 15px;
16+
}

‎src/app/xx. components/Home/home/home.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HomeComponent } from './home.component';
4+
5+
describe('HomeComponent', () => {
6+
let component: HomeComponent;
7+
let fixture: ComponentFixture<HomeComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ HomeComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(HomeComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/xx. components/Home/home/home.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-home',
5+
templateUrl: './home.component.html',
6+
styleUrls: ['./home.component.scss']
7+
})
8+
export class HomeComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

0 commit comments

Comments
 (0)