Route animation.

Author: gnllucena

.vscode/settings.json

@@ -0,0 +1,7 @@
+install:
+	yarn install
+
+run: 
+	yarn start
+
+deploy:

Makefile

@@ -1,53 +1,22 @@
-# Frontend
+make install
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.1.
+make run
 
-## Development server
+make deploy
 
-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.
+https://itnext.io/angular-animations-stagger-over-static-and-async-data-3907c4889479
+https://itnext.io/angular-animations-stagger-over-static-and-async-data-3907c4889479
+https://netbasal.com/creating-reusable-animations-in-angular-6a2350d6191a
 
-## Code scaffolding
+https://medium.com/@tanya/angular4-animated-route-transitions-b5b9667cd67c
+https://medium.freecodecamp.org/best-practices-for-a-clean-and-performant-angular-application-288e7b39eb6f
+https://tomastrajan.github.io/angular-ngrx-material-starter#/examples/stock-market https://medium.com/@asm/animated-slide-panel-with-angular-e985ad646f9 https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8 https://stackblitz.com/edit/angular-motion-v6-c?file=app%2Fapp.module.ts 
+https://stackblitz.com/edit/angular-child-route-animation?file=src%2Fapp%2Fanimations%2Frouter.animation.ts
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+toast HttpErroHandling Error handling dockerfile makefile
 
-## Build
+aspnetcore-bootstrap users
 
-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.
+ambiente-bootstrap aws kube api-gateway https://aws.amazon.com/pt/blogs/aws-brasil/autenticacao-e-controle-de-sessao-no-api-gateway-com-lambda-e-jwt/
 
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-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).
-
-users page
-    componente de filtro passando emitindo dictionary
-    componente de lista recebendo dictonary
-    componente de adicao
-    componente de alteracao 
-        rota de alteracao direta no registro
-    componente de formulario
-    sessionstorage no http-backend-interceptor 
-toast
-HttpErroHandling
-Error handling
-ui.module igual ao core.module
-dockerfile
-makefile
-
-aspnetcore-bootstrap
-    users
-
-ambiente-bootstrap
-    aws
-    kube
-    api-gateway
-        https://aws.amazon.com/pt/blogs/aws-brasil/autenticacao-e-controle-de-sessao-no-api-gateway-com-lambda-e-jwt/
-        
 ci no github atraves do azure pipelines

README.md

@@ -3,17 +3,21 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "frontend": {
+    "angular-bootstrap": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "targets": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/frontend",
+            "outputPath": "dist/angular-bootstrap",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -23,7 +27,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -50,18 +54,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "frontend:build"
+            "browserTarget": "angular-bootstrap:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "frontend:build:production"
+              "browserTarget": "angular-bootstrap:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "frontend:build"
+            "browserTarget": "angular-bootstrap:build"
           }
         },
         "test": {
@@ -72,7 +76,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": [],
             "assets": [
@@ -95,19 +99,19 @@
         }
       }
     },
-    "frontend-e2e": {
+    "angular-bootstrap-e2e": {
       "root": "e2e/",
       "projectType": "application",
       "targets": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "frontend:serve"
+            "devServerTarget": "angular-bootstrap:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "frontend:serve:production"
+              "devServerTarget": "angular-bootstrap:serve:production"
             }
           }
         },
@@ -123,5 +127,5 @@
       }
     }
   },
-  "defaultProject": "frontend"
+  "defaultProject": "angular-bootstrap"
 }

angular.json

@@ -9,6 +9,6 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to frontend!');
+    expect(page.getParagraphText()).toEqual('Welcome to angular-bootstrap!');
   });
 });

e2e/src/app.e2e-spec.ts

@@ -11,18 +11,20 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.0",
-    "@angular/common": "^6.1.0",
-    "@angular/compiler": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/forms": "^6.1.0",
-    "@angular/http": "^6.1.0",
-    "@angular/platform-browser": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
-    "@angular/router": "^6.1.0",
+    "@angular/animations": "^6.1.8",
+    "@angular/common": "^6.1.8",
+    "@angular/compiler": "^6.1.8",
+    "@angular/core": "^6.1.8",
+    "@angular/forms": "^6.1.8",
+    "@angular/http": "^6.1.8",
+    "@angular/platform-browser": "^6.1.8",
+    "@angular/platform-browser-dynamic": "^6.1.8",
+    "@angular/router": "^6.1.8",
+    "@fortawesome/angular-fontawesome": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
-    "font-awesome": "^4.7.0",
     "rxjs": "~6.2.0",
     "zone.js": "~0.8.26"
   },
@@ -47,4 +49,4 @@
     "tslint": "~5.11.0",
     "typescript": "~2.9.2"
   }
