├── .angular-cli.json
├── README.md
├── package.json
└── src
    ├── app
        ├── app.component.css
        ├── app.component.html
        ├── app.component.ts
        ├── app.module.ts
        ├── home
        │   ├── home.component.html
        │   └── home.component.ts
        ├── models
        │   └── product.ts
        ├── product-detail
        │   ├── product-detail.component.html
        │   └── product-detail.component.ts
        ├── product-list-sidebar
        │   ├── product-list-sidebar.component.html
        │   └── product-list-sidebar.component.ts
        ├── product-list
        │   ├── product-list.component.html
        │   └── product-list.component.ts
        ├── routing.module.ts
        └── sidebar
        │   ├── sidebar.component.html
        │   └── sidebar.component.ts
    ├── environments
        ├── environment.prod.ts
        └── environment.ts
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    └── typings.d.ts


/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "apps": [
 3 |     {
 4 |       "root": "src",
 5 |       "outDir": "dist",
 6 |       "assets": ["assets", "favicon.ico"],
 7 |       "index": "index.html",
 8 |       "main": "main.ts",
 9 |       "polyfills": "polyfills.ts",
10 |       "prefix": "app",
11 |       "styles": ["styles.css"],
12 |       "scripts": [],
13 |       "environmentSource": "environments/environment.ts",
14 |       "environments": {
15 |         "dev": "environments/environment.ts",
16 |         "prod": "environments/environment.prod.ts"
17 |       }
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # angular-router-demo
 2 | Angular 4|5 Router Demo created with the Angular CLI.
 3 | 
 4 | ## How to learn how to use the Angular 4|5 Router?
 5 | 
 6 | You can follow this demo project's accompanying tutorial: [The Angular 4|5 Router: Component Routing](https://www.techiediaries.com/angular-router/).
 7 | 
 8 | ## How to use?
 9 | 
10 | You can simply clone this repo from the CLI:
11 | 
12 | ```bash
13 | git clone https://github.com/techiediaries/angular-router-demo/
14 | ```
15 | 
16 | Next, navigate inside the cloned folder then install the dependencies using:
17 | 
18 | ```bash
19 | cd angular-router-demo
20 | npm install
21 | ```
22 | 
23 | You can the serve your demo project using:
24 | 
25 | ```bash
26 | ng serve
27 | ```
28 | 
29 | Finally, visit `http://127.0.0.1:4200` with your browser.
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-45-router-demo",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build --prod",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^5.2.0",
16 |     "@angular/common": "^5.2.0",
17 |     "@angular/compiler": "^5.2.0",
18 |     "@angular/core": "^5.2.0",
19 |     "@angular/forms": "^5.2.0",
20 |     "@angular/http": "^5.2.0",
21 |     "@angular/platform-browser": "^5.2.0",
22 |     "@angular/platform-browser-dynamic": "^5.2.0",
23 |     "@angular/router": "^5.2.0",
24 |     "core-js": "^2.4.1",
25 |     "rxjs": "^5.5.6",
26 |     "zone.js": "^0.8.19"
27 |   },
28 |   "devDependencies": {
29 |     "@angular/cli": "1.6.6",
30 |     "@angular/compiler-cli": "^5.2.0",
31 |     "@angular/language-service": "^5.2.0",
32 |     "@types/core-js": "0.9.46",
33 |     "@types/jasmine": "~2.8.3",
34 |     "@types/jasminewd2": "~2.0.2",
35 |     "@types/node": "~6.0.60",
36 |     "codelyzer": "^4.0.1",
37 |     "jasmine-core": "~2.8.0",
38 |     "jasmine-spec-reporter": "~4.2.1",
39 |     "karma": "~2.0.0",
40 |     "karma-chrome-launcher": "~2.2.0",
41 |     "karma-coverage-istanbul-reporter": "^1.2.1",
42 |     "karma-jasmine": "~1.1.0",
43 |     "karma-jasmine-html-reporter": "^0.2.2",
44 |     "protractor": "~5.1.2",
45 |     "ts-node": "~4.1.0",
46 |     "tslint": "~5.9.1",
47 |     "typescript": "~2.5.3"
48 |   },
49 |   "keywords": [],
50 |   "description": ""
51 | }
52 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | ul {
2 |   text-align: center;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <!--The content below is only a placeholder and can be replaced.-->
 2 | <div style="text-align:center">
 3 | 	<h1>
 4 | 		Welcome to {{ title }}!
 5 | 	</h1>
 6 | 	<h2>
 7 | 		Read <a href="https://www.techiediaries.com/angular-router/">Angular router tutorial</a> and 
 8 | 		<a href="https://www.techiediaries.com/angular-tutorial/">Angular 6 tutorial</a>
 9 | 	</h2>
10 | 
11 | 	<a [routerLink]="[{ outlets: { primary: ['products'],sidebar: ['products'] } }]">
12 | 		Products
13 | 	</a>
14 | 
15 | </div>
16 | 
17 | <div>
18 | 	<div style="float:right">
19 | 		<router-outlet></router-outlet>
20 | 	</div>
21 | 	<div style="float:left">	
22 | 		<router-outlet name="sidebar"></router-outlet>
23 | 	</div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   selector: "app-root",
 5 |   templateUrl: "./app.component.html",
 6 |   styleUrls: ["./app.component.css"]
 7 | })
 8 | export class AppComponent {
 9 |   title = "Angular Router Demo";
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from "@angular/platform-browser";
 2 | import { NgModule } from "@angular/core";
 3 | 
 4 | import { AppComponent } from "./app.component";
 5 | 
 6 | import { HomeComponent } from "./home/home.component";
 7 | import { ProductListComponent } from "./product-list/product-list.component";
 8 | 
 9 | import { ProductListSidebarComponent } from "./product-list-sidebar/product-list-sidebar.component";
10 | 
11 | import { ProductDetailComponent } from "./product-detail/product-detail.component";
12 | 
13 | import { SidebarComponent } from "./sidebar/sidebar.component";
14 | 
15 | import { routingModule } from "./routing.module";
16 | 
17 | @NgModule({
18 |   declarations: [
19 |     AppComponent,
20 |     ProductListComponent,
21 |     ProductDetailComponent,
22 |     SidebarComponent,
23 |     ProductListSidebarComponent
24 |   ],
25 |   imports: [BrowserModule, routingModule],
26 |   providers: [],
27 |   bootstrap: [AppComponent]
28 | })
29 | export class AppModule {}
30 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <div style="text-align:center">
 2 | 	<h1>
 3 | 		Home 
 4 | 	</h1>
 5 | 
 6 |  <p>
 7 |    This is a demo application showing how to use
 8 |    the Angular Router.
 9 |  </p>
10 | 
11 | </div>


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | 
3 | @Component({
4 |   selector: "home",
5 |   templateUrl: "./home.component.html",
6 |   styleUrls: []
7 | })
8 | export class HomeComponent {}
9 | 


--------------------------------------------------------------------------------
/src/app/models/product.ts:
--------------------------------------------------------------------------------
1 | export class Product {
2 |   id: number;
3 |   name: string;
4 |   constructor(id: number, name: string) {
5 |     this.id = id;
6 |     this.name = name;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/app/product-detail/product-detail.component.html:
--------------------------------------------------------------------------------
1 | <h1>Products Details</h1>
2 | 
3 | Product information: id: {{product.id}} || name: {{product.name}}
4 | <br><a routerLink="/products">Go To Products List</a>


--------------------------------------------------------------------------------
/src/app/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { Product } from "../models/product";
 3 | import { ActivatedRoute } from "@angular/router";
 4 | @Component({
 5 |   selector: "product-detail",
 6 |   templateUrl: "./product-detail.component.html",
 7 |   styleUrls: []
 8 | })
 9 | export class ProductDetailComponent implements OnInit {
10 |   public products: Product[] = [
11 |     new Product(1, "Product 001"),
12 |     new Product(2, "Product 002"),
13 |     new Product(3, "Product 003"),
14 |     new Product(4, "Product 004"),
15 |     new Product(5, "Product 005"),
16 |     new Product(6, "Product 006"),
17 |     new Product(7, "Product 007"),
18 |     new Product(8, "Product 008")
19 |   ];
20 |   product: Product = this.products[0];
21 | 
22 |   constructor(private route: ActivatedRoute) {}
23 |   ngOnInit() {
24 |     this.route.params.subscribe(params => {
25 |       this.products.forEach((p: Product) => {
26 |         if (p.id == params.id) {
27 |           this.product = p;
28 |         }
29 |       });
30 |     });
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/product-list-sidebar/product-list-sidebar.component.html:
--------------------------------------------------------------------------------
1 | <h1>
2 |   Product List Sidebar
3 |   </h1>


--------------------------------------------------------------------------------
/src/app/product-list-sidebar/product-list-sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import { Product } from "../models/product";
3 | @Component({
4 |   selector: "product-list-sidebar",
5 |   templateUrl: "product-list-sidebar.component.html"
6 | })
7 | export class ProductListSidebarComponent {}
8 | 


--------------------------------------------------------------------------------
/src/app/product-list/product-list.component.html:
--------------------------------------------------------------------------------
1 | <h1>Products List</h1>
2 | 
3 | <ul>
4 | 	<li *ngFor="let product of products">
5 | 		<a [routerLink]="['/product/', product.id]">{{product.name}}</a>
6 | 	</li>
7 | </ul>
8 | 
9 | <a routerLink="/">Go To Home</a>


--------------------------------------------------------------------------------
/src/app/product-list/product-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | import { Product } from "../models/product";
 3 | @Component({
 4 |   selector: "product-list",
 5 |   templateUrl: "product-list.component.html"
 6 | })
 7 | export class ProductListComponent {
 8 |   public products: Product[] = [
 9 |     new Product(1, "Product 001"),
10 |     new Product(2, "Product 002"),
11 |     new Product(3, "Product 003"),
12 |     new Product(4, "Product 004"),
13 |     new Product(5, "Product 005"),
14 |     new Product(6, "Product 006"),
15 |     new Product(7, "Product 007"),
16 |     new Product(8, "Product 008")
17 |   ];
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { RouterModule, Routes } from "@angular/router";
 2 | import { ModuleWithProviders } from "@angular/core";
 3 | import { ProductListComponent } from "./product-list/product-list.component";
 4 | import { ProductDetailComponent } from "./product-detail/product-detail.component";
 5 | import { SidebarComponent } from "./sidebar/sidebar.component";
 6 | import { ProductListSidebarComponent } from "./product-list-sidebar/product-list-sidebar.component";
 7 | 
 8 | const routes: Routes = [
 9 |   { path: "products", component: ProductListComponent },
10 |   { path: "product/:id", component: ProductDetailComponent },
11 |   {
12 |     path: "",
13 |     component: SidebarComponent,
14 |     outlet: "sidebar"
15 |   },
16 |   {
17 |     path: "products",
18 |     component: ProductListSidebarComponent,
19 |     outlet: "sidebar"
20 |   }
21 | ];
22 | 
23 | export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);
24 | 


--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
1 | <h1>
2 |   Sidebar
3 | </h1>


--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | 
3 | @Component({
4 |   selector: "sidebar",
5 |   templateUrl: "sidebar.component.html"
6 | })
7 | export class SidebarComponent {}
8 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>Angular</title>
 7 | 	<base href="/">
 8 | 
 9 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
10 | 	<link rel="icon" type="image/x-icon" href="favicon.ico">
11 | </head>
12 | 
13 | <body>
14 | 	<app-root></app-root>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from "@angular/core";
 2 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 3 | 
 4 | import { AppModule } from "./app/app.module";
 5 | import { environment } from "./environments/environment";
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic()
12 |   .bootstrapModule(AppModule)
13 |   .catch(err => console.log(err));
14 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | /** Evergreen browsers require these. **/
44 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45 | import "core-js/es7/reflect";
46 | 
47 | /**
48 |  * Required to support Web Animations `@angular/platform-browser/animations`.
49 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 |  **/
51 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by default for Angular itself.
55 |  */
56 | import "zone.js/dist/zone"; // Included with Angular CLI.
57 | 
58 | /***************************************************************************************************
59 |  * APPLICATION IMPORTS
60 |  */
61 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | html,
4 | body {
5 |   font-family: sans-serif;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------