initial commit

Author: cornflourblue

.gitignore

@@ -0,0 +1,42 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+typings
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Generated files
+app/**/*.js
+app/**/*.js.map

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jason Watmore
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# angular2-animation-tutorial-example
+
+Angular 2 / 4 - Router Animation Example & Tutorial

app/_content/app.less

@@ -0,0 +1,54 @@
+/* GENERAL STYLES AND CLASSES 
+--------------------------------------------------------------------- */
+body {
+    padding: 5px;
+
+    ng-component {
+        display: block;
+    }
+}
+
+/* HEADER STYLES
+--------------------------------------------------------------------- */
+header {
+}
+
+/* MAIN STYLES
+--------------------------------------------------------------------- */
+main {
+    padding: 0 20px;
+    min-height: 300px;
+
+    .products-table {
+        margin-top: 20px;
+        
+        .delete-column {
+            width: 60px;
+        }
+    }
+
+    /* side form */
+    .view-side-form {
+        .side-form {
+            position: absolute;
+            z-index: 100;
+            top: 0;
+            right: 0;
+            width: 80%;
+            height: 100%;
+            overflow: auto;
+            background: #fff;
+            padding: 20px;
+            border-left: 1px solid #e0e0e0;
+        }
+    }
+}
+
+/* FOOTER STYLES
+--------------------------------------------------------------------- */
+footer {
+    text-align: center;
+    margin-top: 20px;
+    padding: 20px;
+    border-top: 1px solid #ddd;
+}

app/_helpers/animations.ts

@@ -0,0 +1,66 @@
+import { trigger, state, animate, transition, style } from '@angular/animations';
+
+export function fadeIn() {
+    return trigger('fadeIn', [
+        // route 'enter' transition
+        transition(':enter', [
+
+            // styles at start of transition
+            style({ opacity: 0 }),
+
+            // animation and styles at end of transition
+            animate('.3s', style({ opacity: 1 }))
+        ]),
+    ]);
+}
+
+export function slideInOut() {
+    return trigger('slideInOut', [
+
+        // end state styles for route container (host)
+        state('*', style({
+            // the view covers the whole screen with a semi tranparent background
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.8)'
+        })),
+
+        // route 'enter' transition
+        transition(':enter', [
+
+            // styles at start of transition
+            style({
+                // start with the content positioned off the right of the screen, 
+                // -400% is required instead of -100% because the negative position adds to the width of the element
+                right: '-400%',
+
+                // start with background opacity set to 0 (invisible)
+                backgroundColor: 'rgba(0, 0, 0, 0)'
+            }),
+
+            // animation and styles at end of transition
+            animate('.5s ease-in-out', style({
+                // transition the right position to 0 which slides the content into view
+                right: 0,
+
+                // transition the background opacity to 0.8 to fade it in
+                backgroundColor: 'rgba(0, 0, 0, 0.8)'
+            }))
+        ]),
+
+        // route 'leave' transition
+        transition(':leave', [
+            // animation and styles at end of transition
+            animate('.5s ease-in-out', style({
+                // transition the right position to -400% which slides the content out of view
+                right: '-400%',
+
+                // transition the background opacity to 0 to fade it out
+                backgroundColor: 'rgba(0, 0, 0, 0)'
+            }))
+        ])
+    ])
+}

app/_services/index.ts

@@ -0,0 +1 @@
+export * from './product.service';

app/_services/product.service.ts

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ProductService {
+    getAll() {
+        return this.getProducts();
+    }
+
+    getById(id: number) {
+        return this.getProducts().filter(product => product.id === id);
+    }
+
+    save(product: any) {
+        let products = this.getProducts();
+
+        if (product.id) {
+            // update existing product
+
+            for (var i = 0; i < products.length; i++) {
+                if (products[i].id === product.id) {
+                    products[i] = product;
+                    break;
+                }
+            }
+            this.setProducts(products);
+        } else {
+            // create new product
+
+            // assign id
+            var lastProduct = products[products.length - 1] || { id: 0 };
+            product.id = lastProduct.id + 1;
+
+            // save to local storage
+            products.push(product);
+            this.setProducts(products);
+        }
+    }
+
+    delete(id: number) {
+        let products = this.getProducts();
+        for (var i = 0; i < products.length; i++) {
+            var product = products[i];
+            if (product.id === id) {
+                products.splice(i, 1);
+                break;
+            }
+        }
+        this.setProducts(products);
+    }
+
+    // private helper methods
+
+    private getProducts(): any[] {
+        if (!localStorage.getItem('products')) {
+            localStorage.setItem('products', JSON.stringify([]));
+        }
+
+        return JSON.parse(localStorage.getItem('products'));
+    }
+
+    private setProducts(products: any[]) {
+        localStorage.setItem('products', JSON.stringify(products));
+    }
+}

app/app-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomeComponent } from './home/index';
+import { ProductListComponent, ProductAddEditComponent } from './products/index';
+
+const routes: Routes = [
+    { path: '', pathMatch: 'full', component: HomeComponent },
+    {
+        path: 'products',
+        component: ProductListComponent,
+        children: [
+            { path: 'add', component: ProductAddEditComponent }
+        ]
+    },
+
+    // otherwise redirect to home
+    { path: '**', redirectTo: '' }
+];
+
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+export const routedComponents = [HomeComponent, ProductListComponent, ProductAddEditComponent];

app/app.component.html

@@ -0,0 +1,18 @@
+<!-- header -->
+<header>
+    <ul class="nav nav-tabs">
+        <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"><a routerLink="/">Home</a></li>
+        <li routerLinkActive="active"><a routerLink="/products">Products</a></li>
+    </ul>
+</header>
+
+<main>
+    <router-outlet></router-outlet>
+</main>
+
+<!-- footer -->
+<footer>
+    <p>
+        <a href="http://jasonwatmore.com">JasonWatmore.com</a>
+    </p>
+</footer>

app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { ProductService } from './_services/index';
+
+@Component({
+    moduleId: module.id.toString(),
+    selector: 'app',
+    templateUrl: 'app.component.html'
+})
+
+export class AppComponent {
+    constructor(private productService: ProductService) {
+        // add some initial products
+        if (productService.getAll().length === 0) {
+            productService.save({ name: 'Boardies', price: '25.00' });
+            productService.save({ name: 'Singlet', price: '9.50' });
+            productService.save({ name: 'Thongs (Flip Flops)', price: '12.95' });
+        }
+    }
+}

app/app.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule, routedComponents } from './app-routing.module';
+import { ProductService } from './_services/index';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        AppRoutingModule,
+        BrowserAnimationsModule
+    ],
+    declarations: [
+        AppComponent,
+        routedComponents
+    ],
+    providers: [
+        ProductService
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }

app/home/home.component.html

@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<p>Angular 2 (version 4) Animation Tutorial & Example</p>

app/home/home.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { fadeIn } from '../_helpers/animations';
+
+@Component({
+    moduleId: module.id.toString(),
+    templateUrl: 'home.component.html',
+    animations: [fadeIn()],
+    host: { '[@fadeIn]': '' }
+})
+
+export class HomeComponent {
+}

app/home/index.ts

@@ -0,0 +1 @@
+export * from './home.component';

app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

app/products/index.ts

@@ -0,0 +1,2 @@
+export * from './product-list.component';
+export * from './product-add-edit.component';