├── .editorconfig
├── .gitignore
├── README.md
├── angular-cli.json
├── e2e
├── app.e2e-spec.ts
├── app.po.ts
└── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── page
│ │ ├── page.component.css
│ │ ├── page.component.html
│ │ ├── page.component.spec.ts
│ │ └── page.component.ts
│ └── shared
│ │ ├── directives
│ │ ├── fullpage.directive.spec.ts
│ │ └── fullpage.directive.ts
│ │ └── services
│ │ └── content.service.ts
├── assets
│ ├── bg00.jpg
│ ├── bg01.jpg
│ └── bg02.jpg
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json
└── tslint.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 |
10 | # IDEs and editors
11 | /.idea
12 | .project
13 | .classpath
14 | .c9/
15 | *.launch
16 | .settings/
17 |
18 | # IDE - VSCode
19 | .vscode/*
20 | !.vscode/settings.json
21 | !.vscode/tasks.json
22 | !.vscode/launch.json
23 | !.vscode/extensions.json
24 |
25 | # misc
26 | /.sass-cache
27 | /connect.lock
28 | /coverage/*
29 | /libpeerconnection.log
30 | npm-debug.log
31 | testem.log
32 | /typings
33 |
34 | # e2e
35 | /e2e/*.js
36 | /e2e/*.map
37 |
38 | #System Files
39 | .DS_Store
40 | Thumbs.db
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularAnimationsSite
2 |
3 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.24.
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/module`.
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 |
--------------------------------------------------------------------------------
/angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "project": {
3 | "version": "1.0.0-beta.24",
4 | "name": "angular-animations-site"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "test": "test.ts",
17 | "tsconfig": "tsconfig.json",
18 | "prefix": "app",
19 | "mobile": false,
20 | "styles": [
21 | "styles.css"
22 | ],
23 | "scripts": [],
24 | "environmentSource": "environments/environment.ts",
25 | "environments": {
26 | "dev": "environments/environment.ts",
27 | "prod": "environments/environment.prod.ts"
28 | }
29 | }
30 | ],
31 | "addons": [],
32 | "packages": [],
33 | "e2e": {
34 | "protractor": {
35 | "config": "./protractor.conf.js"
36 | }
37 | },
38 | "test": {
39 | "karma": {
40 | "config": "./karma.conf.js"
41 | }
42 | },
43 | "defaults": {
44 | "styleExt": "css",
45 | "prefixInterfaces": false,
46 | "inline": {
47 | "style": false,
48 | "template": false
49 | },
50 | "spec": {
51 | "class": false,
52 | "component": true,
53 | "directive": true,
54 | "module": false,
55 | "pipe": true,
56 | "service": true
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularAnimationsSitePage } from './app.po';
2 |
3 | describe('angular-animations-site App', function() {
4 | let page: AngularAnimationsSitePage;
5 |
6 | beforeEach(() => {
7 | page = new AngularAnimationsSitePage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class AngularAnimationsSitePage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | mime: {
21 | 'text/x-typescript': ['ts','tsx']
22 | },
23 | remapIstanbulReporter: {
24 | reports: {
25 | html: 'coverage',
26 | lcovonly: './coverage/coverage.lcov'
27 | }
28 | },
29 | angularCli: {
30 | config: './angular-cli.json',
31 | environment: 'dev'
32 | },
33 | reporters: config.angularCli && config.angularCli.codeCoverage
34 | ? ['progress', 'karma-remap-istanbul']
35 | : ['progress'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false
42 | });
43 | };
44 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-animations-site",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "angular-cli": {},
6 | "scripts": {
7 | "ng": "ng",
8 | "start": "ng serve",
9 | "lint": "tslint \"src/**/*.ts\"",
10 | "test": "ng test",
11 | "pree2e": "webdriver-manager update --standalone false --gecko false",
12 | "e2e": "protractor"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/animations": "4.0.2",
17 | "@angular/common": "4.0.2",
18 | "@angular/compiler": "4.0.2",
19 | "@angular/core": "4.0.2",
20 | "@angular/forms": "4.0.2",
21 | "@angular/http": "4.0.2",
22 | "@angular/material": "2.0.0-beta.3",
23 | "@angular/platform-browser": "4.0.2",
24 | "@angular/platform-browser-dynamic": "4.0.2",
25 | "@angular/router": "^4.0.2",
26 | "core-js": "^2.4.1",
27 | "rxjs": "^5.0.1",
28 | "ts-helpers": "^1.1.1",
29 | "zone.js": "0.8.7"
30 | },
31 | "devDependencies": {
32 | "@angular/cli": "^1.0.1",
33 | "@angular/compiler-cli": "4.0.2",
34 | "@types/jasmine": "2.5.47",
35 | "@types/node": "^7.0.12",
36 | "codelyzer": "2.1.1",
37 | "jasmine-core": "2.5.2",
38 | "jasmine-spec-reporter": "3.3.0",
39 | "karma": "1.6.0",
40 | "karma-chrome-launcher": "^2.0.0",
41 | "karma-cli": "^1.0.1",
42 | "karma-jasmine": "^1.0.2",
43 | "karma-remap-istanbul": "^0.6.0",
44 | "protractor": "~5.1.1",
45 | "ts-node": "3.0.2",
46 | "tslint": "4.5.1",
47 | "typescript": "~2.2.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
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 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | import { PageComponent } from './page/page.component';
5 |
6 | const appRoutes: Routes = [
7 | {path: '', redirectTo: '/home', pathMatch: 'full'},
8 | {path: 'home', component: PageComponent, data: {
9 | page: 'home'
10 | }},
11 | {path: 'about', component: PageComponent, data: {
12 | page: 'about'
13 | }},
14 | {path: 'contact', component: PageComponent, data: {
15 | page: 'contact'
16 | }},
17 | {path: '**', redirectTo: '/home', pathMatch: 'full'}
18 | ];
19 |
20 | @NgModule({
21 | imports: [RouterModule.forRoot(appRoutes)],
22 | exports: [RouterModule]
23 | })
24 | export class AppRoutingModule {
25 | }
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | md-toolbar {
2 | position: relative;
3 | z-index: 1;
4 | overflow-x: auto;
5 | }
6 |
7 | md-toolbar-row {
8 | justify-content:space-between;
9 | }
10 |
11 | .spacer {
12 | flex: 1 1 auto;
13 | }
14 |
15 | a.active {
16 | background-color: rgba(0,0,0, 0.3);
17 | }
18 |
19 | h1 {
20 | margin: 0;
21 | }
22 |
23 | h1 .light {
24 | font-weight: 100;
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | SUPERLOGO
3 |
4 | HOME
5 | ABOUT
6 | CONTACT
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/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('AppComponent', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('should create the app', async(() => {
17 | let fixture = TestBed.createComponent(AppComponent);
18 | let app = fixture.debugElement.componentInstance;
19 | expect(app).toBeTruthy();
20 | }));
21 |
22 | it(`should have as title 'app works!'`, async(() => {
23 | let fixture = TestBed.createComponent(AppComponent);
24 | let app = fixture.debugElement.componentInstance;
25 | expect(app.title).toEqual('app works!');
26 | }));
27 |
28 | it('should render title in a h1 tag', async(() => {
29 | let fixture = TestBed.createComponent(AppComponent);
30 | fixture.detectChanges();
31 | let compiled = fixture.debugElement.nativeElement;
32 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
33 | }));
34 | });
35 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 { MdButtonModule, MdCardModule, MdToolbarModule } from '@angular/material';
7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
8 |
9 | import { AppComponent } from './app.component';
10 | import { FullpageDirective } from './shared/directives/fullpage.directive';
11 | import { PageComponent } from './page/page.component';
12 | import { AppRoutingModule } from './app-routing.module';
13 | import { ContentService } from './shared/services/content.service';
14 |
15 | @NgModule({
16 | declarations: [
17 | AppComponent,
18 | FullpageDirective,
19 | PageComponent
20 | ],
21 | imports: [
22 | BrowserModule,
23 | FormsModule,
24 | HttpModule,
25 | AppRoutingModule,
26 | BrowserAnimationsModule,
27 | MdToolbarModule,
28 | MdButtonModule,
29 | MdCardModule
30 | ],
31 | providers: [ContentService],
32 | bootstrap: [AppComponent]
33 | })
34 | export class AppModule {
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/page/page.component.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | height: 100%;
4 | align-items: center;
5 | }
6 |
7 | md-card {
8 | width:500px;
9 | background: rgba(255,255,255,0.9);
10 | }
11 |
12 | md-card-header {
13 | color: #3f51b5;
14 | }
15 |
16 | md-card-content {
17 | padding: 8px;
18 | }
19 |
20 | .fullBg {
21 | z-index:0;
22 | position: fixed;
23 | top: 0;
24 | left: 0;
25 | }
--------------------------------------------------------------------------------
/src/app/page/page.component.html:
--------------------------------------------------------------------------------
1 | ![]()
2 |
3 |
4 |
5 | {{page.title}}
6 | {{page.subtitle}}
7 |
8 |
9 | {{page.content}}
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/page/page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PageComponent } from './page.component';
4 |
5 | describe('PageComponent', () => {
6 | let component: PageComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ PageComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PageComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/page/page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { ContentService } from '../shared/services/content.service';
4 |
5 | @Component({
6 | selector: 'app-page',
7 | templateUrl: './page.component.html',
8 | styleUrls: ['./page.component.css']
9 | })
10 | export class PageComponent implements OnInit {
11 | page: Object;
12 |
13 | constructor(private route: ActivatedRoute,
14 | private contentService: ContentService) { }
15 |
16 | ngOnInit() {
17 | const pageData = this.route.snapshot.data['page'];
18 | this.page = this.contentService.pages[pageData];
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/shared/directives/fullpage.directive.spec.ts:
--------------------------------------------------------------------------------
1 | import { FullpageDirective } from './fullpage.directive';
2 |
3 | const elementRefMock = {
4 | nativeElement: {}
5 | }
6 |
7 | describe('FullpageDirective', () => {
8 | it('should create an instance', () => {
9 | const directive = new FullpageDirective(elementRefMock);
10 | expect(directive).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/app/shared/directives/fullpage.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, HostListener } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[fullpage]'
5 | })
6 | export class FullpageDirective {
7 |
8 | constructor(private element: ElementRef) { }
9 |
10 | @HostListener('window:resize', ['$event'])
11 | onResize(event) {
12 | this.resize();
13 | }
14 |
15 | @HostListener('load', ['$event'])
16 | onLoad(event) {
17 | this.resize();
18 | }
19 |
20 | resize() {
21 | let bgwidth = this.element.nativeElement.width;
22 | let bgheight = this.element.nativeElement.height;
23 |
24 | let winwidth = window.innerWidth;
25 | let winheight = window.innerHeight;
26 |
27 | let widthratio = winwidth / bgwidth;
28 | let heightratio = winheight / bgheight;
29 |
30 | let widthdiff = heightratio * bgwidth;
31 | let heightdiff = widthratio * bgheight;
32 |
33 | if (heightdiff > winheight) {
34 | this.element.nativeElement.width = winwidth;
35 | this.element.nativeElement.height = heightdiff;
36 | } else {
37 | this.element.nativeElement.width = widthdiff;
38 | this.element.nativeElement.height = winheight;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/shared/services/content.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable()
4 | export class ContentService {
5 | pages: Object = {
6 | 'home': {title: 'Home', subtitle: 'Welcome Home!', content: 'Some home content.', image: 'assets/bg00.jpg'},
7 | 'about': {title: 'About', subtitle: 'About Us', content: 'Some content about us.', image: 'assets/bg01.jpg'},
8 | 'contact': {title: 'Contact', subtitle: 'Contact Us', content: 'How to contact us.', image: 'assets/bg02.jpg'}
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/src/assets/bg00.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onehungrymind/angular-animations-site/50a54d9f822c92de20dbd65f01f039df07b5f15f/src/assets/bg00.jpg
--------------------------------------------------------------------------------
/src/assets/bg01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onehungrymind/angular-animations-site/50a54d9f822c92de20dbd65f01f039df07b5f15f/src/assets/bg01.jpg
--------------------------------------------------------------------------------
/src/assets/bg02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onehungrymind/angular-animations-site/50a54d9f822c92de20dbd65f01f039df07b5f15f/src/assets/bg02.jpg
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/onehungrymind/angular-animations-site/50a54d9f822c92de20dbd65f01f039df07b5f15f/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Animations Site
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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/app.module';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic().bootstrapModule(AppModule);
13 |
--------------------------------------------------------------------------------
/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/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import '~@angular/material/prebuilt-themes/indigo-pink.css';
3 |
4 | html, body, app-root {
5 | width: 100%;
6 | height: 100%;
7 | display: flex;
8 | flex-direction: column;
9 | }
10 | body {
11 | overflow: hidden;
12 | margin:0;
13 | }
--------------------------------------------------------------------------------
/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 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare var __karma__: any;
17 | declare var require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | let context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "",
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": ["es6", "dom"],
8 | "mapRoot": "./",
9 | "module": "es6",
10 | "moduleResolution": "node",
11 | "outDir": "../dist/out-tsc",
12 | "sourceMap": true,
13 | "target": "es5",
14 | "typeRoots": [
15 | "../node_modules/@types"
16 | ]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/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 | "max-line-length": [
20 | true,
21 | 140
22 | ],
23 | "member-access": false,
24 | "member-ordering": [
25 | true,
26 | "static-before-instance",
27 | "variables-before-functions"
28 | ],
29 | "no-arg": true,
30 | "no-bitwise": true,
31 | "no-console": [
32 | true,
33 | "debug",
34 | "info",
35 | "time",
36 | "timeEnd",
37 | "trace"
38 | ],
39 | "no-construct": true,
40 | "no-debugger": true,
41 | "no-duplicate-variable": true,
42 | "no-empty": false,
43 | "no-eval": true,
44 | "no-inferrable-types": true,
45 | "no-shadowed-variable": true,
46 | "no-string-literal": false,
47 | "no-switch-case-fall-through": true,
48 | "no-trailing-whitespace": false,
49 | "no-unused-expression": true,
50 | "no-use-before-declare": true,
51 | "no-var-keyword": true,
52 | "object-literal-sort-keys": false,
53 | "one-line": [
54 | true,
55 | "check-open-brace",
56 | "check-catch",
57 | "check-else",
58 | "check-whitespace"
59 | ],
60 | "quotemark": [
61 | true,
62 | "single"
63 | ],
64 | "radix": true,
65 | "semicolon": [
66 | "always"
67 | ],
68 | "triple-equals": [
69 | true,
70 | "allow-null-check"
71 | ],
72 | "typedef-whitespace": [
73 | true,
74 | {
75 | "call-signature": "nospace",
76 | "index-signature": "nospace",
77 | "parameter": "nospace",
78 | "property-declaration": "nospace",
79 | "variable-declaration": "nospace"
80 | }
81 | ],
82 | "variable-name": false,
83 | "whitespace": [
84 | true,
85 | "check-branch",
86 | "check-decl",
87 | "check-operator",
88 | "check-separator",
89 | "check-type"
90 | ],
91 |
92 | "directive-selector": [true, "attribute", "app", "camelCase"],
93 | "component-selector": [true, "element", "app", "kebab-case"],
94 | "use-input-property-decorator": true,
95 | "use-output-property-decorator": true,
96 | "use-host-property-decorator": true,
97 | "no-input-rename": true,
98 | "no-output-rename": true,
99 | "use-life-cycle-interface": true,
100 | "use-pipe-transform-interface": true,
101 | "component-class-suffix": true,
102 | "directive-class-suffix": true,
103 | "no-access-missing-member": true,
104 | "templates-use-public": true,
105 | "invoke-injectable": true
106 | }
107 | }
108 |
--------------------------------------------------------------------------------