Aurelia-TypeScript

A starter kit for working with the Aurelia TypeScript type definitions

What's New

All samples updated to the Aurelia Beta Release

• Aurelia Beta Week - Day 1 - The Beta is Here!
• Aurelia Beta Week - Day 2 - Plugins
• Aurelia Beta Week - Day 3 - Documentation
• Aurelia Beta Week - Day 4 - Ecosystem
• Aurelia Beta Week - Day 5 - Aurelia Interface

Why didn't this repo get updated for so long? Glad you asked. What a battle !! Took me 8 weeks to find it, and it ended up being a single line of code. At some point in the development process, I started pre-loading the aurelia libraries. When the aurelia-pal and aurelia-pal-browser were introduced, I added them near the end of the loading process. This turned out to be the wrong order. It turns out pre-loading isn't needed. Once I removed the line of code that initiated the pre-load process, everything started working again.

Why don't the samples use JSPM & SystemJS ??? Another common question. Over two years ago, I was tasked with porting a large Microsoft Silverlight application to a pure web stack. Because I've spent my career (since 1987) working to build oil and gas information systems, and because these companies rely on ESRI for mapping, and because that large silverlight app used ESRI heavily, I was searching for a solution that embraced the ESRI JavaScript API technology stack. This meant finding a SPA that could use dojo for its module loader. Aurelia turned out to be the answer. The brilliant Rob Eisenberg said: "sure, i can support that module loader in parallel with jspm and systemjs". Don't underestimate the significance of this. This code, like all the code in Aurelia is beautiful, elegant, orthogonal, modular, and to me is a work of art. So dojo implements the requirejs spec for AMD module loading. And with that, we are off to the races 😄 👍

The 3d mapping coming next is going to blow your mind ✨

Anyway, the goal of the Aurelia-TypeScript project is to help you quickly get started using Aurelia and TypeScript and then to help you rapidly expand your expertise building systems with Aurelia and TypeScript.

As part of this effort, documentation for the samples, IDEs, and other notes can now be found in one consolidated location.

Aurelia TypeScript Samples

The Aurelia repositories now include type information as part of the .js source code. This type information is extracted during the repo build process to automatically generate a .d.ts file (for each repo).

For example, Aurelia Framework's .d.ts file can be found here: aurelia-framework.d.ts.

All of the samples use the TypeScript 1.5.3 release.

In addition, the Visual Studio samples have been verified using the release of Visual Studio 2015.

As always, feel free to look me up and thanks for your interest in Aurelia and TypeScript :)

Aurelia .d.ts files

Periodically, I round up the .d.ts files when I make new AMD bundles. Those files can be found here. (Please go to the individual Aurelia repositories for the latest, up-to-date versions).

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. skel-nav-esri-vs-ts documentation
2. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in skel-nav-esri-vs-ts
3. run solution using chrome

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

1. skel-nav-esri-vs-ts-telerik documentation
2. get familiar with telerik appbuilder
3. obtain a license to telerik appbuilder (or do an evaluation)
4. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. install telerik appbuilder
3. run visual studio
4. open solution in skel-nav-esri-vs-ts-telerik
5. run solution using chrome

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

1. skel-nav-require-vs-ts documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in skel-nav-require-vs-ts
3. run solution using chrome

just use it - gulp

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

just use it webstorm

skel-nav-require-webstorm-ts documentation.

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. pwkad-aurelia-samples documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in pwkad-aurelia-samples
3. run solution using chrome

@PWKad Samples Illustrate:

1. Aurelia Attached Behavior - Markdown Editor

explore aurelia by looking at the tests

1. aurelia-vs-ts-tests documentation
2. have a look at the TypeScript test source for aurelia-dependency-injection
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in aurelia-vs-ts-tests
3. run solution using chrome

bundling

• link to un-minimized bundle - 478K
• link to minimized bundle - 213K

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

• manifest of dependencies
• main-config
• bower config

5. 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

6. 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. aurelia-vs-ts documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in aurelia-vs-ts
3. run solution in chrome browser

code sandbox - place to illustrate various code usage

1. code-sandbox documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in code-sandbox
3. 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

1. multi-level-menu documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in multi-level-menu
3. run solution using chrome

todo sample

1. todo-require-vs-ts documentation
2. view running project
3. Make sure you have Visual Studio 2015: Free Comunity Edition or higher

TypeScript 1.5 is included in this install.

1. Run Visual Studio 2015
2. open solution in todo-require-vs-ts
3. 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
3. Erik's cool aurelia getting started cheat sheet
4. Erik's associated aurelia getting started blog

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.