Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 3c474d1

Browse filesBrowse files
bennadelbennadel
committed
Add fragment polyfill for Angular5.
1 parent fedeb50 commit 3c474d1
Copy full SHA for 3c474d1
Expand file treeCollapse file tree

23 files changed

+5006
-2
lines changed
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+3-2Lines changed: 3 additions & 2 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13-
* [Wildcard Routes (**) Can Redirect Relative To Their UrlTree Location In Angular 5.1.3](http://bennadel.github.io/JavaScript-Demos/demos/router-wildcard-paths2-angular5/)
14-
* [Wildcard Routes (**) Can Be Scoped To Route Sub-Trees In Angular 5.1.3](http://bennadel.github.io/JavaScript-Demos/demos/router-wildcard-paths-angular5/)
13+
* [Creating A Jump-To-Anchor Fragment Polyfill In Angular 5.2.0](http://bennadel.github.io/JavaScript-Demos/demos/router-jump-to-fragment-angular5/)
14+
* [Wildcard Routes (\*\*) Can Redirect Relative To Their UrlTree Location In Angular 5.1.3](http://bennadel.github.io/JavaScript-Demos/demos/router-wildcard-paths2-angular5/)
15+
* [Wildcard Routes (\*\*) Can Be Scoped To Route Sub-Trees In Angular 5.1.3](http://bennadel.github.io/JavaScript-Demos/demos/router-wildcard-paths-angular5/)
1516
* [Sanity Check: Chrome 63 Still Causes Blurry Borders With Percentage-Based CSS Translation](http://bennadel.github.io/JavaScript-Demos/demos/css-translatey-blur/)
1617
* [CSS Flexbox: Aligning Content Slightly Off-Center](http://bennadel.github.io/JavaScript-Demos/demos/flexbox-off-center-alignment/)
1718
* [Using Data Attributes To Pass Configuration Into An Event Plug-in In Angular 5.1.1](http://bennadel.github.io/JavaScript-Demos/demos/event-plugin-data-angular5/)
Collapse file

‎demos/router-jump-to-fragment-angular5/.gitignore‎

Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/
Collapse file

‎demos/router-jump-to-fragment-angular5/app/a-view.component.less‎

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
:host {
3+
display: block ;
4+
}
5+
6+
.content {
7+
background-color: #FAFAFA ;
8+
border: 2px solid #FFAAAA ;
9+
height: 2000px ;
10+
padding: 10px 10px 10px 10px ;
11+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/a-view.component.ts‎

Copy file name to clipboard
+33Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "a-view",
10+
styleUrls: [ "./a-view.component.less" ],
11+
template:
12+
`
13+
<hr id="top" />
14+
15+
<p>
16+
<strong>A View</strong>
17+
</p>
18+
19+
<p class="content">
20+
<a routerLink="." fragment="bottom">Jump to bottom</a>
21+
</p>
22+
23+
<a name="bottom"></a>
24+
25+
<p>
26+
This is the bottom of <strong>A-view</strong>.
27+
<a routerLink="." fragment="top">Back to top</a>.
28+
</p>
29+
`
30+
})
31+
export class AViewComponent {
32+
// ...
33+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/app.component.less‎

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/app.component.ts‎

Copy file name to clipboard
+35Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<p>
14+
<a routerLink="/">Home View</a><br />
15+
<br />
16+
17+
<a routerLink="/app/a">A View</a> &mdash;
18+
<a routerLink="/app/a" fragment="top">A View #top</a> &mdash;
19+
<a routerLink="/app/a" fragment="bottom">A View #bottom</a><br />
20+
21+
<a routerLink="/app/b">B View</a> &mdash;
22+
<a routerLink="/app/b" fragment="top">B View #top</a> &mdash;
23+
<a routerLink="/app/b" fragment="bottom">B View #bottom</a><br />
24+
</p>
25+
26+
<p>
27+
<strong>Home View</strong>
28+
</p>
29+
30+
<router-outlet></router-outlet>
31+
`
32+
})
33+
export class AppComponent {
34+
// ...
35+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/app.module.ts‎

Copy file name to clipboard
+76Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
import { RouterModule } from "@angular/router";
6+
import { Routes } from "@angular/router";
7+
8+
// Import the application components and services.
9+
import { AppComponent } from "./app.component";
10+
import { AViewComponent } from "./a-view.component";
11+
import { BViewComponent } from "./b-view.component";
12+
import { FragmentPolyfillModule } from "./fragment-polyfill.module";
13+
14+
// ----------------------------------------------------------------------------------- //
15+
// ----------------------------------------------------------------------------------- //
16+
17+
var routes: Routes = [
18+
{
19+
path: "app",
20+
children: [
21+
{
22+
path: "a",
23+
component: AViewComponent
24+
},
25+
{
26+
path: "b",
27+
component: BViewComponent
28+
}
29+
]
30+
},
31+
32+
// Redirect from the root to the "/app" prefix (this makes other features, like
33+
// secondary outlets) easier to implement later on.
34+
{
35+
path: "",
36+
pathMatch: "full",
37+
redirectTo: "app"
38+
}
39+
];
40+
41+
@NgModule({
42+
bootstrap: [
43+
AppComponent
44+
],
45+
imports: [
46+
BrowserModule,
47+
FragmentPolyfillModule.forRoot({
48+
smooth: true
49+
}),
50+
RouterModule.forRoot(
51+
routes,
52+
{
53+
// Tell the router to use the HashLocationStrategy.
54+
useHash: true,
55+
enableTracing: false
56+
}
57+
)
58+
],
59+
declarations: [
60+
AppComponent,
61+
AViewComponent,
62+
BViewComponent
63+
],
64+
providers: [
65+
// CAUTION: We don't need to specify the LocationStrategy because we are setting
66+
// the "useHash" property in the Router module above.
67+
// --
68+
// {
69+
// provide: LocationStrategy,
70+
// useClass: HashLocationStrategy
71+
// }
72+
]
73+
})
74+
export class AppModule {
75+
// ...
76+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/b-view.component.less‎

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
:host {
3+
display: block ;
4+
}
5+
6+
.content {
7+
background-color: #FAFAFA ;
8+
border: 2px solid #AAAAFF ;
9+
height: 2000px ;
10+
padding: 10px 10px 10px 10px ;
11+
}
Collapse file

‎demos/router-jump-to-fragment-angular5/app/b-view.component.ts‎

Copy file name to clipboard
+31Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "b-view",
10+
styleUrls: [ "./b-view.component.less" ],
11+
template:
12+
`
13+
<hr id="top" />
14+
15+
<p>
16+
<strong>B View</strong>
17+
</p>
18+
19+
<p class="content">
20+
<a routerLink="." fragment="bottom">Jump to bottom</a>
21+
</p>
22+
23+
<p id="bottom">
24+
This is the bottom of <strong>B-view</strong>.
25+
<a routerLink="." fragment="top">Back to top</a>.
26+
</p>
27+
`
28+
})
29+
export class BViewComponent {
30+
// ...
31+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.