npm run start:hmr
this.localState = {{ localState | json }}
`
})
export class AboutComponent implements OnInit {
public localState: any;
constructor(
public route: ActivatedRoute
) {}
public ngOnInit() {
this.route
.data
.subscribe((data: any) => {
/**
* Your resolved data from route.
*/
this.localState = data.yourData;
});
console.log('hello `About` component');
/**
* static data that is bundled
* var mockData = require('assets/mock-data/mock-data.json');
* console.log('mockData', mockData);
* if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
*/
this.asyncDataWithWebpack();
}
private asyncDataWithWebpack() {
/**
* you can also async load mock data with 'es6-promise-loader'
* you would do this if you don't want the mock-data bundled
* remember that 'es6-promise-loader' is a promise
*/
setTimeout(() => {
import('../../assets/mock-data/mock-data.json')
.then((json) => {
console.log('async mockData', json);
this.localState = json;
});
});
}
}
================================================
FILE: src/app/about/index.ts
================================================
export * from './about.component';
================================================
FILE: src/app/app.component.css
================================================
html, body{
height: 100%;
font-family: Arial, Helvetica, sans-serif
}
a.active {
background-color: gray;
}
================================================
FILE: src/app/app.component.spec.ts
================================================
import { NO_ERRORS_SCHEMA } from '@angular/core';
import {
inject,
async,
TestBed,
ComponentFixture
} from '@angular/core/testing';
/**
* Load the implementations that should be tested
*/
import { AppComponent } from './app.component';
import { AppState } from './app.service';
describe(`App`, () => {
let comp: AppComponent;
let fixture: ComponentFixturethis.appState.state = {{ appState.state | json }}
`
})
export class AppComponent implements OnInit {
public name = 'Angular Starter';
public tipe = 'assets/img/tipe.png';
public twitter = 'https://twitter.com/gdi2290';
public url = 'https://tipe.io';
public showDevModule: boolean = environment.showDevModule;
constructor(
public appState: AppState
) {}
public ngOnInit() {
console.log('Initial App State', this.appState.state);
}
}
/**
* Please review the https://github.com/AngularClass/angular-examples/ repo for
* more angular app examples that you may copy/paste
* (The examples may not be updated as quickly. Please open an issue on github for us to update it)
* For help or questions please contact us at @AngularClass on twitter
* or our chat on Slack at https://AngularClass.com/slack-join
*/
================================================
FILE: src/app/app.e2e.ts
================================================
import { browser, by, element } from 'protractor';
import 'tslib';
describe('App', () => {
beforeEach(async () => {
await browser.get('/');
});
it('should have a title', async () => {
const subject = await browser.getTitle();
const result = 'Angular Starter by @gdi2290 from @TipeIO';
expect(subject).toEqual(result);
});
it('should have header', async () => {
const subject = await element(by.css('h1')).isPresent();
const result = true;
expect(subject).toEqual(result);
});
it('should have npm run start:hmr
this.localState = {{ localState | json }}