Skip to content

Commit 7c338c7

Browse files
stbuistbui
committed
feat: 完善blog页面
1 parent 2ec662c commit 7c338c7

File tree

7 files changed

+183
-41
lines changed

7 files changed

+183
-41
lines changed

‎src/app/pages/blog/article/article.component.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<stbui-base-layout>
2+
<div class="main">
3+
<p>Angular Ivy change detection execution: are you prepared?</p>
4+
<p>Let’s see what Angular cooks for us</p>
5+
<p>While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares
6+
for us.
7+
</p>
8+
<p>In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about
9+
and also build simple app based on instructions, similar to angular Ivy instructions, from scratch.</p>
10+
11+
<p>First, let’s introduce the app I’m going to investigate here:</p>
12+
<p>
13+
<img src="https://cdn-images-1.medium.com/max/1600/1*APIvDKSWiiMY3EZlxM5epQ.png" alt="">
14+
</p>
15+
<p>I created online demo that I use to understand how it works under the hood:
16+
17+
</p>
18+
<p> https://alexzuza.github.io/ivy-cd/ 👈</p>
19+
<p>
20+
<img src="https://cdn-images-1.medium.com/max/2000/1*3BVrVntaULzadpLVVjpEhg.gif" alt="">
21+
</p>
22+
23+
<p>The demo uses angular 6.0.1 aot compiler. You can click on any lifecycle block to go to the definition.</p>
24+
25+
<p>In order to run change detection process just type something in one of those inputs that are below Sub-Child.</p>
26+
27+
https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
28+
</div>
29+
</stbui-base-layout>

‎src/app/pages/blog/article/article.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.main {
2+
img {
3+
max-width: 100%;
4+
}
5+
}

‎src/app/pages/blog/article/article.component.ts‎

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

‎src/app/pages/blog/blog.component.html‎

Lines changed: 61 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,61 @@
1-
<stbui-base-layout>
2-
<mat-card>
3-
<mat-card-content>
4-
<textarea class="textarea" placeholder="说说看?"></textarea>
5-
</mat-card-content>
6-
<mat-card-actions fxLayout="row" fxLayoutAlign="space-between center">
7-
<div fxLayout="row" fxLayoutAlign="start center">
8-
9-
<button mat-icon-button matTooltip="添加照片">
10-
<mat-icon>photo</mat-icon>
11-
</button>
12-
13-
<button mat-icon-button matTooltip="@他">
14-
<mat-icon>person</mat-icon>
15-
</button>
16-
17-
<button mat-icon-button matTooltip="显示位置">
18-
<mat-icon>location_on</mat-icon>
19-
</button>
20-
21-
</div>
22-
<button mat-raised-button color="accent" class="post-button">发送</button>
23-
24-
</mat-card-actions>
25-
</mat-card>
26-
</stbui-base-layout>
1+
<div class="header" fxLayout="column" fxLayoutAlign="center start">
2+
<h1>Stbui's Blog</h1>
3+
<h5 class="header-desc">学习弯道超车的技巧！</h5>
4+
</div>
5+
6+
<mat-card>
7+
<div class="timer">2018年04月17日</div>
8+
<mat-card-title>
9+
<a class="title" href="/pages/blog/1" target="blank">Angular Ivy change detection execution: are you prepared?</a>
10+
</mat-card-title>
11+
<mat-card-content>
12+
<p>Angular Ivy change detection execution: are you prepared?</p>
13+
<p>Let’s see what Angular cooks for us</p>
14+
<p>While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares
15+
for us.
16+
</p>
17+
<p>In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about
18+
and also build simple app based on instructions, similar to angular Ivy instructions, from scratch.</p>
19+
<button mat-button color="primary">阅读全文...</button>
20+
</mat-card-content>
21+
</mat-card>
22+
23+
<mat-card>
24+
<mat-card-title>
25+
<a class="title" href="/pages/blog/2" target="blank">What you always wanted to know about Angular Dependency Injection tree
26+
</a>
27+
</mat-card-title>
28+
<mat-card-content>
29+
<p>If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular
30+
application we have some root injector with all merged providers, every component has its own injector and lazy
31+
loaded module introduces new injector.</p>
32+
<p>But maybe there is some more you should be aware of?
33+
34+
</p>
35+
<p>Also a while ago, so-called Tree-Shakeable Tokens feature was merged into master branch. If you are like me, you
36+
probably want to know what has changed.</p>
37+
<p>So it’s time to examine all these things and maybe find something new...
38+
</p>
39+
<button mat-button color="primary">阅读全文...</button>
40+
</mat-card-content>
41+
</mat-card>
42+
43+
44+
<mat-card>
45+
<mat-card-title>
46+
<a class="title" href="/pages/blog/3" target="blank">Everything you need to know about change detection in Angular
47+
</a>
48+
</mat-card-title>
49+
<mat-card-content>
50+
If like me and want to have a comprehensive understanding of the change detection mechanism in Angular you’ll have to explore
51+
the sources since there is not much information available on the web. Most articles mention that each component has
52+
its own change detector which is responsible for checking the component, but they don’t go beyond that and mostly
53+
focus on use cases for immutables and change detection strategy. This article provides you with the information required
54+
to understand why use cases with immutables work and how change detection strategy affects the check. Also, what
55+
you will learn from this article will enable you to come up with various scenarios for performance optimization on
56+
your own.
57+
<button mat-button color="primary">阅读全文...</button>
58+
</mat-card-content>
59+
</mat-card>
60+
61+
<stbui-pagination total="5" align="center"></stbui-pagination>

