├── README.md └── Routing Basics ├── .gitignore ├── app ├── app-routing.module.js ├── app-routing.module.js.map ├── app-routing.module.ts ├── app.component.js ├── app.component.js.map ├── app.component.ts ├── app.module.js ├── app.module.js.map ├── app.module.ts ├── department-detail.component.js ├── department-detail.component.js.map ├── department-detail.component.ts ├── department-list.component.js ├── department-list.component.js.map ├── department-list.component.ts ├── employee-list.component.js ├── employee-list.component.js.map ├── employee-list.component.ts ├── home.component.js ├── home.component.js.map ├── home.component.ts ├── main.js ├── main.js.map ├── main.ts ├── page-not-found.component.js ├── page-not-found.component.js.map └── page-not-found.component.ts ├── index.html ├── package.json ├── styles.css ├── systemjs.config.js ├── tsconfig.json └── typings.json /README.md: -------------------------------------------------------------------------------- 1 | # Angular-2-Routing -------------------------------------------------------------------------------- /Routing Basics/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings -------------------------------------------------------------------------------- /Routing Basics/app/app-routing.module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var router_1 = require('@angular/router'); 13 | var department_list_component_1 = require('./department-list.component'); 14 | var employee_list_component_1 = require('./employee-list.component'); 15 | var department_detail_component_1 = require('./department-detail.component'); 16 | var home_component_1 = require('./home.component'); 17 | var page_not_found_component_1 = require('./page-not-found.component'); 18 | var routes = [ 19 | { path: '', redirectTo: '/departmentsList', pathMatch: 'full' }, 20 | { path: 'departmentsList', component: department_list_component_1.DepartmentListComponent }, 21 | { path: 'employees', component: employee_list_component_1.EmployeeListComponent }, 22 | { path: 'departmentsList/:id', component: department_detail_component_1.DepartmentDetailComponent }, 23 | { path: '**', component: page_not_found_component_1.PageNotFoundComponent } 24 | ]; 25 | var AppRoutingModule = (function () { 26 | function AppRoutingModule() { 27 | } 28 | AppRoutingModule = __decorate([ 29 | core_1.NgModule({ 30 | imports: [ 31 | router_1.RouterModule.forRoot(routes) 32 | ], 33 | exports: [ 34 | router_1.RouterModule 35 | ] 36 | }), 37 | __metadata('design:paramtypes', []) 38 | ], AppRoutingModule); 39 | return AppRoutingModule; 40 | }()); 41 | exports.AppRoutingModule = AppRoutingModule; 42 | exports.routingComponents = [home_component_1.HomeComponent, page_not_found_component_1.PageNotFoundComponent, department_list_component_1.DepartmentListComponent, employee_list_component_1.EmployeeListComponent, department_detail_component_1.DepartmentDetailComponent]; 43 | //# sourceMappingURL=app-routing.module.js.map -------------------------------------------------------------------------------- /Routing Basics/app/app-routing.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app-routing.module.js","sourceRoot":"","sources":["app-routing.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA6B,eAAe,CAAC,CAAA;AAC7C,uBAAqC,iBAAiB,CAAC,CAAA;AAEvD,0CAAwC,6BAA6B,CAAC,CAAA;AACtE,wCAAsC,2BAA2B,CAAC,CAAA;AAClE,4CAA0C,+BAA+B,CAAC,CAAA;AAC1E,+BAA8B,kBAAkB,CAAC,CAAA;AACjD,yCAAsC,4BAA4B,CAAC,CAAA;AAEnE,IAAM,MAAM,GAAW;IACjB,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAC;IAC9D,EAAE,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,mDAAuB,EAAE;IAC/D,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,+CAAqB,EAAC;IACtD,EAAE,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,uDAAyB,EAAC;IACpE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,gDAAqB,EAAC;CAEhD,CAAA;AAUL;IAAA;IAA+B,CAAC;IARhC;QAAC,eAAQ,CAAC;YACR,OAAO,EAAE;gBACP,qBAAY,CAAC,OAAO,CAAC,MAAM,CAAC;aAC7B;YACD,OAAO,EAAE;gBACP,qBAAY;aACb;SACF,CAAC;;wBAAA;IAC6B,uBAAC;AAAD,CAAC,AAAhC,IAAgC;AAAnB,wBAAgB,mBAAG,CAAA;AAEnB,yBAAiB,GAAG,CAAC,8BAAa,EAAE,gDAAqB,EAAE,mDAAuB,EAAE,+CAAqB,EAAE,uDAAyB,CAAC,CAAC"} -------------------------------------------------------------------------------- /Routing Basics/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { DepartmentListComponent } from './department-list.component'; 5 | import { EmployeeListComponent } from './employee-list.component'; 6 | import { DepartmentDetailComponent } from './department-detail.component'; 7 | import { HomeComponent } from './home.component'; 8 | import { PageNotFoundComponent } from './page-not-found.component'; 9 | 10 | const routes: Routes = [ 11 | { path: '', redirectTo: '/departments', pathMatch: 'full'}, 12 | { path: 'departments', component: DepartmentListComponent }, 13 | { path: 'employees', component: EmployeeListComponent}, 14 | { path: 'departments/:id', component: DepartmentDetailComponent}, 15 | { path: '**', component: PageNotFoundComponent} 16 | 17 | ] 18 | 19 | @NgModule({ 20 | imports: [ 21 | RouterModule.forRoot(routes) 22 | ], 23 | exports: [ 24 | RouterModule 25 | ] 26 | }) 27 | export class AppRoutingModule {} 28 | 29 | export const routingComponents = [HomeComponent, PageNotFoundComponent, DepartmentListComponent, EmployeeListComponent, DepartmentDetailComponent]; -------------------------------------------------------------------------------- /Routing Basics/app/app.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var AppComponent = (function () { 13 | function AppComponent() { 14 | } 15 | AppComponent = __decorate([ 16 | core_1.Component({ 17 | selector: 'my-app', 18 | template: "

