├── src ├── app │ ├── index.ts │ ├── hero │ │ ├── index.ts │ │ ├── hero-detail │ │ │ ├── index.ts │ │ │ ├── hero-detail.component.html │ │ │ └── hero-detail.component.ts │ │ ├── hero-list │ │ │ ├── index.ts │ │ │ ├── shared │ │ │ │ ├── index.ts │ │ │ │ └── hero-list.constant.ts │ │ │ ├── hero-list.component.scss │ │ │ ├── hero-list.component.html │ │ │ └── hero-list.component.ts │ │ ├── hero.model.ts │ │ ├── hero.module.ts │ │ ├── hero.component.ts │ │ └── hero.routes.ts │ ├── home │ │ ├── index.ts │ │ ├── about │ │ │ ├── index.ts │ │ │ └── about.component.ts │ │ ├── contact │ │ │ ├── index.ts │ │ │ └── contact.component.ts │ │ ├── home.component.ts │ │ ├── home.module.ts │ │ ├── home.routes.ts │ │ ├── home.component.html │ │ └── home.component.scss │ ├── navbar │ │ ├── index.ts │ │ ├── navbar.component.scss │ │ ├── navbar.metadata.ts │ │ ├── navbar.module.ts │ │ ├── navbar-routes.config.ts │ │ ├── navbar.component.ts │ │ └── navbar.component.html │ ├── app.component.ts │ └── app.module.ts ├── typings.d.ts ├── images │ └── shield-large.png ├── main.ts ├── main-io.ts ├── tsconfig.json ├── index.html └── system-config.ts ├── typings ├── browser.d.ts └── browser │ └── ambient │ └── es6-shim │ └── index.d.ts ├── .gitignore ├── bs-config.json ├── gulp.config.js ├── LICENSE ├── package.json ├── README.MD └── gulpfile.js /src/app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app.module'; 2 | -------------------------------------------------------------------------------- /src/app/hero/index.ts: -------------------------------------------------------------------------------- 1 | export * from './hero.module'; 2 | -------------------------------------------------------------------------------- /src/app/home/index.ts: -------------------------------------------------------------------------------- 1 | export * from './home.module'; 2 | -------------------------------------------------------------------------------- /src/app/home/about/index.ts: -------------------------------------------------------------------------------- 1 | export * from './about.component'; -------------------------------------------------------------------------------- /src/app/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './navbar.module'; 2 | -------------------------------------------------------------------------------- /src/app/home/contact/index.ts: -------------------------------------------------------------------------------- 1 | export * from './contact.component'; -------------------------------------------------------------------------------- /src/app/hero/hero-detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from './hero-detail.component'; -------------------------------------------------------------------------------- /src/app/hero/hero-list/index.ts: -------------------------------------------------------------------------------- 1 | export * from './hero-list.component'; -------------------------------------------------------------------------------- /src/app/hero/hero-list/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './hero-list.constant'; -------------------------------------------------------------------------------- /typings/browser.d.ts: -------------------------------------------------------------------------------- 1 | /// -------------------------------------------------------------------------------- /src/app/hero/hero.model.ts: -------------------------------------------------------------------------------- 1 | export class Hero { 2 | id: number; 3 | name: string; 4 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | build 4 | typings 5 | io-gh-pages 6 | npm-debug.log 7 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare var module: { id: string }; 3 | -------------------------------------------------------------------------------- /src/images/shield-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sirajc/angular2-bs4-navbar/HEAD/src/images/shield-large.png -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.scss: -------------------------------------------------------------------------------- 1 | .active { 2 | color: #fff; 3 | } 4 | .navbar-toggler { 5 | border: solid 1px silver; 6 | border-radius: 2px; 7 | color: #eee; 8 | } 9 | -------------------------------------------------------------------------------- /bs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": "8002", 3 | "server": { 4 | "baseDir": ["./", "./build"], 5 | "directory": true 6 | }, 7 | "files": ["./build/**/*.{html,htm,css,js}", "./node_modules/**/*.*"] 8 | } 9 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.metadata.ts: -------------------------------------------------------------------------------- 1 | export enum MenuType { 2 | BRAND, 3 | LEFT, 4 | RIGHT 5 | } 6 | 7 | export interface RouteInfo { 8 | path: string; 9 | title: string; 10 | menuType: MenuType; 11 | } 12 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app'; 3 | 4 | platformBrowserDynamic().bootstrapModule(AppModule).catch((error) => console.log("An error occured in bootsrap :", error)); 5 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'home', 6 | templateUrl: 'home.component.html', 7 | styleUrls: ['home.component.css'] 8 | }) 9 | export class HomeComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/home/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'about-us', 6 | template: '
This is About Us Component
' 7 | }) 8 | export class AboutUsComponent { 9 | 10 | } -------------------------------------------------------------------------------- /src/app/home/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'contact', 6 | template: '
This is Contact Component
' 7 | }) 8 | export class ContactComponent { 9 | 10 | } -------------------------------------------------------------------------------- /src/app/hero/hero-list/hero-list.component.scss: -------------------------------------------------------------------------------- 1 | .heroes { 2 | width: 300px; 3 | li { 4 | transition: all 0.2s ease; 5 | 6 | span { 7 | cursor: default; 8 | } 9 | a { 10 | cursor: pointer; 11 | } 12 | } 13 | li:hover { 14 | padding-left: 30px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'my-app', 6 | template: ` 7 | 8 | 9 | ` 10 | 11 | }) 12 | export class AppComponent { 13 | public title = 'Angular2 Bootstrap4 Navbar'; 14 | } 15 | -------------------------------------------------------------------------------- /src/app/hero/hero-list/hero-list.component.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { MODULE_COMPONENTS, MODULE_ROUTES } from './home.routes'; 4 | 5 | @NgModule({ 6 | imports: [ RouterModule.forChild(MODULE_ROUTES) ], 7 | declarations: [ MODULE_COMPONENTS ] 8 | }) 9 | export class HomeModule {} 10 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | import { NavbarComponent } from './navbar.component'; 5 | 6 | @NgModule({ 7 | imports: [ RouterModule, CommonModule ], 8 | declarations: [ NavbarComponent ], 9 | exports: [ NavbarComponent ] 10 | }) 11 | export class NavbarModule {} 12 | -------------------------------------------------------------------------------- /src/app/hero/hero.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Route, RouterModule } from '@angular/router'; 4 | 5 | import { MODULE_COMPONENTS, MODULE_ROUTES } from './hero.routes'; 6 | 7 | @NgModule({ 8 | imports: [ CommonModule, RouterModule.forChild(MODULE_ROUTES) ], 9 | declarations: [ MODULE_COMPONENTS ] 10 | }) 11 | export class HeroModule {} 12 | -------------------------------------------------------------------------------- /src/app/navbar/navbar-routes.config.ts: -------------------------------------------------------------------------------- 1 | import { MenuType, RouteInfo } from './navbar.metadata'; 2 | 3 | export const ROUTES: RouteInfo[] = [ 4 | { path: '', title: 'Angular2 Bootstrap4 Navbar', menuType: MenuType.BRAND }, 5 | { path: 'heroes', title: 'Heroes', menuType: MenuType.LEFT }, 6 | { path: 'about', title: 'About Us', menuType: MenuType.RIGHT }, 7 | { path: 'contact', title: 'Contact', menuType: MenuType.RIGHT } 8 | ]; 9 | -------------------------------------------------------------------------------- /src/main-io.ts: -------------------------------------------------------------------------------- 1 | import { APP_BASE_HREF } from '@angular/common'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { AppModule } from './app'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule, { 6 | compilerOptions: { 7 | providers: [ 8 | { provide: APP_BASE_HREF, useValue: '/angular2-bs4-navbar' } 9 | ] 10 | } 11 | }).catch((error) => console.log("An error occured in bootsrap :", error)); 12 | -------------------------------------------------------------------------------- /src/app/hero/hero.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { HeroDetail } from './hero-detail'; 3 | import { HeroListComponent } from './hero-list'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector:'hero-component', 8 | template: ` 9 |
10 |