‎src/app/pages/blog/blog.component.scss‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,62 @@
1-
.textarea {
2-
min-height: 150px;
3-
max-height: 150px;
4-
font-size: 16px;
5-
color: #333;
6-
padding: 10px;
7-
outline: 0;
8-
border: 0;
9-
box-shadow: 0 0 1px 1px #999 inset;
10-
width: 100%;
1+
:host {
2+
display: block;
3+
}
4+
5+
mat-card {
6+
margin: 20px;
7+
}
8+
9+
.header {
10+
height: 200px;
11+
background: linear-gradient(0, #3f51b5, #3f51b5);
12+
color: #fff;
13+
padding: 20px;
14+
15+
h1, h5 {
16+
margin: 0
17+
}
18+
19+
&-desc {
20+
padding-top: 6px;
21+
font-weight: 300;
22+
color: #c5cae9;
23+
}
24+
}
25+
26+
.timer {
27+
margin: 0 0 10px;
28+
line-height: 14px;
29+
font-size: 13px;
30+
font-weight: bold;
31+
color: #727272;
32+
overflow: hidden;
33+
}
34+
35+
.title {
36+
color: #3f51b5;
37+
position: relative;
38+
display: inline-block;
39+
text-decoration: none;
40+
41+
&::after {
42+
content: '';
43+
position: absolute;
44+
width: 100%;
45+
height: 2px;
46+
bottom: 0;
47+
left: 0;
48+
background-color: #3f51b5;
49+
visibility: hidden;
50+
transform: scaleX(0);
51+
transition: 0.4s ease-in-out;
52+
}
53+
54+
&:hover {
55+
text-decoration: none;
56+
57+
&::after {
58+
visibility: visible;
59+
transform: scaleX(1);
60+
}
61+
}
1162
}

‎src/app/pages/pages.module.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
11
import { NgModule } from '@angular/core';
22
import { SharedModule } from '../shared/shared.module';
3+
import { PaginationModule } from '../component/pagination';
4+
import { BaseLayoutModule } from '../layouts/index';
35

46
import { PagesRoutingModule } from './pages.routing';
57
import { PagesComponent } from './pages.component';
68
import { AboutComponent } from './about/about.component';
79
import { ContactComponent } from './contact/contact.component';
810
import { ServicesComponent } from './services/services.component';
911
import { BlogComponent } from './blog/blog.component';
12+
import { BlogArticleComponent } from './blog/article/article.component';
1013
import { ProfileComponent } from './profile/profile.component';
11-
1214
import { UserComponent } from './user/user.component';
1315
import { UserService } from './user/user.service';
14-
1516
import { FileManagerComponent } from './file-manager/file-manager.component';
1617
import { FileManagerFirebase } from './file-manager/file-manager.firebase';
17-
1818
import { ProjectComponent } from './project/project.component';
19-
import { BaseLayoutModule } from '../layouts/index';
2019

2120
@NgModule({
22-
imports: [SharedModule, PagesRoutingModule, BaseLayoutModule],
21+
imports: [
22+
SharedModule,
23+
PaginationModule,
24+
PagesRoutingModule,
25+
BaseLayoutModule
26+
],
2327
declarations: [
2428
PagesComponent,
2529
AboutComponent,
2630
ContactComponent,
2731
ServicesComponent,
2832
BlogComponent,
33+
BlogArticleComponent,
2934
ProfileComponent,
3035
UserComponent,
3136
FileManagerComponent,

‎src/app/pages/pages.routing.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ServicesComponent } from './services/services.component';
88
import { UserComponent } from './user/user.component';
99
import { ProfileComponent } from './profile/profile.component';
1010
import { BlogComponent } from './blog/blog.component';
11+
import { BlogArticleComponent } from './blog/article/article.component';
1112
import { FileManagerComponent } from './file-manager/file-manager.component';
1213
import { ProjectComponent } from './project/project.component';
1314

@@ -40,6 +41,10 @@ const routes: Routes = [
4041
path: 'blog',
4142
component: BlogComponent
4243
},
44+
{
45+
path: 'blog/:id',
46+
component: BlogArticleComponent
47+
},
4348
{
4449
path: 'file-manager',
4550
component: FileManagerComponent

0 commit comments

Comments
 (0)