Aurelia TypeScript Samples

code-sandbox

Code Sandbox has code that Illustrates:

Steps to get running:

  1. View running project
  2. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

    TypeScript 1.5 is included in this install.

  3. Run Visual Studio 2015
  4. Open solution in skel-nav-esri-vs-ts
  5. Run solution using chrome, firefox, or IE (some features work only in chrome)

Some background on the sample:

For this sample, we'll choose to use an existing AMD bundle of the Aurelia libraries and the RequireJS loader.

Lets dive in and look at some code.

Creating a VM that has a property that is an object, like a child VM

Files:

  1. child-vm.html

     <template>
         <section>
             <h2>child-vm code sample</h2>
             <h2>my name is ${myChild.name}</h2>
         </section>
     </template>
    
  2. child-vm.ts

     import m = require("views/my-child-vm");
    
     export class ChildVM {
         public myChild: m.MyChildVM;
    
         constructor() {
             this.myChild = new m.MyChildVM("jhonny");
         }
     }
    
  3. my-child-vm.ts

     export class MyChildVM {
         public name: string;
    
         constructor(name: string) {
             this.name = name;
         }
     }
    

Adding a Route Dynamically

Files:

  1. in welcome.html

    button to add dynamic route

     <h2>Dynamic Route</h2>
     <button click.delegate="addDynamicRoute()">Add Dynamic Route</button>
    
  2. welcome.ts

    welcome view model handler to add dynamic route

     addDynamicRoute() {
         this.theRouter.addRoute({ route: "dyno-view", moduleId: "views/dyno-view", nav: true, title: "dyno-view" });
         this.theRouter.refreshNavigation();
     }
    
  3. dyno-view.html

     <template>
         <section>
             <h2>dyno-view</h2>
         </section>
     </template>
    
  4. dyno-view.ts

     export class DynoView {}
    

Wizard Routing Sample

wizard working

  1. wizard navigation

     getActiveRouteIndex() {
         for (var routeIndex in this.router.navigation) {
             var route = this.router.navigation[routeIndex];
             if (route.isActive) {
                 return routeIndex;
             }
         }
     }
    
     next() {
         var currentIndex = this.getActiveRouteIndex();
         if (currentIndex < this.router.navigation.length - 1) {
             currentIndex++;
             this.router.navigate(this.router.navigation[currentIndex].config.route, true);
         }
     }
    
     prev() {
         var currentIndex = this.getActiveRouteIndex();
         if (currentIndex > 0) {
             currentIndex--;
             this.router.navigate(this.router.navigation[currentIndex].config.route, true);
         }
     }
    
  2. wizard template

     <template>
         <section>
             <h1>wizard</h1>
             <div>
                 <div class="col-md-2">
                     <ul class="well nav nav-pills nav-stacked">
                         <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
                             <a href.bind="row.href">${row.title}</a>
                         </li>
                     </ul>
                 </div>
                 <button click.delegate="prev()" class="col-md-1"><</button>
                 <div class="col-md-8">
                     <router-view></router-view>
                 </div>
                 <button click.delegate="next()" class="col-md-1">></button>
             </div>
         </section>
     </template>
    

aurelia cube using threejs

view video

  1. view: aurelia-cube.html

     <template>
         <section>
             <h2>aurelia cube</h2>
             <div ref="sceneDiv" style="width: 500px; height: 400px;"></div>
         </section>
     </template>
    
  2. view model: aurelia-cube.ts

     import THREE = require("three");
    
     export class AureliaCube {
    
         public camera: THREE.Camera;
         public scene: THREE.Scene;
         public renderer: THREE.Renderer;
         public mesh: THREE.Mesh;
         public sceneDiv: HTMLDivElement;
    
         public attached() {
             this.init();
             this.animate();
         }
    
         public init = () => {
             this.scene = new THREE.Scene();
             this.camera = new THREE.PerspectiveCamera(70, this.sceneDiv.offsetWidth / this.sceneDiv.offsetHeight, 1, 1000);
    
             var light = new THREE.DirectionalLight(0xffffff);
             light.position.set(0, 1, 1).normalize();
             this.scene.add(light);
    
             var geometry = new THREE.BoxGeometry(30, 30, 30);
             var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/images/aurelia-logo.png') });
    
             this.mesh = new THREE.Mesh(geometry, material);
             this.mesh.position.z = -50;
             this.scene.add(this.mesh);
    
             this.renderer = new THREE.WebGLRenderer({ alpha: true });
             this.renderer.setSize(this.sceneDiv.offsetWidth, this.sceneDiv.offsetHeight);
             this.sceneDiv.appendChild(this.renderer.domElement);
    
             this.render();
         }
    
         public animate = () => {
             this.mesh.rotation.x += .01;
             this.mesh.rotation.y += .005;
    
             this.render();
             requestAnimationFrame(this.animate);
         }
    
         public render = () => {
             this.renderer.render(this.scene, this.camera);
         }
     }