Upgrade to angular 2 beta 0 (closes #35)

CHANGELOG.MD

@@ -1,4 +1,5 @@
 * 0.1.0
+  * supports Angular 2 beta 0
   * now uses modernWebDevBuild 0.1.1
   * added unit testing support (with Karma, Jasmine and JSPM/SystemJS) (closes #37)
   * fix for #33 avoid the need for installing dependencies globally

README.md

@@ -22,7 +22,7 @@ This generator includes all the folders & files listed by [ModernWebDevBuild](ht
 
 The generated projects also include:
 * a working setup of Angular 2 (this might later move to a separate sub-generator)
-  * a root component (app/core/core.bootstrap.ts)
+  * a root component (app/core/boot.ts)
   * a home page (app/pages/home.ts)
   * a basic component router configuration
 * a good [HTML5 boilerplate](https://html5boilerplate.com/)

app/templates/applicationFiles/app/README.md

@@ -5,4 +5,4 @@ This is the main folder that the build system will care about.
 # index.html
 The index.html file is where the fun begins. Take a look at it to get an idea of how the application is bootstrapped.
 
-The next piece of the puzzle is the core/core.bootstrap.ts file which is the application entrypoint.
+The next piece of the puzzle is the core/boot.ts file which is the application entrypoint.

app/templates/applicationFiles/app/core/README.md

@@ -1,6 +1,6 @@
 # About
 Should contain all main pieces of your application.
-First and foremost, the *core.bootstrap.ts* file, which is the entrypoint of your application.
+First and foremost, the *boot.ts* file, which is the entrypoint of your application.
 
 This folder can also be used to store:
 * common code: utilities and the like

app/templates/applicationFiles/app/core/app.template.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

app/templates/applicationFiles/app/core/app.ts

@@ -0,0 +1,29 @@
+"use strict";
+
+// import Angular 2
+import {Component} from "angular2/core";
+
+// import Angular 2 Component Router
+// reference: http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html
+import {RouteConfig, Route, RouterOutlet, RouterLink, Router} from "angular2/router";
+
+// app components
+import {Home} from "../pages/home/home";
+
+// app services
+//import {appServicesInjectables} from "core/services/services";
+
+@Component({
+	selector: "app",
+	templateUrl: "core/app.template.html", //template: "<router-outlet></router-outlet>",
+	directives: [RouterOutlet, RouterLink]
+})
+@RouteConfig([
+	{ path: "/", component: Home, as: "Home", data: undefined } // the as serves as alias for links, etc
+])
+export class App {
+	constructor() {
+		console.log("Application bootstrapped!");
+	}
+}
+

app/templates/applicationFiles/app/core/boot.ts

@@ -0,0 +1,33 @@
+"use strict";
+
+// import the application
+import {App} from "./app";
+
+// import Angular 2
+import {bootstrap} from "angular2/bootstrap";
+import {provide, enableProdMode} from "angular2/core";
+import {HTTP_PROVIDERS} from "angular2/http";
+
+// import Angular 2 Component Router
+// reference: http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html
+import {LocationStrategy, PathLocationStrategy, ROUTER_PROVIDERS} from "angular2/router";
+
+// enable production mode of Angular
+//enableProdMode();
+
+// bootstrap our app
+console.log("Bootstrapping the App");
+
+// in [] is the list of injector bindings. Those bindings are used when an injector is created. Passing these here make the bindings available application-wide
+bootstrap(App, [
+	//appServicesInjectables, // alternative way of filling the injector with all the classes we want to be able to inject
+	ROUTER_PROVIDERS,
+	HTTP_PROVIDERS,
+	provide(LocationStrategy, { useClass: PathLocationStrategy }) // enables the following: /#/<component_name> rather than /<component_name>
+	//alternative
+	//provide(LocationStrategy, { useClass: HTML5LocationStrategy }) // enable HTML5 history API location strategy
+
+]).then(
+	(success:any) => console.log("Bootstrap successful"),
+	(error:any) => console.error(error)
+);

app/templates/applicationFiles/app/pages/home/home.ts

@@ -1,12 +1,12 @@
 "use strict";
 
 // import Angular 2
-import { Component, CORE_DIRECTIVES } from "angular2/angular2";
+import {Component} from "angular2/core";
 
 @Component({
 	selector: "page-home",
 	templateUrl: "pages/home/home.template.html",
-	directives: [CORE_DIRECTIVES]
+	directives: []
 })
 export class Home {
 

app/templates/applicationTemplates/app/index.html

@@ -42,12 +42,16 @@
 		Loading ...
 	</app>
 
+	<!--
+		Angular 2 polyfills (zone.js, reflect-metadata, ...) must be loaded BEFORE SystemJS
+	-->
+	<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
 	<!-- build:js-app -->
 	<!-- for production, this is all replaced by a minified bundle -->
 	<script src="jspm_packages/system.src.js"></script>
 	<script src="jspm.conf.js"></script>
 	<script>
-		System.import('core/core.bootstrap').catch(console.error.bind(console));
+		System.import('core/boot').catch(console.error.bind(console));
 	</script>
 	<!-- endbuild -->
 </body>