├── src ├── app │ ├── shared │ │ └── index.ts │ ├── app.component.css │ ├── about │ │ ├── about.component.css │ │ ├── about.component.html │ │ ├── about.component.ts │ │ └── about.component.spec.ts │ ├── home │ │ ├── home.component.css │ │ ├── home.component.html │ │ ├── home.component.ts │ │ └── home.component.spec.ts │ ├── courses │ │ ├── courses.component.css │ │ ├── courses.component.ts │ │ ├── courses.component.spec.ts │ │ └── courses.component.html │ ├── course-cards │ │ ├── course-cards.component.css │ │ ├── course-cards.component.spec.ts │ │ ├── course-cards.component.ts │ │ └── course-cards.component.html │ ├── categories-menu │ │ ├── categories-menu.component.css │ │ ├── categories-menu.component.spec.ts │ │ ├── categories-menu.component.html │ │ └── categories-menu.component.ts │ ├── course-category │ │ ├── course-category.component.css │ │ ├── course-category.component.html │ │ ├── course-category.component.ts │ │ └── course-category.component.spec.ts │ ├── index.ts │ ├── app.component.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.spec.ts │ └── app.module.ts ├── assets │ ├── .gitkeep │ └── .npmignore ├── styles.css ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── typings.d.ts ├── main.ts ├── tsconfig.json ├── index.html ├── polyfills.ts ├── test.ts └── router.config.ts ├── .gitignore ├── e2e ├── app.po.ts ├── tsconfig.json └── app.e2e-spec.ts ├── protractor.conf.js ├── angular-cli.json ├── karma.conf.js ├── README.md ├── package.json └── tslint.json /src/app/shared/index.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/.npmignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/about/about.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/courses/courses.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/course-cards/course-cards.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/categories-menu/categories-menu.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/course-category/course-category.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | main { 4 | margin-top: 80px; 5 | } -------------------------------------------------------------------------------- /src/app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app.component'; 2 | export * from './app.module'; 3 | -------------------------------------------------------------------------------- /src/app/course-category/course-category.component.html: -------------------------------------------------------------------------------- 1 |

2 | course-category works! 3 |

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

3 | about works! 4 |

5 |
6 | -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | home works! 4 |

