test(examples): Added Angular and AngularJS examples

examples/angular-cli/README.md

@@ -0,0 +1,10 @@
+# Angular-CLI
+
+Example showing sticky states installed in an Angular-CLI app.
+
+## Running
+
+```
+npm install
+npm start
+```

examples/angular-cli/cypress.json

@@ -0,0 +1,3 @@
+{
+  "videoRecording": false
+}

examples/angular-cli/cypress/integration/example_spec.js

@@ -0,0 +1,54 @@
+describe('example app', () => {
+  it('loads', () => {
+    cy.visit('http://localhost:4000');
+  });
+
+  it('renders links', () => {
+    cy.visit('http://localhost:4000/');
+    cy.get('a').contains('home');
+    cy.get('a').contains('about');
+  });
+
+  it('home state has a textarea', () => {
+    cy.visit('http://localhost:4000');
+    cy.get('ui-view[name=home]')
+      .get('textarea');
+  });
+
+  it('retains text entered into the textarea in home', () => {
+    cy.visit('http://localhost:4000');
+    cy.get('ui-view[name=home]')
+      .get('textarea')
+      .type(' The quick brown fox');
+
+    cy.get('a').contains('about').click();
+    cy.contains('about state loaded');
+
+    cy.get('a').contains('home').click();
+    cy.contains('home state loaded');
+
+    cy.get('ui-view[name=home] textarea')
+      .should('have.value', 'Text entered here is not lost The quick brown fox');
+  });
+
+  it('retains text entered into the textarea in about', () => {
+    cy.visit('http://localhost:4000');
+
+    cy.get('a').contains('about').click();
+    cy.contains('about state loaded');
+
+    cy.get('ui-view[name=about] textarea')
+      .type(' The quack white duck');
+
+    cy.get('a').contains('home').click();
+    cy.contains('home state loaded');
+
+    cy.get('a').contains('about').click();
+    cy.contains('about state loaded');
+
+    cy.get('ui-view[name=about] textarea')
+      .should('have.value', 'Text entered here is not lost The quack white duck');
+  });
+
+
+});

examples/angular-cli/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "angular-cli",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod --sm",
+    "test": "npm run build && cypress-runner run --path dist",
+    "test:open": "npm run build && cypress-runner open --path dist",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.0.0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
+    "@uirouter/angular": "^1.0.0-rc.3",
+    "@uirouter/dsr": "^1.0.2",
+    "@uirouter/visualizer": "^6.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.7.3",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~9.6.1",
+    "@uirouter/cypress-runner": "^1.0.2",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~3.1.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^1.0.0",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "~2.4.2"
+  }
+}

examples/angular-cli/src/app/about.component.ts

@@ -0,0 +1,21 @@
+import { Input, Component } from '@angular/core';
+
+@Component({
+  selector: 'generic-cmp',
+  template: `
+    <h1>This is a trivial Deep State Redirect example app</h1>
+    <ol>
+      <li> Active the <a uiSref="continentlist">continentlist</a> state</li>
+      <li> Select a continent </li>
+      <li> Select a country </li>
+      <li> Reactivate this state (<a uiSref="about">about</a>)</li>
+      <li>
+        Active the <a uiSref="continents">continents</a> state again.<br>
+        You are redirected to the previously active substate of <code>continentlist</code> (including parameters).<br>
+        You should see the country you chose in the previous step.
+      </li>
+    </ol>
+  `,
+})
+export class AboutComponent {
+}

