I have been exploring Aurelia and more recently Angular 2 and while doing so I thought it might be nice to run both frameworks from the same project. My first crack at this can be found in this repo on Github.
Content
- Contact model, a simplified version of the one used in previous blogs
- ContactsController and related razor views created using Visual Studio’s scaffolding tools based on the contact mode
- ContactsApiController is the end point for the Angular 2 and Aurelia applications
- Angular 2 application that closely match the one from last week’s post
- Aurelia application is currently just a proof that Angular 2 and Aurelia could run in the same project. This application will be updated to connect to the project’s web API.
Getting Started
Ensure that node and jspm are install.
After acquiring the code open the solution. If using Visual Studio the npm based packages will be restored automatically. If not using Visual Studio then run npm install from the console. This will handle all the files needed by Angular 2.
Next run the jspm install -y command to install the Aurelia related packages.
Make sure the database is created and up to date with the following two commands.
dnx ef database update -c ApplicationDbContext dnx ef database update -c ContactsDbContext
In wwwroot open the config.js file and verify the paths section looking like the following. Jspm install seems to rewrite the github and npm portions of the paths section which removed the “../”. This is more than likely a configuration issue that I hope to fix in the future.
paths: {
"*": "../Aurelia/*",
"github:*": "../jspm_packages/github/*",
"npm:*": "../jspm_packages/npm/*"
}
Finally run the angular2 gulp task from the task runner. The application should now run with no issues.
First Run
Make sure to register a new user as both the contacts controllers require an authorized user and filter down the contacts to display based on the logged in user.
The menu bar will contain links for Angular 2, Aurelia and Razor. Use the razor link to create some data. This is the generated razor views mentioned above. It is also the only way to add data through the application currently.
The Angular 2 link will of course launch the Angular 2 application that will display a list of contacts for the current user.
The Aurelia like will launch the Aurelia application which just contains the very basic application from the getting started guide.
Going Forward
The plan is to develop the Angular 2 and Aurelia applications together. The Aurelia application will be the first to get some time to get up to the same level as the Angular 2 application.
It is also my hope that having this project will be a good reference for you when reading the examples in future blog posts.