/aurelia-typescript

A starter kit for working with the Aurelia TypeScript type definitions

Primary LanguageJavaScriptMIT LicenseMIT

aurelia-typescript

A starter kit for working with the Aurelia TypeScript type definitions

aurelia.d.ts

This library works with the Aurelia platform.

To keep up to date on Aurelia, please visit and subscribe to the official blog. If you have questions, we invite you to join us on our Gitter Channel.

Table of Contents

  1. visual studio: typescript esri dojo amd
  2. visual studio: mobile typescript esri dojo amd
  3. visual studio: typescript requirejs amd
  4. gulp: requirejs amd
  5. webstorm: requirejs amd
  6. @PWKad Samples
  7. unit tests
  8. bundling with r.js
  9. @Lakerfield samples
  10. code sandbox
  11. multi-level menu sample
  12. todo sample
  13. browser support by solution
  14. howto push samples to gh pages
  15. links to related content

just use it - visual studio (using esri dojo amd module loader)

includes bonus aurelia view & view model with a basic esri map

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in skel-nav-esri-vs-ts
  6. run solution using chrome

just use it (on mobile devices !!) - visual studio and telerik appbuilder

aurelia mobile map

  1. get familiar with telerik appbuilder
  2. obtain a license to telerik appbuilder (or do an evaluation)
  3. make sure you have visual studio 2013 Update 4
  4. install typescript 1.4 for Visual Studio 2013
  5. install telerik appbuilder
  6. run visual studio
  7. open solution in skel-nav-esri-vs-ts-telerik
  8. run solution using chrome

just use it - visual studio (using requirejs amd module loader)

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in skel-nav-require-vs-ts
  6. run solution using chrome

just use it - gulp

  1. view running project
  2. run git bash shell
  3. change to skel-nav-esri-gulp folder
  4. run npm install
  5. run gulp watch
  6. run chrome browser and point at http://localhost:9000

just use it webstorm

the project is already setup with file watcher but you can follow the full instruction here to add TypeScript file watcher webstorm typescript file watcher

just use it - @PWKad Samples with visual studio (using requirejs amd module loader)

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in pwkad-aurelia-samples
  6. run solution using chrome

@PWKad Samples Illustrate:

  1. Aurelia Attached Behavior - Markdown Editor

explore aurelia by looking at the tests

tests 03

  1. have a look at the TypeScript test source for aurelia-dependency-injection
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in aurelia-vs-ts-tests
  6. run solution using chrome

bundling

nav 01

  1. open git bash shell

  2. install node.js

  3. install bower

  4. change to aurelia-require-bundle folder

  5. get the latest aurelia libraries

    run bower install

  6. have a look at the bundling dependencies

  1. bundle the files for development

    run node r.js -o name=aurelia-bundle-manifest baseUrl=. mainConfigFile=main-config.js out=aurelia-bundle.js optimize=none

  2. bundle the files for production (minified)

    run node r.js -o name=aurelia-bundle-manifest baseUrl=. mainConfigFile=main-config.js out=aurelia-bundle.min.js

cool sample exercising navigation (from @Lakerfield)

  1. view running project
  2. run git bash shell
  3. change to aurelia-vs-ts folder
  4. run npm install
  5. run gulp watch
  6. run chrome browser and point at http://localhost:9000

code sandbox - place to illustrate various code usage

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in code-sandbox
  6. run solution using chrome

Code Sandbox has code that Illustrates:

  1. Child VM
  2. Adding Dynamic Routes
  3. Wizard Routing Sample
  4. 3d aurelia cube using threejs

multi-level menu

multi-level-menu working

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in multi-level-menu
  6. run solution using chrome

todo sample

todo working

  1. view running project
  2. make sure you have visual studio 2013 Update 4
  3. install typescript 1.4 for Visual Studio 2013
  4. run visual studio
  5. open solution in todo-require-vs-ts
  6. run solution using chrome

browser support by solution

work is underway to address browser support for the solutions in this repo. this table will be updated as enhancements are made and support is validated. see also issue #7

Solution Chrome Firefox IE11 IE10 IE9
aurelia-vs-ts ✅ 📝 📝 📝 📝
code-sandbox ✅ 📝 📝 📝 📝
multi-level-menu ✅ ✅ 📝 📝 📝
pwkad-aurelia-samples ✅ 📝 📝 📝 📝
skel-nav-esri-gulp ✅ 📝 📝 📝 📝
skel-nav-esri-vs-ts ✅ 📝 📝 📝 📝
skel-nav-require-vs-ts ✅ 📝 📝 📝 📝
todo-require-vs-ts ✅ 📝 📝 📝 📝
Solution Telerik Simulator Samsung Note 4
skel-nav-esri-vs-ts-telerik 📝 📝

push samples to gh-pages

code used to copy the samples to cmichaelgraham gh-pages. includes the recipe for following the same pattern in your own world.

Links to Related Content

  1. Colin Dembovsky - Debugging Within Visual Studio
  2. Behzad Abbasi (Behzad88) - HotWater-Aurelia

Contributing

We'd love for you to contribute to our source code and to make this project even better than it is today! If this interests you, please begin by reading our contributing guidelines. The contributing document will provide you with all the information you need to get started. Once you have read that, you will need to also sign our CLA before we can accepts a Pull Request from you. More information on the process is including in the contributor's guide.