Routing Application

\n \n \n " 19 | }), 20 | __metadata('design:paramtypes', []) 21 | ], AppComponent); 22 | return AppComponent; 23 | }()); 24 | exports.AppComponent = AppComponent; 25 | //# sourceMappingURL=app.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/app.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAW1C;IAAA;IAA4B,CAAC;IAV7B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,8TAMT;SACF,CAAC;;oBAAA;IAC0B,mBAAC;AAAD,CAAC,AAA7B,IAA6B;AAAhB,oBAAY,eAAI,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | selector: 'my-app', 4 | template: `

Routing Application

5 | 9 | 10 | ` 11 | }) 12 | export class AppComponent { } 13 | -------------------------------------------------------------------------------- /Routing Basics/app/app.module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var platform_browser_1 = require('@angular/platform-browser'); 13 | var app_routing_module_1 = require('./app-routing.module'); 14 | var app_component_1 = require('./app.component'); 15 | var AppModule = (function () { 16 | function AppModule() { 17 | } 18 | AppModule = __decorate([ 19 | core_1.NgModule({ 20 | imports: [ 21 | platform_browser_1.BrowserModule, 22 | app_routing_module_1.AppRoutingModule 23 | ], 24 | declarations: [app_component_1.AppComponent, app_routing_module_1.routingComponents], 25 | bootstrap: [app_component_1.AppComponent] 26 | }), 27 | __metadata('design:paramtypes', []) 28 | ], AppModule); 29 | return AppModule; 30 | }()); 31 | exports.AppModule = AppModule; 32 | //# sourceMappingURL=app.module.js.map -------------------------------------------------------------------------------- /Routing Basics/app/app.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA8B,eAAe,CAAC,CAAA;AAC9C,iCAA8B,2BAA2B,CAAC,CAAA;AAC1D,mCAAoD,sBAAsB,CAAC,CAAA;AAC3E,8BAA+B,iBAAiB,CAAC,CAAA;AAUjD;IAAA;IAAyB,CAAC;IAR1B;QAAC,eAAQ,CAAC;YACR,OAAO,EAAO;gBACZ,gCAAa;gBACb,qCAAgB;aACjB;YACD,YAAY,EAAE,CAAE,4BAAY,EAAE,sCAAiB,CAAE;YACjD,SAAS,EAAK,CAAE,4BAAY,CAAE;SAC/B,CAAC;;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule, routingComponents } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | imports: [ 8 | BrowserModule, 9 | AppRoutingModule 10 | ], 11 | declarations: [ AppComponent, routingComponents ], 12 | bootstrap: [ AppComponent ] 13 | }) 14 | export class AppModule { } 15 | -------------------------------------------------------------------------------- /Routing Basics/app/department-detail.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var router_1 = require('@angular/router'); 13 | var DepartmentDetailComponent = (function () { 14 | function DepartmentDetailComponent(route, router) { 15 | this.route = route; 16 | this.router = router; 17 | } 18 | /*ngOnInit() { 19 | let id = parseInt(this.route.snapshot.params['id']); 20 | this.departmentId = id; 21 | }*/ 22 | DepartmentDetailComponent.prototype.ngOnInit = function () { 23 | var _this = this; 24 | this.route.params.subscribe(function (params) { 25 | var id = parseInt(params['id']); 26 | _this.departmentId = id; 27 | }); 28 | }; 29 | DepartmentDetailComponent.prototype.goPrevious = function () { 30 | var previousId = this.departmentId - 1; 31 | this.router.navigate(['/department', previousId]); 32 | }; 33 | DepartmentDetailComponent.prototype.goNext = function () { 34 | console.log('Clicked next'); 35 | var nextId = this.departmentId + 1; 36 | this.router.navigate(['/department', nextId]); 37 | }; 38 | DepartmentDetailComponent.prototype.gotoDepartments = function () { 39 | var selectedId = this.departmentId ? this.departmentId : null; 40 | this.router.navigate(['/departments', { id: selectedId }]); 41 | // Relative Path 42 | // this.router.navigate(['../', {id: selectedId}], { relativeTo: this.route }); 43 | }; 44 | DepartmentDetailComponent = __decorate([ 45 | core_1.Component({ 46 | template: "

You selected department with id = {{departmentId}}

\n Previous\n Next\n

\n \n

\n " 47 | }), 48 | __metadata('design:paramtypes', [router_1.ActivatedRoute, router_1.Router]) 49 | ], DepartmentDetailComponent); 50 | return DepartmentDetailComponent; 51 | }()); 52 | exports.DepartmentDetailComponent = DepartmentDetailComponent; 53 | //# sourceMappingURL=department-detail.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/department-detail.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"department-detail.component.js","sourceRoot":"","sources":["department-detail.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAClD,uBAA+C,iBAAiB,CAAC,CAAA;AAUjE;IAEE,mCAAoB,KAAqB,EAAU,MAAc;QAA7C,UAAK,GAAL,KAAK,CAAgB;QAAU,WAAM,GAAN,MAAM,CAAQ;IAAE,CAAC;IACpE;;;OAGG;IACJ,4CAAQ,GAAR;QAAA,iBAKA;QAJC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,UAAC,MAAc;YACxC,IAAI,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YAChC,KAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACN,CAAC;IACC,8CAAU,GAAV;QACE,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC;IACpD,CAAC;IACD,0CAAM,GAAN;QACE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC7B,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,mDAAe,GAAf;QACE,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC,CAAC;QAE1D,gBAAgB;QAChB,+EAA+E;IAEhF,CAAC;IAtCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,+QAMT;SACF,CAAC;;iCAAA;IA+BF,gCAAC;AAAD,CAAC,AA9BD,IA8BC;AA9BY,iCAAyB,4BA8BrC,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/department-detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router, ActivatedRoute, Params } from '@angular/router'; 3 | @Component({ 4 | template: `

