test

src/app/app-routing.module.ts

@@ -5,8 +5,8 @@ import { AuthGuard } from './commons/guard/auth.guard';
 const routes: Routes = [
   { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard]  },
   { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
-  { path: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' },
-  { path: '**', redirectTo: 'error' },
+  // { path: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' },
+  // { path: '**', redirectTo: 'error' },
 ];
 
 @NgModule({

src/app/commons/component/layout/menu/app.menu.component.ts

@@ -24,7 +24,7 @@ export class AppMenuComponent implements OnInit {
                 label: 'Infra', icon: 'all_inclusive', items: [
                     { label: 'Map', icon: 'map', routerLink: ['/map'] },
                     { label: 'Sensors', icon: 'compare_arrows', routerLink: ['/sensors'] },
-                    { label: 'Probes', icon: 'dock', routerLink: ['/probe/list'] },
+                    { label: 'Probes', icon: 'dock', routerLink: ['/probe'] },
                 ]
             },
             {

src/app/pages/pages-animation.ts

@@ -5,19 +5,55 @@ import {
   style,
   query,
   stagger,
-  keyframes
+  keyframes,
+  state,
+  group,
 } from '@angular/animations';
 
-export const fadeAnimation = trigger('fadeAnimation', [
+export const fadeAnimation = trigger('pageRouteAnim', [
   transition('* => *', [
-
-    query(':enter', style({ opacity: 0 }), {optional: true}),
-
-    query(':enter', stagger('300ms', [
-      animate('.6s ease-in', keyframes([
-        style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
-        style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
-        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
-      ]))]), {optional: true})
+    query(':enter',
+      style({ opacity: 0 }), { optional: true }),
+    query(':enter',
+      stagger('300ms', [
+        animate('.6s ease-in', keyframes([
+          style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
+          style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
+          style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
+        ]))]), { optional: true })
   ])
 ]);
+
+export const slideAnimation = trigger('pageRouteAnim', [
+  trigger('slideInOutAnimation', [
+    state('*', style({
+      position: 'fixed',
+      color: 'rgb(3, 109, 99)',
+      textAlign: 'center',
+      paddingTop: '5%',
+      backgroundColor: 'rgba(0, 240, 252, 0.38)',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    })
+    ),
+    transition(':enter', [
+      style({
+        transform: 'translateX(-100%)',
+        backgroundColor: 'rgba(0, 240, 252, 0.38)'
+      }),
+      animate('500ms', style({
+        transform: 'translateX(0%)',
+        backgroundColor: 'rgba(0, 240, 252, 0.38)'
+      }))
+    ]),
+    transition(':leave', [
+      animate('500ms', style({
+        transform: 'translateX(-100%)',
+        backgroundColor: 'rgba(0, 240, 252, 0.38)'
+      }))
+    ])
+  ])
+]);
+

src/app/pages/pages-routing.module.ts

@@ -8,8 +8,8 @@ const routes: Routes = [
     component: PagesComponent,
     children: [
       { path: '', redirectTo: 'home' },
-      { path: 'home', loadChildren: './home/home-page.module#HomePageModule', data: { animation: 'home'} },
-      { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule', data: { animation: 'probe'} },
+      { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
+      { path: 'probe', loadChildren: './probes/probes-page.module#ProbesPageModule' },
       // { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },
       // { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
       // { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },

src/app/pages/pages.component.html

@@ -20,8 +20,8 @@
         <div class="layout-main">
             <of-breadcrumb></of-breadcrumb>
 
-            <div class="layout-content" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
-                <router-outlet #o="outlet"></router-outlet>
+            <div class="layout-content" [@pageRouteAnim]="outlet.isActivated ? outlet.activatedRoute : ''">
+                <router-outlet #outlet="outlet"></router-outlet>
                 <of-footer></of-footer>
             </div>
             

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
 import { ScrollPanel } from 'primeng/primeng';
 import { Router } from '@angular/router';
-import { fadeAnimation } from './pages-animation';
+import { slideAnimation, fadeAnimation } from './pages-animation';
 enum MenuOrientation {
   STATIC,
   OVERLAY,
@@ -13,7 +13,7 @@ enum MenuOrientation {
   selector: 'of-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss'],
-  animations: [ fadeAnimation ]
+  animations: [fadeAnimation]
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   layoutCompact = true;
@@ -327,8 +327,9 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
     layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
   }
 
-  prepRouteState(outlet: any) {
-    return outlet.activatedRouteData['animation'] || 'firstPage';
+  prepareRouteTransition(outlet) {
+    const animation = outlet.activatedRouteData['animation'] || {};
+    return animation['value'] || null;
   }
 
 }

src/app/pages/probe/probe-page-routing.module.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProbePageComponent } from './probe-page.component';
-
-import { ProbeListComponent } from './probe/list.component';
-import { ProbeDetailComponent } from './probe/detail.component';
-
-import { DownloadComponent } from 'packages/probe/component/download/download.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProbePageComponent,
-    children: [
-      { path: 'list', component: ProbeListComponent },
-      { path: 'noauth', loadChildren: './noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' },
-      { path: 'download', loadChildren: './download/download-page.module#ProbeDownloadPageModule' },
-      { path: ':id/info', component: ProbeDetailComponent },
-      // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
-      { path: ':id/history', component: null },
-    ]
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ProbePageRoutingModule { }

src/app/pages/probe/probe/detail.component.html

@@ -1 +0,0 @@
-<of-probe-detail></of-probe-detail>

src/app/pages/probe/probe/detail.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'of-pages-probe-detail',
-  templateUrl: './detail.component.html',
-})
-export class ProbeDetailComponent {
-
-  constructor(
-  ) { }
-
-}

src/app/pages/probe/probe/list.component.html

@@ -1 +0,0 @@
-<of-probe-list (select)="onProbeSelect($event)"></of-probe-list>

src/app/pages/probe/probe/list.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Probe } from '@overflow/commons-typescript/model/probe';
-
-@Component({
-  selector: 'of-pages-probe-list',
-  templateUrl: './list.component.html',
-})
-export class ProbeListComponent {
-
-  constructor(
-    private router: Router,
-  ) { }
-
-  onProbeSelect(probe: Probe) {
-    this.router.navigate(['probe', probe.id, 'info']);
-  }
-}

src/app/pages/probes/probe/probe-page-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProbePageComponent } from './probe-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: null,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProbePageRoutingModule { }

src/app/pages/probes/probe/probe-page.component.html

@@ -0,0 +1 @@
+probe page module

src/app/pages/probes/probe/probe-page.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-probe',
+  templateUrl: './probe-page.component.html',
+})
+export class ProbePageComponent {
+
+  private index;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+}

src/app/pages/probes/probe/probe-page.module.ts

@@ -1,27 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-// import { ProbeModule } from 'packages/probe/probe.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbePageComponent } from './probe-page.component';
 import { ProbePageRoutingModule } from './probe-page-routing.module';
-import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbeModule } from 'packages/probe/probe.module';
-import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
-import { ProbeListComponent } from './probe/list.component';
-import { ProbeDetailComponent } from './probe/detail.component';
 
 @NgModule({
   imports: [
     CommonModule,
     ProbePageRoutingModule,
-    PrimeNGModules,
-    ProbeModule,
-    TabbarModule,
+    ProbeModule
   ],
-  declarations: [
-    ProbePageComponent,
-    ProbeListComponent,
-    ProbeDetailComponent
-  ]
+  entryComponents: [
+  ],
+  declarations: [ProbePageComponent]
 })
 export class ProbePageModule { }

src/app/pages/probes/probes-page-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProbesPageComponent } from './probes-page.component';
+
+import { DownloadComponent } from 'packages/probe/component/download/download.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProbesPageComponent,
+    // children: [
+    //   { path: 'list', loadChildren: './probe/probe-page.module#ProbePageModule' },
+    //   { path: 'noauth', loadChildren: './noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' },
+    //   { path: 'download', loadChildren: './download/download-page.module#ProbeDownloadPageModule' },
+    //   { path: ':id/info', loadChildren: './probe/probe-page.module#ProbePageModule' },
+    //   // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
+    //   { path: ':id/history', component: null },
+    // ]
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProbesPageRoutingModule { }

src/app/pages/probes/probes-page.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProbePageComponent } from './probe-page.component';
+import { ProbesPageComponent } from './probes-page.component';
 
 describe('ProbeComponent', () => {
-  let component: ProbePageComponent;
-  let fixture: ComponentFixture<ProbePageComponent>;
+  let component: ProbesPageComponent;
+  let fixture: ComponentFixture<ProbesPageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProbePageComponent ]
+      declarations: [ ProbesPageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ProbePageComponent);
+    fixture = TestBed.createComponent(ProbesPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/probes/probes-page.component.ts

@@ -3,10 +3,10 @@ import { Router, NavigationEnd } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 
 @Component({
-  selector: 'of-pages-probe',
-  templateUrl: './probe-page.component.html',
+  selector: 'of-pages-probes',
+  templateUrl: './probes-page.component.html',
 })
-export class ProbePageComponent implements OnDestroy {
+export class ProbesPageComponent implements OnDestroy {
 
   private tabs = undefined;
   private routerSubscription$: Subscription;
@@ -27,13 +27,13 @@ export class ProbePageComponent implements OnDestroy {
 
   generateTabMenu(event: NavigationEnd) {
     try {
-      const parsedUrl = event.url.split('probe/')[1].split('/')[0];
+      const parsedUrl = event.url.split('probes/')[1].split('/')[0];
       switch (parsedUrl) {
         case 'list':
         case 'noauth':
         case 'download':
           this.tabs = [
-            { label: 'PROBES', routerLink: ['/probe/list'] },
+            { label: 'Probe', routerLink: ['/probe/list'] },
             { label: 'UNAUTHORIZED', routerLink: ['/probe/noauth'] },
             { label: 'DOWNLOAD', routerLink: ['/probe/download'] },
           ];

src/app/pages/probes/probes-page.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProbesPageComponent } from './probes-page.component';
+import { ProbesPageRoutingModule } from './probes-page-routing.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { ProbeModule } from 'packages/probe/probe.module';
+import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ProbesPageRoutingModule,
+    PrimeNGModules,
+    ProbeModule,
+    TabbarModule,
+  ],
+  declarations: [
+    ProbesPageComponent,
+  ]
+})
+export class ProbesPageModule { }

src/packages/probe/component/index.ts

@@ -1,6 +1,13 @@
 import { DetailComponent } from './detail/detail.component';
 import { ListComponent } from './list/list.component';
 import { DownloadComponent } from './download/download.component';
+import { ProbeListContainerComponent } from '../container/probe-list-container';
+import { ProbeDetailContainerComponent } from '../container/probe-detail-container';
+
+export const CONTAINERS = [
+  ProbeListContainerComponent,
+  ProbeDetailContainerComponent,
+];
 
 export const COMPONENTS = [
   ListComponent,

src/packages/probe/container/probe-detail-container.html

@@ -0,0 +1 @@
+Probe Detail Container

src/packages/probe/container/probe-detail-container.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'of-probe-detail-container',
+  templateUrl: './probe-detail-container.html',
+})
+export class ProbeDetailContainerComponent  {
+
+}

src/packages/probe/container/probe-list-container.html

@@ -0,0 +1 @@
+<of-probe-list (select)="onSelect($event)"></of-probe-list>

src/packages/probe/container/probe-list-container.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+@Component({
+  selector: 'of-probe-list-container',
+  templateUrl: './probe-list-container.html',
+})
+export class ProbeListContainerComponent  {
+    @Output() select = new EventEmitter();
+
+    onSelect(probe: Probe) {
+        this.select.emit(probe);
+    }
+}

src/packages/probe/probe.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { COMPONENTS } from './component';
+import { COMPONENTS, CONTAINERS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
@@ -21,9 +21,11 @@ import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
     MetaCrawlerModule
   ],
   declarations: [
+    CONTAINERS,
     COMPONENTS,
   ],
   exports: [
+    CONTAINERS,
     COMPONENTS,
   ],
   providers: [