chore(style-guide): remove routing styles
Routing styles were breaking CI and are out of date, since we're using the 3.0.0 router. We should remove them until we have recommendations.
This commit is contained in:
parent
7848feaeaa
commit
31d0c757d7
|
@ -1,11 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'toh-dashboard',
|
|
||||||
templateUrl: 'app/dashboard/dashboard.component.html'
|
|
||||||
})
|
|
||||||
export class DashboardComponent implements OnInit {
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit() { }
|
|
||||||
}
|
|
|
@ -1 +0,0 @@
|
||||||
export * from './dashboard.component';
|
|
|
@ -1,11 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'toh-heroes',
|
|
||||||
templateUrl: 'app/heroes/heroes.component.html'
|
|
||||||
})
|
|
||||||
export class HeroesComponent implements OnInit {
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit() { }
|
|
||||||
}
|
|
|
@ -1,2 +0,0 @@
|
||||||
export * from './shared';
|
|
||||||
export * from './heroes.component.ts';
|
|
|
@ -1,8 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class HeroService {
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
}
|
|
|
@ -1 +0,0 @@
|
||||||
export * from './hero.service';
|
|
|
@ -1,23 +0,0 @@
|
||||||
// #docregion
|
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
|
|
||||||
|
|
||||||
import { NavComponent } from './shared';
|
|
||||||
import { DashboardComponent } from './+dashboard';
|
|
||||||
import { HeroesComponent, HeroService } from './+heroes';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'toh-app',
|
|
||||||
templateUrl: 'app/app.component.html',
|
|
||||||
styleUrls: ['app/app.component.css'],
|
|
||||||
directives: [ROUTER_DIRECTIVES, NavComponent],
|
|
||||||
providers: [
|
|
||||||
ROUTER_PROVIDERS,
|
|
||||||
HeroService
|
|
||||||
]
|
|
||||||
})
|
|
||||||
@Routes([
|
|
||||||
{ path: '/dashboard', component: DashboardComponent }, // , useAsDefault: true}, // coming soon
|
|
||||||
{ path: '/heroes/...', component: HeroesComponent },
|
|
||||||
])
|
|
||||||
export class AppComponent {}
|
|
|
@ -1,4 +0,0 @@
|
||||||
export * from './+dashboard';
|
|
||||||
export * from './+heroes';
|
|
||||||
export * from './shared';
|
|
||||||
export * from './app.component';
|
|
|
@ -1 +0,0 @@
|
||||||
export * from './nav';
|
|
|
@ -1 +0,0 @@
|
||||||
export * from './nav.component';
|
|
|
@ -1,12 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'toh-nav',
|
|
||||||
templateUrl: 'app/shared/nav/nav.component.html'
|
|
||||||
})
|
|
||||||
export class NavComponent implements OnInit {
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit() { }
|
|
||||||
|
|
||||||
}
|
|
|
@ -1850,48 +1850,6 @@ a(href="#toc") Back to top
|
||||||
|
|
||||||
a(href="#toc") Back to top
|
a(href="#toc") Back to top
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
## Routing
|
|
||||||
|
|
||||||
Client-side routing is important for creating a navigation flow between a component tree hierarchy, and composing components that are made of many other child components.
|
|
||||||
|
|
||||||
a(href="#toc") Back to top
|
|
||||||
|
|
||||||
.l-main-section
|
|
||||||
:marked
|
|
||||||
### <a id="10-01"></a>Component Router
|
|
||||||
#### <a href="#10-01">Style 10-01</a>
|
|
||||||
|
|
||||||
.s-rule.do
|
|
||||||
:marked
|
|
||||||
**Do** separate route configuration into a routing component file, also known as a component router.
|
|
||||||
|
|
||||||
.s-rule.do
|
|
||||||
:marked
|
|
||||||
**Do** use a `<router-outlet>` in the component router, where the routes will have their component targets display their templates.
|
|
||||||
|
|
||||||
.s-rule.do
|
|
||||||
:marked
|
|
||||||
**Do** focus the logic in the component router to the routing aspects and its target components.
|
|
||||||
|
|
||||||
.s-rule.do
|
|
||||||
:marked
|
|
||||||
**Do** extract other logic to services and other components.
|
|
||||||
|
|
||||||
.s-why
|
|
||||||
:marked
|
|
||||||
**Why?** A component that handles routing is known as the component router, thus this follows the Angular 2 routing pattern.
|
|
||||||
|
|
||||||
.s-why.s-why-last
|
|
||||||
:marked
|
|
||||||
**Why?** The `<router-outlet>` indicates where the template should be displayed for the target route.
|
|
||||||
|
|
||||||
+makeExample('style-guide/ts/10-01/app/app.component.ts', '', 'app/app.component.ts')
|
|
||||||
:marked
|
|
||||||
|
|
||||||
a(href="#toc") Back to top
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix
|
## Appendix
|
||||||
|
|
Loading…
Reference in New Issue