You selected department with id = {{departmentId}}

5 | Previous 6 | Next 7 |

8 | 9 |

10 | ` 11 | }) 12 | export class DepartmentDetailComponent implements OnInit { 13 | public departmentId; 14 | constructor(private route: ActivatedRoute, private router: Router){} 15 | /*ngOnInit() { 16 | let id = parseInt(this.route.snapshot.params['id']); 17 | this.departmentId = id; 18 | }*/ 19 | ngOnInit() { 20 | this.route.params.subscribe((params: Params) => { 21 | let id = parseInt(params['id']); 22 | this.departmentId = id; 23 | }); 24 | } 25 | goPrevious(){ 26 | let previousId = this.departmentId - 1; 27 | this.router.navigate(['/department', previousId]); 28 | } 29 | goNext(){ 30 | console.log('Clicked next'); 31 | let nextId = this.departmentId + 1; 32 | this.router.navigate(['/department', nextId]); 33 | } 34 | gotoDepartments(){ 35 | let selectedId = this.departmentId ? this.departmentId : null; 36 | this.router.navigate(['/departments', {id: selectedId}]); 37 | 38 | // Relative Path 39 | // this.router.navigate(['../', {id: selectedId}], { relativeTo: this.route }); 40 | 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Routing Basics/app/department-list.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var router_1 = require('@angular/router'); 13 | var DepartmentListComponent = (function () { 14 | function DepartmentListComponent(route, router) { 15 | this.route = route; 16 | this.router = router; 17 | this.departments = [ 18 | { "id": 1, "name": "Angular" }, 19 | { "id": 2, "name": "Node" }, 20 | { "id": 3, "name": "MongoDB" }, 21 | { "id": 4, "name": "Ruby" }, 22 | { "id": 5, "name": "Bootstrap" } 23 | ]; 24 | } 25 | DepartmentListComponent.prototype.ngOnInit = function () { 26 | var _this = this; 27 | this.route.params.subscribe(function (params) { 28 | var id = parseInt(params['id']); 29 | _this.selectedId = id; 30 | }); 31 | }; 32 | DepartmentListComponent.prototype.isSelected = function (department) { return department.id === this.selectedId; }; 33 | DepartmentListComponent.prototype.onSelect = function (department) { 34 | this.router.navigate(['/departments', department.id]); 35 | // Relative Path 36 | // this.router.navigate([department.id], { relativeTo: this.route }); 37 | }; 38 | DepartmentListComponent = __decorate([ 39 | core_1.Component({ 40 | selector: 'department-list', 41 | template: "

Department List

\n \n " 42 | }), 43 | __metadata('design:paramtypes', [router_1.ActivatedRoute, router_1.Router]) 44 | ], DepartmentListComponent); 45 | return DepartmentListComponent; 46 | }()); 47 | exports.DepartmentListComponent = DepartmentListComponent; 48 | //# sourceMappingURL=department-list.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/department-list.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"department-list.component.js","sourceRoot":"","sources":["department-list.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAC1C,uBAA+C,iBAAiB,CAAC,CAAA;AAYjE;IAUE,iCAAoB,KAAqB,EAAU,MAAc;QAA7C,UAAK,GAAL,KAAK,CAAgB;QAAU,WAAM,GAAN,MAAM,CAAQ;QARjE,gBAAW,GAAG;YACZ,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAC;YAC5B,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAC;YACzB,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAC;YAC5B,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAC;YACzB,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAC;SAC/B,CAAA;IAEkE,CAAC;IAEpE,0CAAQ,GAAR;QAAA,iBAKD;QAJC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,UAAC,MAAc;YACxC,IAAI,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YAChC,KAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACN,CAAC;IACC,4CAAU,GAAV,UAAW,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpE,0CAAQ,GAAR,UAAS,UAAU;QACjB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,gBAAgB;QAChB,qEAAqE;IAEtE,CAAC;IAnCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,iBAAiB;YAC3B,QAAQ,EAAE,+UAMT;SACF,CAAC;;+BAAA;IA2BF,8BAAC;AAAD,CAAC,AA1BD,IA0BC;AA1BY,+BAAuB,0BA0BnC,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/department-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router, ActivatedRoute, Params } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'department-list', 6 | template: `