Marvel Heroes

11 | 12 |
13 | ` 14 | }) 15 | export class HeroComponent { 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/hero/hero-detail/hero-detail.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{hero.name}}

5 |
id : {{hero.id}}
6 |

{{hero.name}}

7 |
8 |
9 |
10 | Hero not found!! 11 |
12 |
13 | Back 14 |
15 | -------------------------------------------------------------------------------- /gulp.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function () { 2 | var client = './src/'; 3 | 4 | var config = { 5 | /** 6 | * File paths 7 | */ 8 | build: './build/', 9 | css: client + '**/*.css', 10 | html: client + '**/*.html', 11 | images: client + 'images/**/*.*', 12 | imagesRoot: 'images', 13 | scss: client + '**/*.scss', 14 | src: client, 15 | ts: client + '**/*.ts', 16 | tsMaps: '.', // write map in same location as js 17 | 18 | }; 19 | 20 | return config; 21 | }; 22 | -------------------------------------------------------------------------------- /src/app/hero/hero-list/shared/hero-list.constant.ts: -------------------------------------------------------------------------------- 1 | import { Hero } from '../../hero.model'; 2 | 3 | export const HEROES: Hero[] = [ 4 | { "id": 11, "name": "Iron Man" }, 5 | { "id": 12, "name": "Spider Man" }, 6 | { "id": 13, "name": "Captain America" }, 7 | { "id": 14, "name": "Hulk" }, 8 | { "id": 15, "name": "Thor" }, 9 | { "id": 16, "name": "Black Widow" }, 10 | { "id": 17, "name": "Daredevil" }, 11 | { "id": 18, "name": "Hawkeye" }, 12 | { "id": 19, "name": "Wolverine" }, 13 | { "id": 20, "name": "Magneto" } 14 | ]; 15 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "es5", 5 | "module": "commonjs", 6 | "moduleResolution": "node", 7 | "sourceMap": true, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "removeComments": false, 11 | "declaration": false, 12 | "noImplicitAny": false, 13 | "outDir": "../build/app" 14 | }, 15 | "files": [ 16 | "main.ts", 17 | "typings.d.ts" 18 | ], 19 | "exclude": [ 20 | "node_modules" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { RouterModule } from '@angular/router'; 4 | import { HomeModule } from './home'; 5 | import { HeroModule } from './hero'; 6 | import { NavbarModule } from './navbar'; 7 | 8 | 9 | import { AppComponent } from './app.component'; 10 | 11 | @NgModule({ 12 | imports: [ BrowserModule, HomeModule, HeroModule, NavbarModule, RouterModule.forRoot([]) ], 13 | declarations: [ AppComponent ], 14 | bootstrap: [ AppComponent ] 15 | }) 16 | export class AppModule {} 17 | -------------------------------------------------------------------------------- /src/app/home/home.routes.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Route } from '@angular/router'; 3 | import { HomeComponent } from './home.component'; 4 | import { AboutUsComponent } from './about'; 5 | import { ContactComponent } from './contact'; 6 | 7 | export const MODULE_ROUTES: Route[] = [ 8 | { path: '', pathMatch: 'full' , component: HomeComponent }, 9 | { path: 'about', component: AboutUsComponent }, 10 | { path: 'contact', component: ContactComponent } 11 | ] 12 | 13 | export const MODULE_COMPONENTS = [ 14 | HomeComponent, 15 | AboutUsComponent, 16 | ContactComponent 17 | ] 18 | -------------------------------------------------------------------------------- /src/app/hero/hero.routes.ts: -------------------------------------------------------------------------------- 1 | import { Route } from '@angular/router'; 2 | import { HeroComponent } from './hero.component'; 3 | 4 | import { HeroDetail } from './hero-detail'; 5 | import { HeroListComponent } from './hero-list'; 6 | 7 | const CHILD_ROUTES: Route[] = [ 8 | { path: '', pathMatch: 'full', component: HeroListComponent }, 9 | { path: 'detail/:id', component: HeroDetail } 10 | ]; 11 | 12 | export const MODULE_ROUTES: Route[] = [ 13 | { path: 'heroes', component: HeroComponent, children: [ ...CHILD_ROUTES ] } 14 | ] 15 | 16 | export const MODULE_COMPONENTS = [ 17 | HeroComponent, HeroListComponent, HeroDetail 18 | ] 19 | -------------------------------------------------------------------------------- /src/app/hero/hero-list/hero-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Hero } from '../hero.model'; 3 | import { HEROES } from './shared'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector: 'hero-list', 8 | templateUrl: 'hero-list.component.html', 9 | styleUrls: ['hero-list.component.css'] 10 | }) 11 | export class HeroListComponent { 12 | public heroes = HEROES; 13 | public selectedHero: Hero = undefined; 14 | 15 | public onSelect(hero: Hero){ 16 | this.selectedHero = hero; 17 | } 18 | public getSelectedClass(hero: Hero) { 19 | return {'selected': hero === this.selectedHero} 20 | } 21 | } -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ROUTES } from './navbar-routes.config'; 3 | import { MenuType } from './navbar.metadata'; 4 | 5 | @Component({ 6 | moduleId: module.id, 7 | selector: 'navbar', 8 | templateUrl: 'navbar.component.html', 9 | styleUrls: [ 'navbar.component.css' ] 10 | }) 11 | export class NavbarComponent implements OnInit { 12 | public menuItems: any[]; 13 | public brandMenu: any; 14 | isCollapsed = true; 15 | 16 | constructor() {} 17 | 18 | ngOnInit() { 19 | this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); 20 | this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; 21 | } 22 | 23 | public get menuIcon(): string { 24 | return this.isCollapsed ? '☰' : '✖'; 25 | } 26 | 27 | public getMenuItemClasses(menuItem: any) { 28 | return { 29 | 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT 30 | }; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 | 13 |
14 | 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2016 Sirajuddin Choudhary 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Angular2 Bootstrap4 Navbar App 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | Angular2 Bootstrap4 with Nav Bar...


Loading App 23 | 29 | 30 | -------------------------------------------------------------------------------- /src/app/hero/hero-detail/hero-detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router, ActivatedRoute } from '@angular/router'; 3 | 4 | import { Hero } from '../hero.model'; 5 | import { HEROES } from '../hero-list/shared'; 6 | 7 | @Component({ 8 | moduleId: module.id, 9 | selector: 'hero-detail', 10 | templateUrl: 'hero-detail.component.html', 11 | styles: [` 12 | .hero-detail { 13 | width: 300px; 14 | margin-left: 20px; 15 | } 16 | `], 17 | inputs: ['hero'] 18 | }) 19 | export class HeroDetail implements OnInit { 20 | public hero: Hero; 21 | private sub: any; 22 | 23 | constructor(private current: ActivatedRoute, public router : Router) { 24 | 25 | } 26 | 27 | ngOnInit() { 28 | this.sub = this.current.params.subscribe(params => { 29 | let id = +params['id']; // (+) converts string 'id' to a number 30 | this.hero = this.getHero(id); 31 | }); 32 | } 33 | 34 | private getHero(_id: number) : Hero { 35 | var hero : Hero; 36 | HEROES.forEach(element => { 37 | if(element.id === _id) { 38 | hero = element; 39 | } 40 | }); 41 | return hero; 42 | } 43 | 44 | public gotoHeroes() { 45 | this.router.navigate(['/heroes']); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/app/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-bs4-navbar", 3 | "version": "0.0.1", 4 | "description": "An Angular2 App with Bootstrap4 Navbar and routing using Angular2's Component Router", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "lite-server", 8 | "typings": "typings install" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/sirajc/angular2-bs4-navbar.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/sirajc/angular2-bs4-navbar/issues" 16 | }, 17 | "homepage": "https://sirajc.github.io/angular2-bs4-navbar", 18 | "keywords": [ 19 | "angular", 20 | "angular2", 21 | "router", 22 | "gulp", 23 | "bootstrap" 24 | ], 25 | "author": "Sirajuddin Choudhary ", 26 | "license": "MIT", 27 | "dependencies": { 28 | "@angular/common": "2.0.0", 29 | "@angular/compiler": "2.0.0", 30 | "@angular/core": "2.0.0", 31 | "@angular/platform-browser": "2.0.0", 32 | "@angular/platform-browser-dynamic": "2.0.0", 33 | "@angular/router": "3.0.0", 34 | 35 | "bootstrap": "^4.0.0-alpha.4", 36 | "core-js": "^2.4.1", 37 | "ie-shim": "^0.1.0", 38 | "reflect-metadata": "^0.1.3", 39 | "rxjs": "5.0.0-beta.12", 40 | "systemjs": "^0.19.27", 41 | "zone.js": "^0.6.23" 42 | }, 43 | "devDependencies": { 44 | "del": "^2.1.0", 45 | "gulp": "^3.9.0", 46 | "gulp-directory-sync": "^1.2.3", 47 | "gulp-imagemin": "^2.4.0", 48 | "gulp-load-plugins": "^1.1.0", 49 | "gulp-newer": "^1.1.0", 50 | "gulp-plumber": "^1.0.1", 51 | "gulp-sass": "^2.1.0", 52 | "gulp-sourcemaps": "^1.6.0", 53 | "gulp-typescript": "^2.13.4", 54 | "gulp-util": "^3.0.7", 55 | "lite-server": "^2.2.2", 56 | "path": "^0.12.7", 57 | "typescript": "^1.8.10", 58 | "typings": "^1.3.2" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | .jumbotron-fluid { 2 | padding:0; 3 | } 4 | header { 5 | margin-top: -15px; 6 | } 7 | img{ 8 | width:100%; 9 | max-width: 100%; 10 | height:auto; 11 | } 12 | .card-img-top{ 13 | width:100%; 14 | height:auto; 15 | } 16 | 17 | #site-title { 18 | max-width:150px; 19 | } 20 | #size-banner{ 21 | height:580px; 22 | padding-top:60px; 23 | } 24 | header .display-2 { 25 | font-size: 350%; 26 | line-height:1; 27 | font-weight:300; 28 | } 29 | .banner-tag-line { 30 | font-size:150%; 31 | line-height:1.4; 32 | font-weight:300; 33 | } 34 | 35 | @media (min-width: 48em) { /* -md- and above */ 36 | #size-banner{ 37 | height:600px; 38 | padding-top:150px; 39 | } 40 | header .display-2 { 41 | font-size: 400%; 42 | } 43 | .banner-tag-line { 44 | font-size:180%; 45 | } 46 | } 47 | .btn-banner { 48 | font-weight: 600; 49 | color: #002157; 50 | border-color: #002157; 51 | margin-right: 10px; 52 | } 53 | 54 | /* ---------------------- PARALLAX --------------------------------------*/ 55 | .parallax { 56 | text-align:center; 57 | background-position:center center; 58 | background-repeat:no-repeat; 59 | background-size:30%; 60 | background-attachment:fixed!important; 61 | overflow:hidden; 62 | } 63 | 64 | .parallax-pattern-overlay { 65 | background-color: rgba(255,255,255,0.5); 66 | } 67 | 68 | /* ----------------------- FOOTER ---------------------------------------*/ 69 | .footer { 70 | background:#363636; 71 | margin-top:-30px; 72 | position:relative; 73 | padding: 0; 74 | } 75 | 76 | /*.footer .container { 77 | padding-top: 10px; 78 | }*/ 79 | 80 | .footer p { 81 | color:#fff; 82 | font-size:.9em; 83 | line-height:24px; 84 | font-weight:300; 85 | text-align:center; 86 | text-transform:uppercase; 87 | margin-top: 30px; 88 | } 89 | -------------------------------------------------------------------------------- /src/system-config.ts: -------------------------------------------------------------------------------- 1 | // SystemJS configuration file, see links for more information 2 | // https://github.com/systemjs/systemjs 3 | // https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 4 | 5 | /*********************************************************************************************** 6 | * User Configuration. 7 | **********************************************************************************************/ 8 | /** Map relative paths to URLs. */ 9 | const map: any = { 10 | '@angular': '../node_modules/@angular', 11 | 'rxjs': '../node_modules/rxjs', 12 | 'main': 'main.js' 13 | }; 14 | 15 | /** User packages configuration. */ 16 | const packages: any = { 17 | }; 18 | 19 | // Angular specific barrels. 20 | var ngBarrels = [ 21 | 'core', 22 | 'common', 23 | 'compiler', 24 | 'platform-browser', 25 | 'platform-browser-dynamic', 26 | 'router' 27 | ]; 28 | 29 | // Add package entries for angular packages 30 | ngBarrels.forEach(function(ngBarrelName) { 31 | // Bundled (~40 requests): 32 | packages['@angular/'+ngBarrelName] = { main: '/bundles/' + ngBarrelName + '.umd.js', defaultExtension: 'js' }; 33 | // Individual files (~300 requests): 34 | //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 35 | }); 36 | 37 | // Use bundle for Rxjs 38 | packages['rxjs'] = { main: '/bundles/Rx.umd.js', defaultExtension: 'js' }; 39 | 40 | const barrels: string[] = [ 41 | // Thirdparty barrels. 42 | 43 | // App specific barrels. 44 | 'app', 45 | 'app/navbar', 46 | 'app/home', 47 | 'app/home/about', 48 | 'app/home/contact', 49 | 'app/hero', 50 | 'app/hero/hero-list', 51 | 'app/hero/hero-list/shared', 52 | 'app/hero/hero-detail' 53 | ]; 54 | 55 | barrels.forEach((barrelName: string) => { 56 | packages[barrelName] = { main: 'index', defaultExtension: 'js' }; 57 | }); 58 | 59 | /** Type declaration for ambient System. */ 60 | declare var System: any; 61 | 62 | // Apply the user's configuration. 63 | System.config({ map, packages }); 64 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Angular2 Bootstrap4 Navbar 2 | An Angular2 App with Bootstrap4 Navbar and routing using Angular2's New New Router v3.rc1. Navbar menu is fully configurable in TS files. 3 | Configuration is shared between Angular and Bootstrap Navbar 4 | 5 | ## Update 6 | Navbar is now responsive. Collapsible menu with Hamburger `☰` icon on Mobile 7 | `AppModule`_(NgModule)_ and all featues are `NgModule` 8 | 9 | [DEMO](http://sirajc.github.io/angular2-bs4-navbar) 10 | 11 | ## Steps to use 12 | 1. Fork and clone this repository 13 | 1. Run `npm install` 14 | 1. Run `npm run typings`, to install all the typing files 15 | 1. Run `gulp` to start watching html, scss and typescript changes and do a first build 16 | 1. On new termial run `npm start` to start lite-server with live reload support 17 | 18 | ## Angular2 Features 19 | 1. Usage of `NgModule` and configure routes using `RouterModule.forRoot([])` 20 | 1. Module specific routes using `RouterModule.forChild([...])` 21 | 1. Code is based on Angular2 RC5 22 | 1. Components and Child Components 23 | 1. App Routing and Child Component Routing 24 | 1. Usage of Router Directives and functions like `routerLink` and `router.navigate` 25 | 1. Usage of Angular directives like `ngClass`, `ngFor`, `ngStyle` 26 | 1. Responsive Navbar 27 | 28 | ## Router and Navbar Configuration 29 | Bootstrap Navbar are configured in `app/navbar/navbar-routes.config.ts` file eg. 30 | ```typescript 31 | export const ROUTES: RouteInfo[] = [ 32 | { path: '', title: 'Angular2 Bootstrap4 Navbar', menuType: MenuType.BRAND }, 33 | { path: 'heroes', title: 'Heroes', menuType: MenuType.LEFT }, 34 | { path: 'about', title: 'About Us', menuType: MenuType.RIGHT }, 35 | { path: 'contact', title: 'Contact', menuType: MenuType.RIGHT } 36 | ]; 37 | ``` 38 | * `path` is used set routerLink in Nav Item of Bootsrap 39 | * `title` is what is shown on Navbar for particular Nav Item 40 | * `menuType` can be `LEFT`, `RIGHT` and `BRAND`, based on this value the Menu Item is placed accordingly on the Navbar 41 | 42 | ## TODO 43 | - [X] Create AppModule and boot using `bootstrapModule` 44 | - [X] Move hero component and children to `NgModule` 45 | - [ ] Add Content in DEMO pages 46 | - [ ] Render Nav based on config similar to `dynamic-menu` 47 | - [X] Menu configuration should be controlled in TS file only 48 | - [ ] Get Menu and Route Configuration from HTTP instead of hardcoding 49 | - [X] Active class for Active Routes 50 | - [ ] Support for Dropdown Menu 51 | - [X] Move to SCSS 52 | - [x] Image Compression 53 | - [ ] Tests 54 | 55 | ## NOTE 56 | 1. App runs on port 8002, configurable in bs-config.json under scripts 57 | 1. lite-server uses browserSync and runs on port 3000, configurable in bs-config.json 58 | 59 | ## Contributing 60 | 61 | Create an issue on this repo if something is broken or if a feature is needed 62 | Feel Free to create a Pull Request if you fixed anything 63 | In case you want to add a feature, create an issue to disscuss the feature first 64 | 65 | ## Copyright and license 66 | 67 | The MIT License 68 | 69 | Copyright (c) 2015-2016 Sirajuddin Choudhary 70 | 71 | Permission is hereby granted, free of charge, to any person obtaining a copy 72 | of this software and associated documentation files (the "Software"), to deal 73 | in the Software without restriction, including without limitation the rights 74 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 75 | copies of the Software, and to permit persons to whom the Software is 76 | furnished to do so, subject to the following conditions: 77 | 78 | The above copyright notice and this permission notice shall be included in 79 | all copies or substantial portions of the Software. 80 | 81 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 82 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 83 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 84 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 85 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 86 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 87 | THE SOFTWARE. 88 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var config = require('./gulp.config')(); 2 | var del = require('del'); 3 | var gulp = require('gulp'); 4 | var path = require('path'); 5 | var $ = require('gulp-load-plugins')({lazy: true}); 6 | 7 | var colors = $.util.colors; 8 | var envenv = $.util.env; 9 | var port = process.env.PORT || config.defaultPort; 10 | 11 | /** 12 | * Copying Css to build 13 | * @return {Stream} 14 | */ 15 | gulp.task('styles', ['clean-styles'], function () { 16 | log('Compiling SCSS to build'); 17 | 18 | return gulp 19 | .src(config.scss) 20 | .pipe($.plumber()) // exit gracefully if something fails after this 21 | .pipe($.sass().on('error', $.sass.logError)) 22 | .pipe(gulp.dest(config.build)); 23 | }); 24 | 25 | gulp.task('scss-watcher', function () { 26 | gulp.watch([config.scss], ['styles']); 27 | }); 28 | 29 | /** 30 | * Copying Html to build 31 | * TODO Add compression and other stuff for PROD 32 | * @return {Stream} 33 | */ 34 | gulp.task('html', ['clean-html'], function () { 35 | log('Copying Html to build'); 36 | 37 | return gulp 38 | .src(config.html) 39 | .pipe($.plumber()) // exit gracefully if something fails after this 40 | .pipe(gulp.dest(config.build)); 41 | }); 42 | 43 | /** 44 | * Copying Html to build 45 | * @return {Stream} 46 | */ 47 | gulp.task('html-dev', function () { 48 | log('Syncing Html to build'); 49 | 50 | return gulp 51 | .src(config.html) 52 | .pipe($.plumber()) // exit gracefully if something fails after this 53 | .pipe($.newer(config.build)) 54 | .pipe(gulp.dest(config.build)); 55 | }); 56 | 57 | gulp.task('html-watcher', function () { 58 | var watcher = gulp.watch([config.html], ['html-dev']); 59 | watcher.on('change', function(ev) { 60 | if(ev.type === 'deleted') { 61 | del(path.relative('./', ev.path).replace(config.src,config.build)); 62 | } 63 | }); 64 | }); 65 | 66 | /** 67 | * Transpile ts files to js 68 | */ 69 | var devProject = $.typescript.createProject(config.src + 'tsconfig.json'); 70 | 71 | gulp.task('tsc', function() { 72 | log('Transpiling typescript files using gulp'); 73 | var tsResult = gulp.src(config.ts) 74 | .pipe($.sourcemaps.init()) 75 | .pipe($.typescript(devProject)); 76 | 77 | return tsResult.js 78 | .pipe($.sourcemaps.write(config.tsMaps)) 79 | .pipe(gulp.dest(config.build)); 80 | }); 81 | 82 | gulp.task('ts-watcher', function () { 83 | gulp.watch([config.ts], ['tsc']); 84 | }); 85 | 86 | /** 87 | * Remove all images from the build folder 88 | * @param {Function} done - callback when complete 89 | */ 90 | gulp.task('clean-images', function (done) { 91 | clean(config.build + 'images/**/*.*', done); 92 | }); 93 | 94 | /** 95 | * Compress images 96 | * @return {Stream} 97 | */ 98 | gulp.task('images-dev', function () { 99 | log('Copying images'); 100 | 101 | return gulp 102 | .src(config.images) 103 | .pipe($.plumber()) 104 | .pipe($.directorySync(config.src + config.imagesRoot , config.build + config.imagesRoot, { printSummary: true})); 105 | }); 106 | 107 | gulp.task('image-watcher', function () { 108 | gulp.watch([config.images], ['images-dev']); 109 | }); 110 | 111 | 112 | /** 113 | * Compress images 114 | * @return {Stream} 115 | */ 116 | gulp.task('images', ['clean-images'], function () { 117 | log('Compressing and copying images'); 118 | 119 | return gulp 120 | .src(config.images) 121 | .pipe($.imagemin({optimizationLevel: 4})) 122 | .pipe(gulp.dest(config.build + 'images')); 123 | }); 124 | 125 | /** 126 | * Build everything 127 | */ 128 | gulp.task('build', ['styles', 'html', 'tsc', 'images-dev'], function () { 129 | log('Building everything'); 130 | 131 | var msg = { 132 | title: 'gulp build', 133 | subtitle: 'Deployed to the build folder', 134 | message: 'Running `gulp build`' 135 | }; 136 | log(msg); 137 | }); 138 | 139 | /** 140 | * Watch for CSS and Html changes 141 | */ 142 | gulp.task('default', ['build', 'scss-watcher', 'html-watcher', 'ts-watcher', 'image-watcher'], function() { 143 | var msg = { 144 | title: 'gulp', 145 | subtitle: 'Watching for HTML, CSS and Typescript changes...' 146 | }; 147 | log(msg); 148 | }); 149 | 150 | /** 151 | * Remove all files from the build, temp, and reports folders 152 | * @param {Function} done - callback when complete 153 | */ 154 | gulp.task('clean', function (done) { 155 | var delconfig = [].concat(config.build + '*'); 156 | clean(delconfig, done); 157 | }); 158 | 159 | /** 160 | * Remove all styles from the build folder 161 | * @param {Function} done - callback when complete 162 | */ 163 | gulp.task('clean-styles', function (done) { 164 | var files = [].concat( 165 | config.build + '**/*.css' 166 | ); 167 | clean(files, done); 168 | }); 169 | 170 | /** 171 | * Remove all html from the build folder 172 | * @param {Function} done - callback when complete 173 | */ 174 | gulp.task('clean-html', function (done) { 175 | var files = [].concat( 176 | config.build + '**/*.html' 177 | ); 178 | clean(files, done); 179 | }); 180 | 181 | /** 182 | * Remove all js and html from the build and temp folders 183 | * @param {Function} done - callback when complete 184 | */ 185 | gulp.task('clean-code', function (done) { 186 | var files = [].concat( 187 | config.build + '**/*.js', 188 | config.build + '**/*.html' 189 | ); 190 | clean(files, done); 191 | }); 192 | 193 | /** 194 | * Delete all files in a given path 195 | * @param {Array} path - array of paths to delete 196 | * @param {Function} done - callback when complete 197 | */ 198 | function clean(path, done) { 199 | log('Cleaning: ' + $.util.colors.blue(path)); 200 | del(path).then(function() { 201 | if(typeof done === 'function') 202 | done(); 203 | }); 204 | } 205 | 206 | /** 207 | * Log a message or series of messages using chalk's blue color. 208 | * Can pass in a string, object or array. 209 | */ 210 | function log(msg) { 211 | if (typeof (msg) === 'object') { 212 | for (var item in msg) { 213 | if (msg.hasOwnProperty(item)) { 214 | $.util.log($.util.colors.blue(msg[item])); 215 | } 216 | } 217 | } else { 218 | $.util.log($.util.colors.blue(msg)); 219 | } 220 | } 221 | 222 | module.exports = gulp; 223 | -------------------------------------------------------------------------------- /typings/browser/ambient/es6-shim/index.d.ts: -------------------------------------------------------------------------------- 1 | // Generated by typings 2 | // Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/es6-shim/es6-shim.d.ts 3 | // Type definitions for es6-shim v0.31.2 4 | // Project: https://github.com/paulmillr/es6-shim 5 | // Definitions by: Ron Buckton 6 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped 7 | 8 | declare type PropertyKey = string | number | symbol; 9 | 10 | interface IteratorResult { 11 | done: boolean; 12 | value?: T; 13 | } 14 | 15 | interface IterableShim { 16 | /** 17 | * Shim for an ES6 iterable. Not intended for direct use by user code. 18 | */ 19 | "_es6-shim iterator_"(): Iterator; 20 | } 21 | 22 | interface Iterator { 23 | next(value?: any): IteratorResult; 24 | return?(value?: any): IteratorResult; 25 | throw?(e?: any): IteratorResult; 26 | } 27 | 28 | interface IterableIteratorShim extends IterableShim, Iterator { 29 | /** 30 | * Shim for an ES6 iterable iterator. Not intended for direct use by user code. 31 | */ 32 | "_es6-shim iterator_"(): IterableIteratorShim; 33 | } 34 | 35 | interface StringConstructor { 36 | /** 37 | * Return the String value whose elements are, in order, the elements in the List elements. 38 | * If length is 0, the empty string is returned. 39 | */ 40 | fromCodePoint(...codePoints: number[]): string; 41 | 42 | /** 43 | * String.raw is intended for use as a tag function of a Tagged Template String. When called 44 | * as such the first argument will be a well formed template call site object and the rest 45 | * parameter will contain the substitution values. 46 | * @param template A well-formed template string call site representation. 47 | * @param substitutions A set of substitution values. 48 | */ 49 | raw(template: TemplateStringsArray, ...substitutions: any[]): string; 50 | } 51 | 52 | interface String { 53 | /** 54 | * Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point 55 | * value of the UTF-16 encoded code point starting at the string element at position pos in 56 | * the String resulting from converting this object to a String. 57 | * If there is no element at that position, the result is undefined. 58 | * If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos. 59 | */ 60 | codePointAt(pos: number): number; 61 | 62 | /** 63 | * Returns true if searchString appears as a substring of the result of converting this 64 | * object to a String, at one or more positions that are 65 | * greater than or equal to position; otherwise, returns false. 66 | * @param searchString search string 67 | * @param position If position is undefined, 0 is assumed, so as to search all of the String. 68 | */ 69 | includes(searchString: string, position?: number): boolean; 70 | 71 | /** 72 | * Returns true if the sequence of elements of searchString converted to a String is the 73 | * same as the corresponding elements of this object (converted to a String) starting at 74 | * endPosition – length(this). Otherwise returns false. 75 | */ 76 | endsWith(searchString: string, endPosition?: number): boolean; 77 | 78 | /** 79 | * Returns a String value that is made from count copies appended together. If count is 0, 80 | * T is the empty String is returned. 81 | * @param count number of copies to append 82 | */ 83 | repeat(count: number): string; 84 | 85 | /** 86 | * Returns true if the sequence of elements of searchString converted to a String is the 87 | * same as the corresponding elements of this object (converted to a String) starting at 88 | * position. Otherwise returns false. 89 | */ 90 | startsWith(searchString: string, position?: number): boolean; 91 | 92 | /** 93 | * Returns an HTML anchor element and sets the name attribute to the text value 94 | * @param name 95 | */ 96 | anchor(name: string): string; 97 | 98 | /** Returns a HTML element */ 99 | big(): string; 100 | 101 | /** Returns a HTML element */ 102 | blink(): string; 103 | 104 | /** Returns a HTML element */ 105 | bold(): string; 106 | 107 | /** Returns a HTML element */ 108 | fixed(): string 109 | 110 | /** Returns a HTML element and sets the color attribute value */ 111 | fontcolor(color: string): string 112 | 113 | /** Returns a HTML element and sets the size attribute value */ 114 | fontsize(size: number): string; 115 | 116 | /** Returns a HTML element and sets the size attribute value */ 117 | fontsize(size: string): string; 118 | 119 | /** Returns an HTML element */ 120 | italics(): string; 121 | 122 | /** Returns an HTML element and sets the href attribute value */ 123 | link(url: string): string; 124 | 125 | /** Returns a HTML element */ 126 | small(): string; 127 | 128 | /** Returns a HTML element */ 129 | strike(): string; 130 | 131 | /** Returns a HTML element */ 132 | sub(): string; 133 | 134 | /** Returns a HTML element */ 135 | sup(): string; 136 | 137 | /** 138 | * Shim for an ES6 iterable. Not intended for direct use by user code. 139 | */ 140 | "_es6-shim iterator_"(): IterableIteratorShim; 141 | } 142 | 143 | interface ArrayConstructor { 144 | /** 145 | * Creates an array from an array-like object. 146 | * @param arrayLike An array-like object to convert to an array. 147 | * @param mapfn A mapping function to call on every element of the array. 148 | * @param thisArg Value of 'this' used to invoke the mapfn. 149 | */ 150 | from(arrayLike: ArrayLike, mapfn: (v: T, k: number) => U, thisArg?: any): Array; 151 | 152 | /** 153 | * Creates an array from an iterable object. 154 | * @param iterable An iterable object to convert to an array. 155 | * @param mapfn A mapping function to call on every element of the array. 156 | * @param thisArg Value of 'this' used to invoke the mapfn. 157 | */ 158 | from(iterable: IterableShim, mapfn: (v: T, k: number) => U, thisArg?: any): Array; 159 | 160 | /** 161 | * Creates an array from an array-like object. 162 | * @param arrayLike An array-like object to convert to an array. 163 | */ 164 | from(arrayLike: ArrayLike): Array; 165 | 166 | /** 167 | * Creates an array from an iterable object. 168 | * @param iterable An iterable object to convert to an array. 169 | */ 170 | from(iterable: IterableShim): Array; 171 | 172 | /** 173 | * Returns a new array from a set of elements. 174 | * @param items A set of elements to include in the new array object. 175 | */ 176 | of(...items: T[]): Array; 177 | } 178 | 179 | interface Array { 180 | /** 181 | * Returns the value of the first element in the array where predicate is true, and undefined 182 | * otherwise. 183 | * @param predicate find calls predicate once for each element of the array, in ascending 184 | * order, until it finds one where predicate returns true. If such an element is found, find 185 | * immediately returns that element value. Otherwise, find returns undefined. 186 | * @param thisArg If provided, it will be used as the this value for each invocation of 187 | * predicate. If it is not provided, undefined is used instead. 188 | */ 189 | find(predicate: (value: T, index: number, obj: Array) => boolean, thisArg?: any): T; 190 | 191 | /** 192 | * Returns the index of the first element in the array where predicate is true, and undefined 193 | * otherwise. 194 | * @param predicate find calls predicate once for each element of the array, in ascending 195 | * order, until it finds one where predicate returns true. If such an element is found, find 196 | * immediately returns that element value. Otherwise, find returns undefined. 197 | * @param thisArg If provided, it will be used as the this value for each invocation of 198 | * predicate. If it is not provided, undefined is used instead. 199 | */ 200 | findIndex(predicate: (value: T) => boolean, thisArg?: any): number; 201 | 202 | /** 203 | * Returns the this object after filling the section identified by start and end with value 204 | * @param value value to fill array section with 205 | * @param start index to start filling the array at. If start is negative, it is treated as 206 | * length+start where length is the length of the array. 207 | * @param end index to stop filling the array at. If end is negative, it is treated as 208 | * length+end. 209 | */ 210 | fill(value: T, start?: number, end?: number): T[]; 211 | 212 | /** 213 | * Returns the this object after copying a section of the array identified by start and end 214 | * to the same array starting at position target 215 | * @param target If target is negative, it is treated as length+target where length is the 216 | * length of the array. 217 | * @param start If start is negative, it is treated as length+start. If end is negative, it 218 | * is treated as length+end. 219 | * @param end If not specified, length of the this object is used as its default value. 220 | */ 221 | copyWithin(target: number, start: number, end?: number): T[]; 222 | 223 | /** 224 | * Returns an array of key, value pairs for every entry in the array 225 | */ 226 | entries(): IterableIteratorShim<[number, T]>; 227 | 228 | /** 229 | * Returns an list of keys in the array 230 | */ 231 | keys(): IterableIteratorShim; 232 | 233 | /** 234 | * Returns an list of values in the array 235 | */ 236 | values(): IterableIteratorShim; 237 | 238 | /** 239 | * Shim for an ES6 iterable. Not intended for direct use by user code. 240 | */ 241 | "_es6-shim iterator_"(): IterableIteratorShim; 242 | } 243 | 244 | interface NumberConstructor { 245 | /** 246 | * The value of Number.EPSILON is the difference between 1 and the smallest value greater than 1 247 | * that is representable as a Number value, which is approximately: 248 | * 2.2204460492503130808472633361816 x 10‍−‍16. 249 | */ 250 | EPSILON: number; 251 | 252 | /** 253 | * Returns true if passed value is finite. 254 | * Unlike the global isFininte, Number.isFinite doesn't forcibly convert the parameter to a 255 | * number. Only finite values of the type number, result in true. 256 | * @param number A numeric value. 257 | */ 258 | isFinite(number: number): boolean; 259 | 260 | /** 261 | * Returns true if the value passed is an integer, false otherwise. 262 | * @param number A numeric value. 263 | */ 264 | isInteger(number: number): boolean; 265 | 266 | /** 267 | * Returns a Boolean value that indicates whether a value is the reserved value NaN (not a 268 | * number). Unlike the global isNaN(), Number.isNaN() doesn't forcefully convert the parameter 269 | * to a number. Only values of the type number, that are also NaN, result in true. 270 | * @param number A numeric value. 271 | */ 272 | isNaN(number: number): boolean; 273 | 274 | /** 275 | * Returns true if the value passed is a safe integer. 276 | * @param number A numeric value. 277 | */ 278 | isSafeInteger(number: number): boolean; 279 | 280 | /** 281 | * The value of the largest integer n such that n and n + 1 are both exactly representable as 282 | * a Number value. 283 | * The value of Number.MIN_SAFE_INTEGER is 9007199254740991 2^53 − 1. 284 | */ 285 | MAX_SAFE_INTEGER: number; 286 | 287 | /** 288 | * The value of the smallest integer n such that n and n − 1 are both exactly representable as 289 | * a Number value. 290 | * The value of Number.MIN_SAFE_INTEGER is −9007199254740991 (−(2^53 − 1)). 291 | */ 292 | MIN_SAFE_INTEGER: number; 293 | 294 | /** 295 | * Converts a string to a floating-point number. 296 | * @param string A string that contains a floating-point number. 297 | */ 298 | parseFloat(string: string): number; 299 | 300 | /** 301 | * Converts A string to an integer. 302 | * @param s A string to convert into a number. 303 | * @param radix A value between 2 and 36 that specifies the base of the number in numString. 304 | * If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. 305 | * All other strings are considered decimal. 306 | */ 307 | parseInt(string: string, radix?: number): number; 308 | } 309 | 310 | interface ObjectConstructor { 311 | /** 312 | * Copy the values of all of the enumerable own properties from one or more source objects to a 313 | * target object. Returns the target object. 314 | * @param target The target object to copy to. 315 | * @param sources One or more source objects to copy properties from. 316 | */ 317 | assign(target: any, ...sources: any[]): any; 318 | 319 | /** 320 | * Returns true if the values are the same value, false otherwise. 321 | * @param value1 The first value. 322 | * @param value2 The second value. 323 | */ 324 | is(value1: any, value2: any): boolean; 325 | 326 | /** 327 | * Sets the prototype of a specified object o to object proto or null. Returns the object o. 328 | * @param o The object to change its prototype. 329 | * @param proto The value of the new prototype or null. 330 | * @remarks Requires `__proto__` support. 331 | */ 332 | setPrototypeOf(o: any, proto: any): any; 333 | } 334 | 335 | interface RegExp { 336 | /** 337 | * Returns a string indicating the flags of the regular expression in question. This field is read-only. 338 | * The characters in this string are sequenced and concatenated in the following order: 339 | * 340 | * - "g" for global 341 | * - "i" for ignoreCase 342 | * - "m" for multiline 343 | * - "u" for unicode 344 | * - "y" for sticky 345 | * 346 | * If no flags are set, the value is the empty string. 347 | */ 348 | flags: string; 349 | } 350 | 351 | interface Math { 352 | /** 353 | * Returns the number of leading zero bits in the 32-bit binary representation of a number. 354 | * @param x A numeric expression. 355 | */ 356 | clz32(x: number): number; 357 | 358 | /** 359 | * Returns the result of 32-bit multiplication of two numbers. 360 | * @param x First number 361 | * @param y Second number 362 | */ 363 | imul(x: number, y: number): number; 364 | 365 | /** 366 | * Returns the sign of the x, indicating whether x is positive, negative or zero. 367 | * @param x The numeric expression to test 368 | */ 369 | sign(x: number): number; 370 | 371 | /** 372 | * Returns the base 10 logarithm of a number. 373 | * @param x A numeric expression. 374 | */ 375 | log10(x: number): number; 376 | 377 | /** 378 | * Returns the base 2 logarithm of a number. 379 | * @param x A numeric expression. 380 | */ 381 | log2(x: number): number; 382 | 383 | /** 384 | * Returns the natural logarithm of 1 + x. 385 | * @param x A numeric expression. 386 | */ 387 | log1p(x: number): number; 388 | 389 | /** 390 | * Returns the result of (e^x - 1) of x (e raised to the power of x, where e is the base of 391 | * the natural logarithms). 392 | * @param x A numeric expression. 393 | */ 394 | expm1(x: number): number; 395 | 396 | /** 397 | * Returns the hyperbolic cosine of a number. 398 | * @param x A numeric expression that contains an angle measured in radians. 399 | */ 400 | cosh(x: number): number; 401 | 402 | /** 403 | * Returns the hyperbolic sine of a number. 404 | * @param x A numeric expression that contains an angle measured in radians. 405 | */ 406 | sinh(x: number): number; 407 | 408 | /** 409 | * Returns the hyperbolic tangent of a number. 410 | * @param x A numeric expression that contains an angle measured in radians. 411 | */ 412 | tanh(x: number): number; 413 | 414 | /** 415 | * Returns the inverse hyperbolic cosine of a number. 416 | * @param x A numeric expression that contains an angle measured in radians. 417 | */ 418 | acosh(x: number): number; 419 | 420 | /** 421 | * Returns the inverse hyperbolic sine of a number. 422 | * @param x A numeric expression that contains an angle measured in radians. 423 | */ 424 | asinh(x: number): number; 425 | 426 | /** 427 | * Returns the inverse hyperbolic tangent of a number. 428 | * @param x A numeric expression that contains an angle measured in radians. 429 | */ 430 | atanh(x: number): number; 431 | 432 | /** 433 | * Returns the square root of the sum of squares of its arguments. 434 | * @param values Values to compute the square root for. 435 | * If no arguments are passed, the result is +0. 436 | * If there is only one argument, the result is the absolute value. 437 | * If any argument is +Infinity or -Infinity, the result is +Infinity. 438 | * If any argument is NaN, the result is NaN. 439 | * If all arguments are either +0 or −0, the result is +0. 440 | */ 441 | hypot(...values: number[]): number; 442 | 443 | /** 444 | * Returns the integral part of the a numeric expression, x, removing any fractional digits. 445 | * If x is already an integer, the result is x. 446 | * @param x A numeric expression. 447 | */ 448 | trunc(x: number): number; 449 | 450 | /** 451 | * Returns the nearest single precision float representation of a number. 452 | * @param x A numeric expression. 453 | */ 454 | fround(x: number): number; 455 | 456 | /** 457 | * Returns an implementation-dependent approximation to the cube root of number. 458 | * @param x A numeric expression. 459 | */ 460 | cbrt(x: number): number; 461 | } 462 | 463 | interface PromiseLike { 464 | /** 465 | * Attaches callbacks for the resolution and/or rejection of the Promise. 466 | * @param onfulfilled The callback to execute when the Promise is resolved. 467 | * @param onrejected The callback to execute when the Promise is rejected. 468 | * @returns A Promise for the completion of which ever callback is executed. 469 | */ 470 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => TResult | PromiseLike): PromiseLike; 471 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => void): PromiseLike; 472 | } 473 | 474 | /** 475 | * Represents the completion of an asynchronous operation 476 | */ 477 | interface Promise { 478 | /** 479 | * Attaches callbacks for the resolution and/or rejection of the Promise. 480 | * @param onfulfilled The callback to execute when the Promise is resolved. 481 | * @param onrejected The callback to execute when the Promise is rejected. 482 | * @returns A Promise for the completion of which ever callback is executed. 483 | */ 484 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => TResult | PromiseLike): Promise; 485 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => void): Promise; 486 | 487 | /** 488 | * Attaches a callback for only the rejection of the Promise. 489 | * @param onrejected The callback to execute when the Promise is rejected. 490 | * @returns A Promise for the completion of the callback. 491 | */ 492 | catch(onrejected?: (reason: any) => T | PromiseLike): Promise; 493 | catch(onrejected?: (reason: any) => void): Promise; 494 | } 495 | 496 | interface PromiseConstructor { 497 | /** 498 | * A reference to the prototype. 499 | */ 500 | prototype: Promise; 501 | 502 | /** 503 | * Creates a new Promise. 504 | * @param executor A callback used to initialize the promise. This callback is passed two arguments: 505 | * a resolve callback used resolve the promise with a value or the result of another promise, 506 | * and a reject callback used to reject the promise with a provided reason or error. 507 | */ 508 | new (executor: (resolve: (value?: T | PromiseLike) => void, reject: (reason?: any) => void) => void): Promise; 509 | 510 | /** 511 | * Creates a Promise that is resolved with an array of results when all of the provided Promises 512 | * resolve, or rejected when any Promise is rejected. 513 | * @param values An array of Promises. 514 | * @returns A new Promise. 515 | */ 516 | all(values: IterableShim>): Promise; 517 | 518 | /** 519 | * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved 520 | * or rejected. 521 | * @param values An array of Promises. 522 | * @returns A new Promise. 523 | */ 524 | race(values: IterableShim>): Promise; 525 | 526 | /** 527 | * Creates a new rejected promise for the provided reason. 528 | * @param reason The reason the promise was rejected. 529 | * @returns A new rejected Promise. 530 | */ 531 | reject(reason: any): Promise; 532 | 533 | /** 534 | * Creates a new rejected promise for the provided reason. 535 | * @param reason The reason the promise was rejected. 536 | * @returns A new rejected Promise. 537 | */ 538 | reject(reason: any): Promise; 539 | 540 | /** 541 | * Creates a new resolved promise for the provided value. 542 | * @param value A promise. 543 | * @returns A promise whose internal state matches the provided promise. 544 | */ 545 | resolve(value: T | PromiseLike): Promise; 546 | 547 | /** 548 | * Creates a new resolved promise . 549 | * @returns A resolved promise. 550 | */ 551 | resolve(): Promise; 552 | } 553 | 554 | declare var Promise: PromiseConstructor; 555 | 556 | interface Map { 557 | clear(): void; 558 | delete(key: K): boolean; 559 | forEach(callbackfn: (value: V, index: K, map: Map) => void, thisArg?: any): void; 560 | get(key: K): V; 561 | has(key: K): boolean; 562 | set(key: K, value?: V): Map; 563 | size: number; 564 | entries(): IterableIteratorShim<[K, V]>; 565 | keys(): IterableIteratorShim; 566 | values(): IterableIteratorShim; 567 | } 568 | 569 | interface MapConstructor { 570 | new (): Map; 571 | new (iterable: IterableShim<[K, V]>): Map; 572 | prototype: Map; 573 | } 574 | 575 | declare var Map: MapConstructor; 576 | 577 | interface Set { 578 | add(value: T): Set; 579 | clear(): void; 580 | delete(value: T): boolean; 581 | forEach(callbackfn: (value: T, index: T, set: Set) => void, thisArg?: any): void; 582 | has(value: T): boolean; 583 | size: number; 584 | entries(): IterableIteratorShim<[T, T]>; 585 | keys(): IterableIteratorShim; 586 | values(): IterableIteratorShim; 587 | } 588 | 589 | interface SetConstructor { 590 | new (): Set; 591 | new (iterable: IterableShim): Set; 592 | prototype: Set; 593 | } 594 | 595 | declare var Set: SetConstructor; 596 | 597 | interface WeakMap { 598 | delete(key: K): boolean; 599 | get(key: K): V; 600 | has(key: K): boolean; 601 | set(key: K, value?: V): WeakMap; 602 | } 603 | 604 | interface WeakMapConstructor { 605 | new (): WeakMap; 606 | new (iterable: IterableShim<[K, V]>): WeakMap; 607 | prototype: WeakMap; 608 | } 609 | 610 | declare var WeakMap: WeakMapConstructor; 611 | 612 | interface WeakSet { 613 | add(value: T): WeakSet; 614 | delete(value: T): boolean; 615 | has(value: T): boolean; 616 | } 617 | 618 | interface WeakSetConstructor { 619 | new (): WeakSet; 620 | new (iterable: IterableShim): WeakSet; 621 | prototype: WeakSet; 622 | } 623 | 624 | declare var WeakSet: WeakSetConstructor; 625 | 626 | declare namespace Reflect { 627 | function apply(target: Function, thisArgument: any, argumentsList: ArrayLike): any; 628 | function construct(target: Function, argumentsList: ArrayLike): any; 629 | function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean; 630 | function deleteProperty(target: any, propertyKey: PropertyKey): boolean; 631 | function enumerate(target: any): IterableIteratorShim; 632 | function get(target: any, propertyKey: PropertyKey, receiver?: any): any; 633 | function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor; 634 | function getPrototypeOf(target: any): any; 635 | function has(target: any, propertyKey: PropertyKey): boolean; 636 | function isExtensible(target: any): boolean; 637 | function ownKeys(target: any): Array; 638 | function preventExtensions(target: any): boolean; 639 | function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean; 640 | function setPrototypeOf(target: any, proto: any): boolean; 641 | } 642 | 643 | declare module "es6-shim" { 644 | var String: StringConstructor; 645 | var Array: ArrayConstructor; 646 | var Number: NumberConstructor; 647 | var Math: Math; 648 | var Object: ObjectConstructor; 649 | var Map: MapConstructor; 650 | var Set: SetConstructor; 651 | var WeakMap: WeakMapConstructor; 652 | var WeakSet: WeakSetConstructor; 653 | var Promise: PromiseConstructor; 654 | namespace Reflect { 655 | function apply(target: Function, thisArgument: any, argumentsList: ArrayLike): any; 656 | function construct(target: Function, argumentsList: ArrayLike): any; 657 | function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean; 658 | function deleteProperty(target: any, propertyKey: PropertyKey): boolean; 659 | function enumerate(target: any): Iterator; 660 | function get(target: any, propertyKey: PropertyKey, receiver?: any): any; 661 | function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor; 662 | function getPrototypeOf(target: any): any; 663 | function has(target: any, propertyKey: PropertyKey): boolean; 664 | function isExtensible(target: any): boolean; 665 | function ownKeys(target: any): Array; 666 | function preventExtensions(target: any): boolean; 667 | function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean; 668 | function setPrototypeOf(target: any, proto: any): boolean; 669 | } 670 | } --------------------------------------------------------------------------------