-}
+}

package.json

@@ -1,3 +1,3 @@
-<app-layout>
-  <router-outlet></router-outlet>
+<app-layout [@route-transition]="state(outlet)">
+  <router-outlet #outlet="outlet"></router-outlet>
 </app-layout>

src/app/app.component.html

@@ -0,0 +1,6 @@
+:host {    
+  /deep/ router-outlet ~ * {
+    position: absolute;
+    width: 100%;
+  }
+} 

src/app/app.component.scss

@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
+import { RouterAnimation } from './modules/animations/route.animation';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
+  animations: [ RouterAnimation ],
 })
 export class AppComponent {
   title = 'frontend';
-}
+
+  state(outlet) {
+    return outlet.isActivated ? outlet.activatedRoute : '';
+  }
+}

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 
@@ -16,11 +17,18 @@ import { HomePageComponent } from './routes/home/home-page.component';
 export const appRoutes: Routes = [
   {
     path: 'identity',
-    loadChildren: './routes/identity/identity.module#IdentityModule'
+    loadChildren: './routes/identity/identity.module#IdentityModule',
+    data: { state: 'identity' }
   },
   {
     path: 'dot',
-    loadChildren: './routes/dot/dot.module#DotModule'
+    loadChildren: './routes/dot/dot.module#DotModule',
+    data: { state: 'dot' }
+  },
+  {
+    path: 'users',
+    loadChildren: './routes/users/users.module#UsersModule',
+    data: { state: 'users' }
   },
   { path: '', component: HomePageComponent },
   { path: 'not-found', component: NotFoundComponent },
@@ -34,6 +42,7 @@ export const appRoutes: Routes = [
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     HttpClientModule,
     UIModule,
     CoreModule.forRoot(),

src/app/app.module.ts

@@ -1,4 +1,7 @@
 export class User {
+  Name: String;
   Email: String;
-  Password: String;
+  Document: String;
+  Birthday: Date;
+  Progress: Number;
 }

src/app/domain/User.ts

@@ -0,0 +1,40 @@
+import { trigger,animate, style, query, transition, keyframes } from '@angular/animations';
+
+export const RouterAnimation = trigger('route-transition', [
+  transition( '* => *', [
+    query(':enter', 
+      [
+        style({ opacity: 0 })
+      ], 
+      { optional: true }
+    ),
+    query(':leave', 
+      [
+        style({ opacity: 1 }),
+        animate('0.2s', style({ opacity: 0 }))
+      ], 
+      { optional: true }
+    ),
+    query(':enter', 
+      [
+        style({ opacity: 0 }),
+        animate(
+          '0.2s 0s',
+          keyframes([
+            style({
+              opacity: 0,
+              transform: 'translate3d(0, -5%, 0)',
+              offset: 0
+            }),
+            style({
+              opacity: 1,
+              transform: 'translate3d(0, 0, 0)',
+              offset: 1
+            })
+          ])
+        )
+      ], 
+      { optional: true }
+    )
+  ])
+]);

src/app/app.component.css renamed to src/app/modules/animations/fullscreen.animation.ts

@@ -0,0 +1,11 @@
+import {trigger, animate, style, transition, state} from '@angular/animations';
+
+export const SlidePanelAnimation = trigger('slide-transition', [
+  state('left', style({ 
+    transform: 'translateX(0)' 
+  })),
+  state('right', style({ 
+    transform: 'translateX(-50%)' 
+  })),
+  transition('* => *', animate(300))
+])

src/app/modules/animations/list.animation.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
-import { Jwt } from '../../domain/jwt';
+import { Jwt } from './../../domain/Jwt';
 
 @Injectable()
 export class HttpBackendInterceptor implements HttpInterceptor {

src/app/modules/animations/route.animation.ts

@@ -7,6 +7,7 @@ import { HeaderComponent } from './header.component';
 import { FooterComponent } from './footer.component';
 import { BreadcrumbComponent } from './breadcrumb.component';
 import { NotFoundComponent } from './not-found.component';
+import { SlidePanelComponent } from './slide-panel.component';
 
 @NgModule({
   imports: [
@@ -18,14 +19,16 @@ import { NotFoundComponent } from './not-found.component';
     HeaderComponent, 
     FooterComponent,
     BreadcrumbComponent,
-    NotFoundComponent
+    NotFoundComponent,
+    SlidePanelComponent
   ],
   exports: [
     LayoutComponent,
     HeaderComponent,
     FooterComponent,
     BreadcrumbComponent,
-    NotFoundComponent
+    NotFoundComponent,
+    SlidePanelComponent
   ]
 })
 export class UIModule { }