Department List

7 | 12 | ` 13 | }) 14 | export class DepartmentListComponent { 15 | public selectedId; 16 | departments = [ 17 | {"id": 1, "name": "Angular"}, 18 | {"id": 2, "name": "Node"}, 19 | {"id": 3, "name": "MongoDB"}, 20 | {"id": 4, "name": "Ruby"}, 21 | {"id": 5, "name": "Bootstrap"} 22 | ] 23 | 24 | constructor(private route: ActivatedRoute, private router: Router){} 25 | 26 | ngOnInit() { 27 | this.route.params.subscribe((params: Params) => { 28 | let id = parseInt(params['id']); 29 | this.selectedId = id; 30 | }); 31 | } 32 | isSelected(department) { return department.id === this.selectedId; } 33 | 34 | onSelect(department) { 35 | this.router.navigate(['/departments', department.id]); 36 | // Relative Path 37 | // this.router.navigate([department.id], { relativeTo: this.route }); 38 | 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Routing Basics/app/employee-list.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var EmployeeListComponent = (function () { 13 | function EmployeeListComponent() { 14 | } 15 | EmployeeListComponent = __decorate([ 16 | core_1.Component({ 17 | selector: 'employee-list', 18 | template: '

Employee List

' 19 | }), 20 | __metadata('design:paramtypes', []) 21 | ], EmployeeListComponent); 22 | return EmployeeListComponent; 23 | }()); 24 | exports.EmployeeListComponent = EmployeeListComponent; 25 | //# sourceMappingURL=employee-list.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/employee-list.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"employee-list.component.js","sourceRoot":"","sources":["employee-list.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAK1C;IAAA;IAAqC,CAAC;IAJtC;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,wBAAwB;SACnC,CAAC;;6BAAA;IACmC,4BAAC;AAAD,CAAC,AAAtC,IAAsC;AAAzB,6BAAqB,wBAAI,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/employee-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | selector: 'employee-list', 4 | template: '

Employee List

' 5 | }) 6 | export class EmployeeListComponent { } 7 | -------------------------------------------------------------------------------- /Routing Basics/app/home.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var HomeComponent = (function () { 13 | function HomeComponent() { 14 | } 15 | HomeComponent = __decorate([ 16 | core_1.Component({ 17 | template: '

Welcome to Angular Routing!

' 18 | }), 19 | __metadata('design:paramtypes', []) 20 | ], HomeComponent); 21 | return HomeComponent; 22 | }()); 23 | exports.HomeComponent = HomeComponent; 24 | //# sourceMappingURL=home.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/home.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"home.component.js","sourceRoot":"","sources":["home.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAI1C;IAAA;IAA6B,CAAC;IAH9B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,sCAAsC;SACjD,CAAC;;qBAAA;IAC2B,oBAAC;AAAD,CAAC,AAA9B,IAA8B;AAAjB,qBAAa,gBAAI,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | template: '

Welcome to Angular Routing!

' 4 | }) 5 | export class HomeComponent { } 6 | -------------------------------------------------------------------------------- /Routing Basics/app/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic'); 3 | var app_module_1 = require('./app.module'); 4 | var platform = platform_browser_dynamic_1.platformBrowserDynamic(); 5 | platform.bootstrapModule(app_module_1.AppModule); 6 | //# sourceMappingURL=main.js.map -------------------------------------------------------------------------------- /Routing Basics/app/main.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,yCAAuC,mCAAmC,CAAC,CAAA;AAC3E,2BAA0B,cAAc,CAAC,CAAA;AACzC,IAAM,QAAQ,GAAG,iDAAsB,EAAE,CAAC;AAC1C,QAAQ,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"} -------------------------------------------------------------------------------- /Routing Basics/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | const platform = platformBrowserDynamic(); 4 | platform.bootstrapModule(AppModule); 5 | -------------------------------------------------------------------------------- /Routing Basics/app/page-not-found.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var __metadata = (this && this.__metadata) || function (k, v) { 9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 10 | }; 11 | var core_1 = require('@angular/core'); 12 | var PageNotFoundComponent = (function () { 13 | function PageNotFoundComponent() { 14 | } 15 | PageNotFoundComponent = __decorate([ 16 | core_1.Component({ 17 | template: '

Page not found!

' 18 | }), 19 | __metadata('design:paramtypes', []) 20 | ], PageNotFoundComponent); 21 | return PageNotFoundComponent; 22 | }()); 23 | exports.PageNotFoundComponent = PageNotFoundComponent; 24 | //# sourceMappingURL=page-not-found.component.js.map -------------------------------------------------------------------------------- /Routing Basics/app/page-not-found.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"page-not-found.component.js","sourceRoot":"","sources":["page-not-found.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAI1C;IAAA;IAAqC,CAAC;IAHtC;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,0BAA0B;SACrC,CAAC;;6BAAA;IACmC,4BAAC;AAAD,CAAC,AAAtC,IAAsC;AAAzB,6BAAqB,wBAAI,CAAA"} -------------------------------------------------------------------------------- /Routing Basics/app/page-not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | template: '

Page not found!

' 4 | }) 5 | export class PageNotFoundComponent { } 6 | -------------------------------------------------------------------------------- /Routing Basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular Routing 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | Loading... 24 | 25 | 26 | -------------------------------------------------------------------------------- /Routing Basics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 6 | "lite": "lite-server", 7 | "postinstall": "typings install", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc -w", 10 | "typings": "typings" 11 | }, 12 | "license": "ISC", 13 | "dependencies": { 14 | "@angular/common": "2.0.0", 15 | "@angular/compiler": "2.0.0", 16 | "@angular/core": "2.0.0", 17 | "@angular/forms": "2.0.0", 18 | "@angular/http": "2.0.0", 19 | "@angular/platform-browser": "2.0.0", 20 | "@angular/platform-browser-dynamic": "2.0.0", 21 | "@angular/router": "3.0.0", 22 | "@angular/upgrade": "2.0.0", 23 | "core-js": "^2.4.1", 24 | "reflect-metadata": "^0.1.3", 25 | "rxjs": "5.0.0-beta.12", 26 | "systemjs": "0.19.27", 27 | "zone.js": "^0.6.23", 28 | "angular2-in-memory-web-api": "0.0.20", 29 | "bootstrap": "^3.3.6" 30 | }, 31 | "devDependencies": { 32 | "concurrently": "^2.2.0", 33 | "lite-server": "^2.2.2", 34 | "typescript": "^2.0.2", 35 | "typings":"^1.3.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Routing Basics/styles.css: -------------------------------------------------------------------------------- 1 | /* Master Styles */ 2 | h1 { 3 | color: #369; 4 | font-family: Arial, Helvetica, sans-serif; 5 | font-size: 250%; 6 | } 7 | h2, h3 { 8 | color: #444; 9 | font-family: Arial, Helvetica, sans-serif; 10 | font-weight: lighter; 11 | } 12 | body { 13 | margin: 2em; 14 | } 15 | body, input[text], button { 16 | color: #888; 17 | font-family: Cambria, Georgia; 18 | } 19 | a { 20 | cursor: pointer; 21 | cursor: hand; 22 | } 23 | button { 24 | font-family: Arial; 25 | background-color: #eee; 26 | border: none; 27 | padding: 5px 10px; 28 | border-radius: 4px; 29 | cursor: pointer; 30 | cursor: hand; 31 | } 32 | button:hover { 33 | background-color: #cfd8dc; 34 | } 35 | button:disabled { 36 | background-color: #eee; 37 | color: #aaa; 38 | cursor: auto; 39 | } 40 | 41 | /* Navigation link styles */ 42 | nav a { 43 | padding: 5px 10px; 44 | text-decoration: none; 45 | margin-top: 10px; 46 | display: inline-block; 47 | background-color: #eee; 48 | border-radius: 4px; 49 | } 50 | nav a:visited, a:link { 51 | color: #607D8B; 52 | } 53 | nav a:hover { 54 | color: #039be5; 55 | background-color: #CFD8DC; 56 | } 57 | nav a.active { 58 | color: #039be5; 59 | } 60 | 61 | /* items class */ 62 | .items { 63 | margin: 0 0 2em 0; 64 | list-style-type: none; 65 | padding-left: 0; 66 | width: 10em; 67 | } 68 | .items li { 69 | cursor: pointer; 70 | position: relative; 71 | left: 0; 72 | background-color: #EEE; 73 | margin: .5em; 74 | padding: .3em; 75 | height: 1.6em; 76 | border-radius: 4px; 77 | } 78 | .items li:hover { 79 | color: #607D8B; 80 | background-color: #DDD; 81 | left: .1em; 82 | } 83 | .items li.selected:hover { 84 | background-color: #BBD8DC; 85 | color: white; 86 | } 87 | 88 | .items .text { 89 | position: relative; 90 | top: -3px; 91 | } 92 | 93 | .items li { 94 | cursor: pointer; 95 | position: relative; 96 | left: 0; 97 | background-color: #EEE; 98 | margin: .5em; 99 | padding: .3em; 100 | height: 1.6em; 101 | border-radius: 4px; 102 | } 103 | 104 | .items .badge { 105 | display: inline-block; 106 | font-size: small; 107 | color: white; 108 | padding: 0.8em 0.7em 0 0.7em; 109 | background-color: #607D8B; 110 | line-height: 1em; 111 | position: relative; 112 | left: -1px; 113 | top: -4px; 114 | height: 1.8em; 115 | margin-right: .8em; 116 | border-radius: 4px 0 0 4px; 117 | } 118 | .items li.selected { 119 | background-color: #CFD8DC; 120 | color: white; 121 | } 122 | /* everywhere else */ 123 | * { 124 | font-family: Arial, Helvetica, sans-serif; 125 | } 126 | -------------------------------------------------------------------------------- /Routing Basics/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | app: 'app', 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | // other libraries 25 | 'rxjs': 'npm:rxjs', 26 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 27 | }, 28 | // packages tells the System loader how to load when no filename and/or no extension 29 | packages: { 30 | app: { 31 | main: './main.js', 32 | defaultExtension: 'js' 33 | }, 34 | rxjs: { 35 | defaultExtension: 'js' 36 | }, 37 | 'angular-in-memory-web-api': { 38 | main: './index.js', 39 | defaultExtension: 'js' 40 | } 41 | } 42 | }); 43 | })(this); 44 | -------------------------------------------------------------------------------- /Routing Basics/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Routing Basics/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759", 4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 5 | "node": "registry:dt/node#6.0.0+20160909174046" 6 | } 7 | } 8 | --------------------------------------------------------------------------------