View profile-after.component.ts
import { OnInit, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IProfileData } from './profile.model';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {
View profile.resolver.ts
import { Store } from '@ngrx/store';
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { IAppState } from './app.state';
import * as profileActions from './profile/profile.actions'
import { IProfileData } from './profile/profile.model';
import { ApiService } from './api.service';
View ngrx-resolver-after.routes.ts
import { Routes } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import { ProfileResolver } from './profile.resolver';
export const routes: Routes = [
{
path: 'profile',
component: ProfileComponent,
resolve: { profileData: ProfileResolver }
}
View app.module.ts
import { StoreModule } from '@ngrx/store';
import { storeReducers } from './app.state';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes),
StoreModule.forRoot(storeReducers),
AppModule
],
View app.state.ts
import { ActionReducerMap } from '@ngrx/store';
import * as fromProfile from '../..../profile/profile.reducer';
// Our top level state interface is just a map of keys to inner state types.
export interface IAppState {
profileData: fromProfile.IProfileState;
}
const reducers = {
View profile.actions.ts
import { Action } from '@ngrx/store';
export interface IProfileActions {
PROFILE_DATA_UPDATED: string;
}
export const ActionTypes: IProfileActions = {
PROFILE_DATA_UPDATED: 'Profile Data Updated',
};
View profile.reducer.ts
import { Store } from '@ngrx/store';
import * as actions from './profile.actions';
export interface IProfileState {
// define interface for data you expect to get from server
// or just set type to any
profileData: IProfileData;
}
export const initialState: IProfileState = {
View profile.component.ts
import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';
import { ApiService } from '../../shared/api.service';
@Component()
export class ProfileComponent implements OnInit, OnDestroy {
public profileData$: Subscription;
public data;
View ngrx-resolver.routes.ts
import { Routes } from '@angular/router';
import { ProfileComponent } from './profile-list';
export const routes: Routes = [
{ path: 'profile', component: ProfileComponent }
];
View cypress-spec.js
describe('My First Test', function() {
it("clicking 'root' shows the right headings", function() {
cy.visit('https://example.cypress.io')
cy.contains('root').click()
// Should be on a new URL which includes '/commands/querying'
cy.url().should('include', '/commands/querying')
// Should find the main header "Querying"