feat(all): new simple html elements, css resources and text-based views

config.js

@@ -47,6 +47,7 @@ System.config({
     "css": "github:systemjs/plugin-css@0.1.13",
     "fetch": "github:github/fetch@0.9.0",
     "font-awesome": "npm:font-awesome@4.4.0",
+    "text": "github:systemjs/plugin-text@0.0.2",
     "github:aurelia/animator-css@0.15.0": {
       "aurelia-metadata": "github:aurelia/metadata@0.7.3",
       "aurelia-templating": "github:aurelia/templating@0.14.1"
@@ -102,14 +103,14 @@ System.config({
     },
     "github:aurelia/loader-default@0.9.5": {
       "aurelia-loader": "github:aurelia/loader@0.8.7",
-      "aurelia-metadata": "github:aurelia/metadata@0.7.3"
+      "aurelia-metadata": "github:aurelia/metadata@0.7.3",
+      "webcomponentsjs": "github:webcomponents/webcomponentsjs@0.6.3"
     },
     "github:aurelia/loader@0.8.7": {
       "aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
       "aurelia-metadata": "github:aurelia/metadata@0.7.3",
       "aurelia-path": "github:aurelia/path@0.8.1",
-      "core-js": "npm:core-js@0.9.18",
-      "webcomponentsjs": "github:webcomponents/webcomponentsjs@0.6.3"
+      "core-js": "npm:core-js@0.9.18"
     },
     "github:aurelia/logging-console@0.6.2": {
       "aurelia-logging": "github:aurelia/logging@0.6.4"
@@ -302,4 +303,3 @@ System.config({
     }
   }
 });
-

package.json

@@ -75,7 +75,8 @@
       "core-js": "npm:core-js@^0.9.4",
       "css": "github:systemjs/plugin-css@^0.1.11",
       "fetch": "github:github/fetch@^0.9.0",
-      "font-awesome": "npm:font-awesome@^4.3.0"
+      "font-awesome": "npm:font-awesome@^4.3.0",
+      "text": "github:systemjs/plugin-text@^0.0.2"
     },
     "devDependencies": {
       "babel": "npm:babel-core@^5.1.13",

src/app.html

@@ -1,5 +1,6 @@
 <template>
-  <require from='nav-bar'></require>
+  <require from="nav-bar.html"></require>
+  <require from="bootstrap/css/bootstrap.css"></require>
 
   <nav-bar router.bind="router"></nav-bar>
 

src/app.js

@@ -1,6 +1,3 @@
-import 'bootstrap';
-import 'bootstrap/css/bootstrap.css!';
-
 export class App {
   configureRouter(config, router){
     config.title = 'Aurelia';

src/main.js

@@ -1,8 +1,17 @@
+import 'bootstrap';
+
 export function configure(aurelia) {
   aurelia.use
     .standardConfiguration()
-    .developmentLogging()
-    .plugin('aurelia-animator-css');
+    .developmentLogging();
+
+  //Uncomment the line below to enable animation.
+  //aurelia.use.plugin('aurelia-animator-css');
+
+  //In the next release of Aurelia, this API will be removed.
+  //At that time, the text loader will become the default.
+  //Anyone wanting to use HTMLImports, will install the appropriate plugin.
+  aurelia.loader.useTextLoader();
 
   aurelia.start().then(a => a.setRoot());
 }

src/nav-bar.html

@@ -1,4 +1,4 @@
-<template>
+<template bindable="router">
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

src/welcome.html

@@ -1,7 +1,6 @@
 <template>
   <section class="au-animate">
     <h2>${heading}</h2>
-
     <form role="form" submit.delegate="submit()">
       <div class="form-group">
         <label for="fn">First Name</label>