honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): more content fixes

Browse Source
This commit is contained in:
Jesus Rodriguez 2017-05-09 22:01:04 +02:00 committed by Pete Bacon Darwin
parent efa2928547
commit 56833a6171
7 changed files with 106 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
aio/content/guide/ajs-quick-reference.md
View File

@ -67,7 +67,7 @@ The following table lists some of the key AngularJS template features with their
### Bindings/interpolation ### Bindings/interpolation
<code-example> <code-example hideCopy>
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
</code-example> </code-example>
@ -85,7 +85,7 @@ The following table lists some of the key AngularJS template features with their
### Bindings/interpolation ### Bindings/interpolation
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="interpolation" linenums="false">
</code-example> </code-example>
@ -107,7 +107,7 @@ The following table lists some of the key AngularJS template features with their
### Filters ### Filters
<code-example> <code-example hideCopy>
&lt;td>{{movie.title | uppercase}}&lt;/td> &lt;td>{{movie.title | uppercase}}&lt;/td>
</code-example> </code-example>
@ -121,7 +121,7 @@ The following table lists some of the key AngularJS template features with their
### Pipes ### Pipes
<code-example path="ajs-quick-reference/src/app/app.component.html" region="uppercase" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="uppercase" linenums="false">
</code-example> </code-example>
@ -141,7 +141,7 @@ The following table lists some of the key AngularJS template features with their
### Local variables ### Local variables
<code-example format=""> <code-example hideCopy format="">
&lt;tr ng-repeat="movie in vm.movies"> &lt;tr ng-repeat="movie in vm.movies">
&lt;td>{{movie.title}}&lt;/td> &lt;td>{{movie.title}}&lt;/td>
&lt;/tr> &lt;/tr>
@ -155,7 +155,7 @@ The following table lists some of the key AngularJS template features with their
### Input variables ### Input variables
<code-example path="ajs-quick-reference/src/app/app.component.html" region="local" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="local" linenums="false">
</code-example> </code-example>
@ -210,7 +210,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-app ### ng-app
<code-example> <code-example hideCopy>
&lt;body ng-app="movieHunter"> &lt;body ng-app="movieHunter">
</code-example> </code-example>
@ -226,11 +226,11 @@ The following are some of the key AngularJS built-in directives and their equiva
### Bootstrapping ### Bootstrapping
<code-example path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false">
</code-example> </code-example>
<br> <br>
<code-example path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false">
</code-example> </code-example>
@ -251,7 +251,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-class ### ng-class
<code-example format=""> <code-example hideCopy format="">
&lt;div ng-class="{active: isActive}"> &lt;div ng-class="{active: isActive}">
&lt;div ng-class="{active: isActive, &lt;div ng-class="{active: isActive,
shazam: isImportant}"> shazam: isImportant}">
@ -272,7 +272,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ngClass ### ngClass
<code-example path="ajs-quick-reference/src/app/app.component.html" region="ngClass" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngClass" linenums="false">
</code-example> </code-example>
@ -300,7 +300,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-click ### ng-click
<code-example format=""> <code-example hideCopy format="">
&lt;button ng-click="vm.toggleImage()"> &lt;button ng-click="vm.toggleImage()">
&lt;button ng-click="vm.toggleImage($event)"> &lt;button ng-click="vm.toggleImage($event)">
</code-example> </code-example>
@ -318,7 +318,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### Bind to the `click` event ### Bind to the `click` event
<code-example path="ajs-quick-reference/src/app/app.component.html" region="event-binding" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="event-binding" linenums="false">
</code-example> </code-example>
@ -351,7 +351,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-controller ### ng-controller
<code-example format=""> <code-example hideCopy format="">
&lt;div ng-controller="MovieListCtrl as vm"> &lt;div ng-controller="MovieListCtrl as vm">
</code-example> </code-example>
@ -365,7 +365,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### Component decorator ### Component decorator
<code-example path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" title="ajs-quick-reference/src/app/movie-list.component.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false">
</code-example> </code-example>
@ -405,7 +405,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-href ### ng-href
<code-example format=""> <code-example hideCopy format="">
&lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a> &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
</code-example> </code-example>
@ -415,7 +415,7 @@ The following are some of the key AngularJS built-in directives and their equiva
fetches from that URL. fetches from that URL.
In AngularJS, the `ng-href` is often used to activate a route as part of navigation. In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
<code-example format=""> <code-example hideCopy format="">
&lt;a ng-href="#movies">Movies&lt;/a> &lt;a ng-href="#movies">Movies&lt;/a>
</code-example> </code-example>
@ -427,7 +427,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### Bind to the `href` property ### Bind to the `href` property
<code-example path="ajs-quick-reference/src/app/app.component.html" region="href" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="href" linenums="false">
</code-example> </code-example>
@ -439,7 +439,7 @@ The following are some of the key AngularJS built-in directives and their equiva
section of the [Template Syntax](guide/template-syntax) page. section of the [Template Syntax](guide/template-syntax) page.
In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example.
<code-example path="ajs-quick-reference/src/app/app.component.html" region="router-link" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="router-link" linenums="false">
</code-example> </code-example>
@ -457,7 +457,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-if ### ng-if
<code-example format=""> <code-example hideCopy format="">
&lt;table ng-if="movies.length"> &lt;table ng-if="movies.length">
</code-example> </code-example>
@ -472,7 +472,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### *ngIf ### *ngIf
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngIf" linenums="false">
</code-example> </code-example>
@ -494,7 +494,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-model ### ng-model
<code-example format=""> <code-example hideCopy format="">
&lt;input ng-model="vm.favoriteHero"/> &lt;input ng-model="vm.favoriteHero"/>
</code-example> </code-example>
@ -507,7 +507,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ngModel ### ngModel
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngModel" linenums="false">
</code-example> </code-example>
@ -528,7 +528,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-repeat ### ng-repeat
<code-example format=""> <code-example hideCopy format="">
&lt;tr ng-repeat="movie in vm.movies"> &lt;tr ng-repeat="movie in vm.movies">
</code-example> </code-example>
@ -543,7 +543,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### *ngFor ### *ngFor
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngFor" linenums="false">
</code-example> </code-example>
@ -569,7 +569,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-show ### ng-show
<code-example format=""> <code-example hideCopy format="">
&lt;h3 ng-show="vm.favoriteHero"> &lt;h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
&lt;/h3> &lt;/h3>
@ -586,7 +586,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### Bind to the `hidden` property ### Bind to the `hidden` property
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="hidden" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="hidden" linenums="false">
</code-example> </code-example>
@ -611,7 +611,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-src ### ng-src
<code-example format=""> <code-example hideCopy format="">
&lt;img ng-src="{{movie.imageurl}}"> &lt;img ng-src="{{movie.imageurl}}">
</code-example> </code-example>
@ -625,7 +625,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### Bind to the `src` property ### Bind to the `src` property
<code-example path="ajs-quick-reference/src/app/app.component.html" region="src" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="src" linenums="false">
</code-example> </code-example>
@ -645,7 +645,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-style ### ng-style
<code-example format=""> <code-example hideCopy format="">
&lt;div ng-style="{color: colorPreference}"> &lt;div ng-style="{color: colorPreference}">
</code-example> </code-example>
@ -662,7 +662,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ngStyle ### ngStyle
<code-example path="ajs-quick-reference/src/app/app.component.html" region="ngStyle" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="ngStyle" linenums="false">
</code-example> </code-example>
@ -688,7 +688,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ng-switch ### ng-switch
<code-example format=""> <code-example hideCopy format="">
&lt;div ng-switch="vm.favoriteHero && &lt;div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)"> vm.checkMovieHero(vm.favoriteHero)">
&lt;div ng-switch-when="true"> &lt;div ng-switch-when="true">
@ -717,7 +717,7 @@ The following are some of the key AngularJS built-in directives and their equiva
### ngSwitch ### ngSwitch
<code-example path="ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" title="ajs-quick-reference/src/app/movie-list.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.html" region="ngSwitch" linenums="false">
</code-example> </code-example>
@ -784,7 +784,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### currency ### currency
<code-example> <code-example hideCopy>
&lt;td>{{movie.price | currency}}&lt;/td> &lt;td>{{movie.price | currency}}&lt;/td>
</code-example> </code-example>
@ -796,7 +796,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### currency ### currency
<code-example path="ajs-quick-reference/src/app/app.component.html" region="currency" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="currency" linenums="false">
</code-example> </code-example>
@ -812,7 +812,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### date ### date
<code-example> <code-example hideCopy>
&lt;td>{{movie.releaseDate | date}}&lt;/td> &lt;td>{{movie.releaseDate | date}}&lt;/td>
</code-example> </code-example>
@ -824,7 +824,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### date ### date
<code-example path="ajs-quick-reference/src/app/app.component.html" region="date" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="date" linenums="false">
</code-example> </code-example>
@ -841,7 +841,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### filter ### filter
<code-example> <code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}"> &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
</code-example> </code-example>
@ -865,7 +865,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### json ### json
<code-example> <code-example hideCopy>
&lt;pre>{{movie | json}}&lt;/pre> &lt;pre>{{movie | json}}&lt;/pre>
</code-example> </code-example>
@ -877,7 +877,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### json ### json
<code-example path="ajs-quick-reference/src/app/app.component.html" region="json" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="json" linenums="false">
</code-example> </code-example>
@ -893,7 +893,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### limitTo ### limitTo
<code-example> <code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | limitTo:2:0"> &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
</code-example> </code-example>
@ -906,7 +906,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### slice ### slice
<code-example path="ajs-quick-reference/src/app/app.component.html" region="slice" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="slice" linenums="false">
</code-example> </code-example>
@ -925,7 +925,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### lowercase ### lowercase
<code-example> <code-example hideCopy>
&lt;div>{{movie.title | lowercase}}&lt;/div> &lt;div>{{movie.title | lowercase}}&lt;/div>
</code-example> </code-example>
@ -937,7 +937,7 @@ For more information on pipes, see [Pipes](guide/pipes).
### lowercase ### lowercase
<code-example path="ajs-quick-reference/src/app/app.component.html" region="lowercase" title="ajs-quick-reference/src/app/app.component.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="lowercase" linenums="false">
</code-example> </code-example>
@ -953,7 +953,8 @@ For more information on pipes, see [Pipes](guide/pipes).
### number ### number
<code-example>
<code-example hideCopy>
&lt;td>{{movie.starRating | number}}&lt;/td> &lt;td>{{movie.starRating | number}}&lt;/td>
</code-example> </code-example>
@ -965,7 +966,8 @@ For more information on pipes, see [Pipes](guide/pipes).
### number ### number
<code-example path="ajs-quick-reference/src/app/app.component.html" region="number" title="ajs-quick-reference/src/app/app.component.html" linenums="false">
<code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="number" linenums="false">
</code-example> </code-example>
@ -986,7 +988,8 @@ For more information on pipes, see [Pipes](guide/pipes).
### orderBy ### orderBy
<code-example>
<code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | orderBy : 'title'"> &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
</code-example> </code-example>
@ -1055,7 +1058,7 @@ The Angular code is shown using TypeScript.
### IIFE ### IIFE
<code-example> <code-example hideCopy>
(function () { (function () {
... ...
}()); }());
@ -1086,7 +1089,7 @@ The Angular code is shown using TypeScript.
### Angular modules ### Angular modules
<code-example> <code-example hideCopy>
angular.module("movieHunter", ["ngRoute"]); angular.module("movieHunter", ["ngRoute"]);
</code-example> </code-example>
@ -1099,7 +1102,7 @@ The Angular code is shown using TypeScript.
### Angular modules ### Angular modules
<code-example path="ajs-quick-reference/src/app/app.module.1.ts" title="ajs-quick-reference/src/app/app.module.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" linenums="false">
</code-example> </code-example>
@ -1120,7 +1123,8 @@ The Angular code is shown using TypeScript.
### Controller registration ### Controller registration
<code-example>
<code-example hideCopy>
angular angular
.module("movieHunter") .module("movieHunter")
.controller("MovieListCtrl", .controller("MovieListCtrl",
@ -1140,7 +1144,7 @@ The Angular code is shown using TypeScript.
### Component decorator ### Component decorator
<code-example path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" title="ajs-quick-reference/src/app/movie-list.component.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="component" linenums="false">
</code-example> </code-example>
@ -1163,7 +1167,7 @@ The Angular code is shown using TypeScript.
### Controller function ### Controller function
<code-example> <code-example hideCopy>
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
</code-example> </code-example>
@ -1176,7 +1180,7 @@ The Angular code is shown using TypeScript.
### Component class ### Component class
<code-example path="ajs-quick-reference/src/app/movie-list.component.ts" region="class" title="ajs-quick-reference/src/app/movie-list.component.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="class" linenums="false">
</code-example> </code-example>
@ -1197,7 +1201,7 @@ The Angular code is shown using TypeScript.
### Dependency injection ### Dependency injection
<code-example> <code-example hideCopy>
MovieListCtrl.$inject = ['MovieService']; MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
@ -1215,7 +1219,7 @@ The Angular code is shown using TypeScript.
### Dependency injection ### Dependency injection
<code-example path="ajs-quick-reference/src/app/movie-list.component.ts" region="di" title="ajs-quick-reference/src/app/movie-list.component.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="di" linenums="false">
</code-example> </code-example>
@ -1277,7 +1281,7 @@ also encapsulate a style sheet within a specific component.
### Link tag ### Link tag
<code-example> <code-example hideCopy>
&lt;link href="styles.css" rel="stylesheet" /> &lt;link href="styles.css" rel="stylesheet" />
</code-example> </code-example>
@ -1290,7 +1294,7 @@ also encapsulate a style sheet within a specific component.
### Link tag ### Link tag
<code-example path="ajs-quick-reference/src/index.html" region="style" title="ajs-quick-reference/src/index.html" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/index.html" region="style" linenums="false">
</code-example> </code-example>
@ -1301,7 +1305,7 @@ also encapsulate a style sheet within a specific component.
### StyleUrls ### StyleUrls
In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
a style sheet for a particular component. a style sheet for a particular component.
<code-example path="ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" title="ajs-quick-reference/src/app/movie-list.component.ts" linenums="false"> <code-example hideCopy path="ajs-quick-reference/src/app/movie-list.component.ts" region="style-url" linenums="false">
</code-example> </code-example>

2
aio/content/guide/form-validation.md
View File

@ -62,7 +62,7 @@ and the [Reactive Forms](guide/reactive-forms) guides.
**Try the live example to see and download the full cookbook source code.** **Try the live example to see and download the full cookbook source code.**
<live-example name="form-validation" embedded=true img="cookbooks/form-validation/plunker.png"> <live-example name="form-validation" embedded=true img="guide/form-validation/plunker.png">
</live-example> </live-example>

2
aio/content/guide/npm-packages.md
View File

@ -194,7 +194,7 @@ with excellent support for Angular apps that use routing.
***[typescript](https://www.npmjs.com/package/typescript)***: ***[typescript](https://www.npmjs.com/package/typescript)***:
the TypeScript language server, including the *tsc* TypeScript compiler. the TypeScript language server, including the *tsc* TypeScript compiler.
***@types/\****: TypeScript definition files. ***@types/\* ***: TypeScript definition files.
Learn more about it in the [TypeScript Configuration](guide/typescript-configuration#typings) guide. Learn more about it in the [TypeScript Configuration](guide/typescript-configuration#typings) guide.

6
aio/content/guide/router.md
View File

@ -2291,13 +2291,9 @@ After these changes, the folder structure looks like this:
</div> </div>
<Here>
are the relevant files for this version of the sample application.
</Here>
</div> </div>
Here are the relevant files for this version of the sample application.
<code-tabs> <code-tabs>

3
aio/content/guide/testing.md
View File

@ -2860,8 +2860,7 @@ Here's a summary of the stand-alone functions, in order of likely utility:
The curious, dedicated reader might enjoy this lengthy blog post, The curious, dedicated reader might enjoy this lengthy blog post,
"<a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/" ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/).
>_Tasks, microtasks, queues and schedules_</a>".
</div> </div>

107
aio/content/guide/webpack.md
View File

@ -109,19 +109,12 @@ It opens the `@angular/core` file and follows _its_ network of `import` statemen
Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration: Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
<code-example name="webpack.config.js (single output)" language="javascript">
output: {
filename: 'app.js'
}
<div class='code-example'> </code-example>
<code-example name="webpack.config.js (single output)" language="javascript">
output: {
filename: 'app.js'
}
</code-example>
</div>
This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies. This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
You'll load it later with a `<script>` tag in the `index.html`. You'll load it later with a `<script>` tag in the `index.html`.
@ -137,22 +130,17 @@ It's preferable to separate the volatile application app code from comparatively
Change the configuration so that it has two entry points, `main.ts` and `vendor.ts`: Change the configuration so that it has two entry points, `main.ts` and `vendor.ts`:
<div class='code-example'> <code-example language="javascript">
entry: {
app: 'src/app.ts',
vendor: 'src/vendor.ts'
},
<code-example language="javascript"> output: {
entry: { filename: '[name].js'
app: 'src/app.ts', }
vendor: 'src/vendor.ts'
},
output: {
filename: '[name].js'
}
</code-example>
</div>
</code-example>
Webpack constructs two separate dependency graphs Webpack constructs two separate dependency graphs
@ -193,23 +181,19 @@ Teach it to transform non-JavaScript file into their JavaScript equivalents with
Configure loaders for TypeScript and CSS as follows. Configure loaders for TypeScript and CSS as follows.
<div class='code-example'> <code-example language="javascript">
rules: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{
test: /\.css$/,
loaders: 'style-loader!css-loader'
}
]
<code-example language="javascript"> </code-example>
rules: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{
test: /\.css$/,
loaders: 'style-loader!css-loader'
}
]
</code-example>
</div>
@ -217,16 +201,12 @@ When Webpack encounters `import` statements like the following,
it applies the `test` RegEx patterns. it applies the `test` RegEx patterns.
<div class='code-example'> <code-example language="typescript">
import { AppComponent } from './app.component.ts';
<code-example language="typescript"> import 'uiframework/dist/uiframework.css';
import { AppComponent } from './app.component.ts';
import 'uiframework/dist/uiframework.css'; </code-example>
</code-example>
</div>
@ -250,17 +230,12 @@ Then it applies the `style` loader to append the css inside `<style>` elements o
Webpack has a build pipeline with well-defined phases. Webpack has a build pipeline with well-defined phases.
Tap into that pipeline with plugins such as the `uglify` minification plugin: Tap into that pipeline with plugins such as the `uglify` minification plugin:
<code-example language="javascript">
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
<div class='code-example'> </code-example>
<code-example language="javascript">
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
</code-example>
</div>
@ -440,16 +415,10 @@ This `entry` object defines the three bundles:
The app will `import` dozens if not hundreds of JavaScript and TypeScript files. The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
You could write `import` statements with explicit extensions like this example: You could write `import` statements with explicit extensions like this example:
<code-example language="typescript">
import { AppComponent } from './app.component.ts';
<div class='code-example'> </code-example>
<code-example language="typescript">
import { AppComponent } from './app.component.ts';
</code-example>
</div>
But most `import` statements don't mention the extension at all. But most `import` statements don't mention the extension at all.

2
aio/tools/transforms/helpers/utils.js
View File

@ -92,6 +92,6 @@ module.exports = {
}, },
renderAttributes(attrMap) { renderAttributes(attrMap) {
return Object.keys(attrMap).map(key => ` ${key}="${attrMap[key].replace(/"/g, '&quot;')}"`).join(''); return Object.keys(attrMap).map(key => (attrMap[key] === true) ? ` ${key}` : ` ${key}="${attrMap[key].replace(/"/g, '&quot;')}"`).join('');
} }
}; };