docs(webpack): add angular2-template-loader

closes #1825

Author: Foxandxss

public/docs/_examples/package.json

@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "angular-cli": "^1.0.0-beta.5",
+    "angular2-template-loader": "^0.4.0",
     "canonical-path": "0.0.2",
     "concurrently": "^2.1.0",
     "css-loader": "^0.23.1",

public/docs/_examples/webpack/ts/config/webpack.common.js

@@ -24,7 +24,7 @@ module.exports = {
     loaders: [
       {
         test: /\.ts$/,
-        loader: 'ts'
+        loaders: ['ts', 'angular2-template-loader']
       },
       {
         test: /\.html$/,

public/docs/_examples/webpack/ts/config/webpack.test.js

@@ -10,7 +10,7 @@ module.exports = {
     loaders: [
       {
         test: /\.ts$/,
-        loader: 'ts'
+        loaders: ['ts', 'angular2-template-loader']
       },
       {
         test: /\.html$/,

public/docs/_examples/webpack/ts/src/app/app.component.ts

@@ -5,8 +5,8 @@ import '../../public/css/styles.css';
 
 @Component({
   selector: 'my-app',
-  template: require('./app.component.html'),
-  styles: [require('./app.component.css')]
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }
 // #enddocregion

public/docs/ts/latest/guide/webpack.jade

@@ -233,9 +233,10 @@ a(id="common-configuration")
 
 :marked
   * ts - a loader to transpile our Typescript code to ES5, guided by the `tsconfig.json` file
+  * angular2-template-loader - loads angular components' template and styles
   * html - for component templates
   * images/fonts - Images and fonts are bundled as well.
-  * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
+  * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property)
 .l-sub-section
   :marked
     The first pattern excludes `.css` files within the `/src/app` directories where our component-scoped styles sit.
@@ -245,6 +246,10 @@ a(id="common-configuration")
     The second pattern filters for component-scoped styles and loads them as strings via the `raw` loader —
     which is what Angular expects to do with styles specified in a `styleUrls` metadata property.
 
+.l-sub-section
+  :marked
+    Multiple loaders can be also chained using the array notation.
+
 :marked
   Finally we add two plugins:
 
@@ -441,9 +446,10 @@ p.
   The `HtmlWebpackPlugin` inserts them dynamically at runtime.
 
   * The `AppComponent` in `app.component.ts` imports the application-wide css with a simple `import` statement.
-  
-  * The `AppComponent` itself has its own html template and css files which we load with the `require()` method
-  supplied by Webpack. Webpack stashes those component-scoped files in the `app.js` bundle too.
+
+  * The `AppComponent` itself has its own html template and css file. WebPack loads them with calls to `require()`. 
+  Webpack stashes those component-scoped files in the `app.js` bundle too.
+  We don't see those calls in our source code; they're added behind the scenes by the `angular2-template-loader` plug-in. 
 
   * The `vendor.ts` consists of vendor dependency `import` statements that drive the `vendor.js` bundle.
   The application imports these modules too; they'd be duplicated in the `app.js` bundle