examples/angular-cli/src/app/app.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { StateService } from '@uirouter/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <a uiSref="about" uiSrefActive="active">about</a>
+    <a uiSref="continentlist" uiSrefActive="active">continentlist</a>
+
+    <ui-view></ui-view>
+  `,
+  styles: [`
+    .active { font-weight: bold }
+  `]
+})
+export class AppComponent {
+  constructor(public $state: StateService) {
+
+  }
+  isActive(stateName: string) {
+    return this.$state.includes(stateName)
+  }
+}

examples/angular-cli/src/app/app.module.ts

@@ -0,0 +1,83 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { UIRouterModule } from '@uirouter/angular';
+import { UIRouter } from '@uirouter/core';
+import { DSRPlugin } from '@uirouter/dsr';
+import { Visualizer } from '@uirouter/visualizer';
+
+import { AppComponent } from './app.component';
+import { CountryDetailComponent } from './countryDetail.component';
+import { CountryListComponent } from './countryList.component';
+import { getContinents, getCountries } from './data.api';
+import { ContinentListComponent } from './continentList.component';
+import { AboutComponent } from './about.component';
+
+export const states = [
+  {
+    name: 'continentlist',
+    url: '/continents',
+    dsr: true,
+    component: ContinentListComponent,
+    resolve: {
+      'continents': () => getContinents() },
+  },
+
+  {
+    name: 'continentlist.countrylist',
+    url: '/:continent',
+    component: CountryListComponent,
+    resolve: {
+      'countries': ($transition$) => getCountries($transition$.params().continent)
+    },
+  },
+
+  {
+    name: 'continentlist.countrylist.countrydetail',
+    url: '/:country',
+    component: CountryDetailComponent,
+    resolve: {
+      'country': ($transition$) => $transition$.params().country
+    },
+  },
+
+  {
+    name: 'about',
+    url: '/about',
+    component: AboutComponent,
+  }
+];
+
+export function configFn(router: UIRouter) {
+  states.forEach(state => router.stateRegistry.register(state));
+  router.urlService.rules.initial({ state: 'home' });
+  router.plugin(DSRPlugin);
+  router.plugin(Visualizer);
+}
+
+@NgModule({
+  declarations: [
+    AboutComponent,
+    AppComponent,
+    ContinentListComponent,
+    CountryDetailComponent,
+    CountryListComponent,
+  ],
+  entryComponents: [
+    AboutComponent,
+    AppComponent,
+    ContinentListComponent,
+    CountryDetailComponent,
+    CountryListComponent,
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    UIRouterModule.forRoot({
+      config: configFn,
+    })
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

examples/angular-cli/src/app/continentList.component.ts

@@ -0,0 +1,17 @@
+import { Input, Component } from '@angular/core';
+
+@Component({
+  selector: 'continent-list-cmp',
+  template: `
+    <h3>Continents</h3>
+
+    <span *ngFor="let continent of continents" style="margin: 1em" uiSrefActive="active">
+      <a uiSref=".countrylist" [uiParams]="{ continent: continent }">{{ continent }}</a>
+    </span>
+
+    <ui-view></ui-view>
+  `,
+})
+export class ContinentListComponent {
+  @Input() continents: string[];
+}

examples/angular-cli/src/app/countryDetail.component.ts

@@ -0,0 +1,21 @@
+import { Input, Component } from '@angular/core';
+
+@Component({
+  selector: 'country-detail-cmp',
+  template: `
+    <h3>{{ country }}</h3>
+    <div style="height: 100px;">
+      <img [src]="imageSrc()" [alt]="'flag of ' + country">
+    </div>
+  `,
+})
+export class CountryDetailComponent {
+    @Input() country: string;
+
+    imageSrc() {
+      if (!this.country) { return ''; }
+      const prefix = 'http://www.randomlists.com/img/national-flags/';
+      const imageName = this.country.toLowerCase().replace(/ /g, '_');
+      return `${prefix}${imageName}.gif`;
+    }
+}

examples/angular-cli/src/app/countryList.component.ts

@@ -0,0 +1,37 @@
+import { Input, Component } from '@angular/core';
+
+@Component({
+  selector: 'country-list-cmp',
+  template: `
+    <ui-view></ui-view>
+
+    <div class="container">
+      <a *ngFor="let country of countries"
+         uiSref=".countrydetail"
+         [uiParams]="{ country: country }"
+         uiSrefActive="active"
+      >
+        {{ country }}
+      </a>
+    </div>
+
+  `,
+  styles: [`
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+    }
+    .container > * {
+      border: 1px solid;
+      padding: 0.5em;
+      margin: 0.5em;
+      flex: 1 1 75px;
+    }
+    .container > a.active {
+      background: lightgray;
+    }
+  `]
+})
+export class CountryListComponent {
+  @Input() countries: string[];
+}

examples/angular-cli/src/app/data.api.ts

@@ -0,0 +1,13 @@
+function getContinents(): Promise<string[]> {
+  return Promise.resolve(require('./data.json'))
+    .then(countries => countries.map(country => country.continent))
+    .then(continents => continents.reduce((acc, continent) => acc.includes(continent) ? acc : acc.concat(continent), []))
+}
+
+function getCountries(continent: string): Promise<string[]> {
+  return Promise.resolve(require('./data.json'))
+    .then(countries => countries.filter(country => country.continent === continent))
+    .then(countries => countries.map(country => country.name));
+}
+
+export { getContinents, getCountries };