5 |
6 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-university/angular-router-menu-system/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /__build__ 2 | /__server_build__ 3 | /node_modules 4 | /typings 5 | /tsd_typings/ 6 | npm-debug.log 7 | dist 8 | .idea 9 | .DS_Store 10 | tmp 11 | perf-logs 12 | v8.log 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | // Typings reference file, see links for more information 2 | // https://github.com/typings/typings 3 | // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html 4 | 5 | declare var System: any; 6 | -------------------------------------------------------------------------------- /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 = 'app works!'; 10 | } 11 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class AngularRouterMenuSystemPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule], 9 | providers: [] 10 | }) 11 | export class AngularRouterMenuSystemRoutingModule { } 12 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-about', 5 | templateUrl: './about.component.html', 6 | styleUrls: ['./about.component.css'] 7 | }) 8 | export class AboutComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/courses/courses.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-courses', 5 | templateUrl: './courses.component.html', 6 | styleUrls: ['./courses.component.css'] 7 | }) 8 | export class CoursesComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { HomeComponent } from './home.component'; 5 | 6 | describe('Component: Home', () => { 7 | it('should create an instance', () => { 8 | let component = new HomeComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/about/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AboutComponent } from './about.component'; 5 | 6 | describe('Component: About', () => { 7 | it('should create an instance', () => { 8 | let component = new AboutComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/courses/courses.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { CoursesComponent } from './courses.component'; 5 | 6 | describe('Component: Courses', () => { 7 | it('should create an instance', () => { 8 | let component = new CoursesComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import './polyfills.ts'; 2 | 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { enableProdMode } from '@angular/core'; 5 | import { environment } from './environments/environment'; 6 | import { AppModule } from './app/'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | platformBrowserDynamic().bootstrapModule(AppModule); 13 | -------------------------------------------------------------------------------- /src/app/course-category/course-category.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-course-category', 5 | templateUrl: './course-category.component.html', 6 | styleUrls: ['./course-category.component.css'] 7 | }) 8 | export class CoursesCategoryComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "module": "commonjs", 8 | "moduleResolution": "node", 9 | "outDir": "../dist/out-tsc-e2e", 10 | "sourceMap": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "../node_modules/@types" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/course-cards/course-cards.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { CourseCardsComponent } from './course-cards.component'; 5 | 6 | describe('Component: CourseCards', () => { 7 | it('should create an instance', () => { 8 | let component = new CourseCardsComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /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/app/categories-menu/categories-menu.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { SideMenuComponent } from './categories-menu.component'; 5 | 6 | describe('Component: CategoriesMenu', () => { 7 | it('should create an instance', () => { 8 | let component = new SideMenuComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AngularRouterMenuSystemPage } from './app.po'; 2 | 3 | describe('angular-router-menu-system App', function() { 4 | let page: AngularRouterMenuSystemPage; 5 | 6 | beforeEach(() => { 7 | page = new AngularRouterMenuSystemPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "emitDecoratorMetadata": true, 5 | "experimentalDecorators": true, 6 | "lib": ["es6", "dom"], 7 | "mapRoot": "./", 8 | "module": "es6", 9 | "moduleResolution": "node", 10 | "outDir": "../dist/out-tsc", 11 | "sourceMap": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "../node_modules/@types" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/course-category/course-category.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { CoursesCategoryComponent } from './course-category.component'; 5 | 6 | describe('Component: CourseCategory', () => { 7 | it('should create an instance', () => { 8 | let component = new CoursesCategoryComponent(); 9 | expect(component).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/categories-menu/categories-menu.component.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularRouterMenuSystem 6 | 7 | 8 | 9 | 10 | 11 | 12 | Loading... 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/app/categories-menu/categories-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {ActivatedRoute} from "@angular/router"; 3 | 4 | @Component({ 5 | selector: 'app-categories-menu', 6 | templateUrl: './categories-menu.component.html', 7 | styleUrls: ['./categories-menu.component.css'] 8 | }) 9 | export class SideMenuComponent implements OnInit { 10 | 11 | constructor(route: ActivatedRoute) { 12 | 13 | route.params.subscribe(params => console.log("side menu id parameter",params['id'])); 14 | 15 | } 16 | 17 | ngOnInit() { 18 | 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/course-cards/course-cards.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {Router, ActivatedRoute} from "@angular/router"; 3 | 4 | @Component({ 5 | selector: 'app-course-cards', 6 | templateUrl: './course-cards.component.html', 7 | styleUrls: ['./course-cards.component.css'] 8 | }) 9 | export class CourseCardsComponent { 10 | 11 | constructor(private router: Router, private route: ActivatedRoute) { 12 | 13 | } 14 | 15 | navigate(path) { 16 | 17 | this.router.navigate([{outlets: {primary: path, sidemenu:path}}], {relativeTo: this.route}); 18 | 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | // This file includes polyfills needed by Angular 2 and is loaded before 2 | // the app. You can add your own extra polyfills to this file. 3 | import 'core-js/es6/symbol'; 4 | import 'core-js/es6/object'; 5 | import 'core-js/es6/function'; 6 | import 'core-js/es6/parse-int'; 7 | import 'core-js/es6/parse-float'; 8 | import 'core-js/es6/number'; 9 | import 'core-js/es6/math'; 10 | import 'core-js/es6/string'; 11 | import 'core-js/es6/date'; 12 | import 'core-js/es6/array'; 13 | import 'core-js/es6/regexp'; 14 | import 'core-js/es6/map'; 15 | import 'core-js/es6/set'; 16 | import 'core-js/es6/reflect'; 17 | 18 | import 'core-js/es7/reflect'; 19 | import 'zone.js/dist/zone'; 20 | -------------------------------------------------------------------------------- /src/app/courses/courses.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
    6 |
  1. Home
    2. 7 |
  2. Courses
    3. 8 |
9 |
10 |

Course Categories!

11 |

This is a list of course categories, click on each to see a list of courses for a given 12 | category.

13 |
14 | 15 |
16 | 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/docs/referenceConf.js 3 | 4 | /*global jasmine */ 5 | var SpecReporter = require('jasmine-spec-reporter'); 6 | 7 | exports.config = { 8 | allScriptsTimeout: 11000, 9 | specs: [ 10 | './e2e/**/*.e2e-spec.ts' 11 | ], 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | directConnect: true, 16 | baseUrl: 'http://localhost:4200/', 17 | framework: 'jasmine', 18 | jasmineNodeOpts: { 19 | showColors: true, 20 | defaultTimeoutInterval: 30000, 21 | print: function() {} 22 | }, 23 | useAllAngular2AppRoots: true, 24 | beforeLaunch: function() { 25 | require('ts-node').register({ 26 | project: 'e2e' 27 | }); 28 | }, 29 | onPrepare: function() { 30 | jasmine.getEnv().addReporter(new SpecReporter()); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "project": { 3 | "version": "1.0.0-beta.16", 4 | "name": "angular-router-menu-system" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": "assets", 11 | "index": "index.html", 12 | "main": "main.ts", 13 | "test": "test.ts", 14 | "tsconfig": "tsconfig.json", 15 | "prefix": "app", 16 | "mobile": false, 17 | "styles": [ 18 | "styles.css" 19 | ], 20 | "scripts": [], 21 | "environments": { 22 | "source": "environments/environment.ts", 23 | "dev": "environments/environment.ts", 24 | "prod": "environments/environment.prod.ts" 25 | } 26 | } 27 | ], 28 | "addons": [], 29 | "packages": [], 30 | "e2e": { 31 | "protractor": { 32 | "config": "./protractor.conf.js" 33 | } 34 | }, 35 | "test": { 36 | "karma": { 37 | "config": "./karma.conf.js" 38 | } 39 | }, 40 | "defaults": { 41 | "styleExt": "css", 42 | "prefixInterfaces": false 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', 'angular-cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-remap-istanbul'), 12 | require('angular-cli/plugins/karma') 13 | ], 14 | files: [ 15 | { pattern: './src/test.ts', watched: false } 16 | ], 17 | preprocessors: { 18 | './src/test.ts': ['angular-cli'] 19 | }, 20 | remapIstanbulReporter: { 21 | reports: { 22 | html: 'coverage', 23 | lcovonly: './coverage/coverage.lcov' 24 | } 25 | }, 26 | angularCli: { 27 | config: './angular-cli.json', 28 | environment: 'dev' 29 | }, 30 | reporters: ['progress', 'karma-remap-istanbul'], 31 | port: 9876, 32 | colors: true, 33 | logLevel: config.LOG_INFO, 34 | autoWatch: true, 35 | browsers: ['Chrome'], 36 | singleRun: false 37 | }); 38 | }; 39 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | 6 | describe('App: AngularRouterMenuSystem', () => { 7 | beforeEach(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | }); 13 | }); 14 | 15 | it('should create the app', async(() => { 16 | let fixture = TestBed.createComponent(AppComponent); 17 | let app = fixture.debugElement.componentInstance; 18 | expect(app).toBeTruthy(); 19 | })); 20 | 21 | it(`should have as title 'app works!'`, async(() => { 22 | let fixture = TestBed.createComponent(AppComponent); 23 | let app = fixture.debugElement.componentInstance; 24 | expect(app.title).toEqual('app works!'); 25 | })); 26 | 27 | it('should render title in a h1 tag', async(() => { 28 | let fixture = TestBed.createComponent(AppComponent); 29 | fixture.detectChanges(); 30 | let compiled = fixture.debugElement.nativeElement; 31 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 32 | })); 33 | }); 34 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import './polyfills.ts'; 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | 10 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 11 | declare var __karma__: any; 12 | declare var require: any; 13 | 14 | // Prevent Karma from running prematurely. 15 | __karma__.loaded = function () {}; 16 | 17 | 18 | Promise.all([ 19 | System.import('@angular/core/testing'), 20 | System.import('@angular/platform-browser-dynamic/testing') 21 | ]) 22 | // First, initialize the Angular testing environment. 23 | .then(([testing, testingBrowser]) => { 24 | testing.getTestBed().initTestEnvironment( 25 | testingBrowser.BrowserDynamicTestingModule, 26 | testingBrowser.platformBrowserDynamicTesting() 27 | ); 28 | }) 29 | // Then we find all the tests. 30 | .then(() => require.context('./', true, /\.spec\.ts/)) 31 | // And load the modules. 32 | .then(context => context.keys().map(context)) 33 | // Finally, start Karma to run the tests. 34 | .then(__karma__.start, __karma__.error); 35 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { HomeComponent } from './home/home.component'; 8 | import {routerConfig} from "../router.config"; 9 | import {RouterModule} from "@angular/router"; 10 | import { AboutComponent } from './about/about.component'; 11 | import { CoursesComponent } from './courses/courses.component'; 12 | import { CourseCardsComponent } from './course-cards/course-cards.component'; 13 | import { SideMenuComponent } from './categories-menu/categories-menu.component'; 14 | import { CoursesCategoryComponent } from './course-category/course-category.component'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent, 19 | HomeComponent, 20 | AboutComponent, 21 | CoursesComponent, 22 | CourseCardsComponent, 23 | SideMenuComponent, 24 | CoursesCategoryComponent 25 | ], 26 | imports: [ 27 | BrowserModule, 28 | FormsModule, 29 | HttpModule, 30 | RouterModule.forRoot(routerConfig) 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularRouterMenuSystem 2 | 3 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.16. 4 | 5 | ## Development server 6 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 7 | 8 | ## Code scaffolding 9 | 10 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`. 11 | 12 | ## Build 13 | 14 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. 15 | 16 | ## Running unit tests 17 | 18 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 19 | 20 | ## Running end-to-end tests 21 | 22 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 23 | Before running the tests make sure you are serving the app via `ng serve`. 24 | 25 | ## Deploying to Github Pages 26 | 27 | Run `ng github-pages:deploy` to deploy to Github Pages. 28 | 29 | ## Further help 30 | 31 | To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-router-menu-system", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "start": "ng serve", 8 | "lint": "tslint \"src/**/*.ts\"", 9 | "test": "ng test", 10 | "pree2e": "webdriver-manager update", 11 | "e2e": "protractor" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/common": "2.0.0", 16 | "@angular/compiler": "2.0.0", 17 | "@angular/core": "2.0.0", 18 | "@angular/forms": "2.0.0", 19 | "@angular/http": "2.0.0", 20 | "@angular/platform-browser": "2.0.0", 21 | "@angular/platform-browser-dynamic": "2.0.0", 22 | "@angular/router": "3.0.0", 23 | "core-js": "^2.4.1", 24 | "rxjs": "5.0.0-beta.12", 25 | "ts-helpers": "^1.1.1", 26 | "zone.js": "^0.6.23" 27 | }, 28 | "devDependencies": { 29 | "@types/jasmine": "^2.2.30", 30 | "angular-cli": "1.0.0-beta.16", 31 | "codelyzer": "~0.0.26", 32 | "jasmine-core": "2.4.1", 33 | "jasmine-spec-reporter": "2.5.0", 34 | "karma": "1.2.0", 35 | "karma-chrome-launcher": "^2.0.0", 36 | "karma-cli": "^1.0.1", 37 | "karma-jasmine": "^1.0.2", 38 | "karma-remap-istanbul": "^0.2.1", 39 | "protractor": "4.0.9", 40 | "ts-node": "1.2.1", 41 | "tslint": "3.13.0", 42 | "typescript": "2.0.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/router.config.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import {Routes} from "@angular/router"; 4 | import {HomeComponent} from "./app/home/home.component"; 5 | import {AboutComponent} from "./app/about/about.component"; 6 | import {CoursesComponent} from "./app/courses/courses.component"; 7 | import {CourseCardsComponent} from "./app/course-cards/course-cards.component"; 8 | import {SideMenuComponent} from "./app/categories-menu/categories-menu.component"; 9 | import {CoursesCategoryComponent} from "./app/course-category/course-category.component"; 10 | 11 | 12 | export const routerConfig: Routes = [ 13 | { 14 | path: 'home', 15 | component: HomeComponent 16 | }, 17 | { 18 | path: 'about', 19 | component: AboutComponent 20 | }, 21 | { 22 | path: 'courses', 23 | component: CoursesComponent, 24 | children: [ 25 | { 26 | path: '', 27 | component: CourseCardsComponent 28 | }, 29 | { 30 | path: ':id', 31 | component: CoursesCategoryComponent 32 | }, 33 | { 34 | path: '', 35 | outlet: 'sidemenu', 36 | component: SideMenuComponent 37 | }, 38 | { 39 | path: ':id', 40 | outlet: 'sidemenu', 41 | component: SideMenuComponent 42 | } 43 | ] 44 | }, 45 | { 46 | path: '', 47 | redirectTo: '/home', 48 | pathMatch: 'full' 49 | }, 50 | { 51 | path: '**', 52 | redirectTo: '/home', 53 | pathMatch: 'full' 54 | } 55 | ]; -------------------------------------------------------------------------------- /src/app/course-cards/course-cards.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Development

4 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

5 |

View details »

6 |
7 |
8 |

IT & Software

9 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

10 |

View details »

11 |
12 |
13 |

Office Productivity

14 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

15 |

View details »

16 |
17 |
18 |

Photography

19 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

20 |

View details »

21 |
22 |
23 |

Health and Fitness

24 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

25 |

View details »

26 |
27 |
28 |

Music

29 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

30 |

View details »

31 |
32 |
-------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "class-name": true, 7 | "comment-format": [ 8 | true, 9 | "check-space" 10 | ], 11 | "curly": true, 12 | "eofline": true, 13 | "forin": true, 14 | "indent": [ 15 | true, 16 | "spaces" 17 | ], 18 | "label-position": true, 19 | "label-undefined": true, 20 | "max-line-length": [ 21 | true, 22 | 140 23 | ], 24 | "member-access": false, 25 | "member-ordering": [ 26 | true, 27 | "static-before-instance", 28 | "variables-before-functions" 29 | ], 30 | "no-arg": true, 31 | "no-bitwise": true, 32 | "no-console": [ 33 | true, 34 | "debug", 35 | "info", 36 | "time", 37 | "timeEnd", 38 | "trace" 39 | ], 40 | "no-construct": true, 41 | "no-debugger": true, 42 | "no-duplicate-key": true, 43 | "no-duplicate-variable": true, 44 | "no-empty": false, 45 | "no-eval": true, 46 | "no-inferrable-types": true, 47 | "no-shadowed-variable": true, 48 | "no-string-literal": false, 49 | "no-switch-case-fall-through": true, 50 | "no-trailing-whitespace": true, 51 | "no-unused-expression": true, 52 | "no-unused-variable": true, 53 | "no-unreachable": true, 54 | "no-use-before-declare": true, 55 | "no-var-keyword": true, 56 | "object-literal-sort-keys": false, 57 | "one-line": [ 58 | true, 59 | "check-open-brace", 60 | "check-catch", 61 | "check-else", 62 | "check-whitespace" 63 | ], 64 | "quotemark": [ 65 | true, 66 | "single" 67 | ], 68 | "radix": true, 69 | "semicolon": [ 70 | "always" 71 | ], 72 | "triple-equals": [ 73 | true, 74 | "allow-null-check" 75 | ], 76 | "typedef-whitespace": [ 77 | true, 78 | { 79 | "call-signature": "nospace", 80 | "index-signature": "nospace", 81 | "parameter": "nospace", 82 | "property-declaration": "nospace", 83 | "variable-declaration": "nospace" 84 | } 85 | ], 86 | "variable-name": false, 87 | "whitespace": [ 88 | true, 89 | "check-branch", 90 | "check-decl", 91 | "check-operator", 92 | "check-separator", 93 | "check-type" 94 | ], 95 | 96 | "directive-selector-prefix": [true, "app"], 97 | "component-selector-prefix": [true, "app"], 98 | "directive-selector-name": [true, "camelCase"], 99 | "component-selector-name": [true, "kebab-case"], 100 | "directive-selector-type": [true, "attribute"], 101 | "component-selector-type": [true, "element"], 102 | "use-input-property-decorator": true, 103 | "use-output-property-decorator": true, 104 | "use-host-property-decorator": true, 105 | "no-input-rename": true, 106 | "no-output-rename": true, 107 | "use-life-cycle-interface": true, 108 | "use-pipe-transform-interface": true, 109 | "component-class-suffix": true, 110 | "directive-class-suffix": true 111 | } 112 | } 113 | --------------------------------------------------------------------------------