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

docs(aio): fix spacing on l-sub-sections

This commit is contained in:
Kapunahele Wong 2017-04-19 15:57:28 -04:00 committed by Pete Bacon Darwin
parent c3727f330b
commit 134f542b36
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
aio/content/guide/aot-compiler.md
View File

@ -42,7 +42,9 @@ Before the browser can render the application,
the components and templates must be converted to executable JavaScript by the _Angular compiler_. the components and templates must be converted to executable JavaScript by the _Angular compiler_.
<div class="l-sub-section"> <div class="l-sub-section">
<a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016. <a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
</div> </div>
You can compile the app in the browser, at runtime, as the application loads, using the **_just-in-time_ (JIT) compiler**. You can compile the app in the browser, at runtime, as the application loads, using the **_just-in-time_ (JIT) compiler**.
@ -161,10 +163,12 @@ Initiate AOT compilation from the command line using the previously installed `n
</code-example> </code-example>
<div class="l-sub-section"> <div class="l-sub-section">
Windows users should surround the `ngc` command in double quotes: Windows users should surround the `ngc` command in double quotes:
<code-example format='.'> <code-example format='.'>
"node_modules/.bin/ngc" -p tsconfig-aot.json "node_modules/.bin/ngc" -p tsconfig-aot.json
</code-example> </code-example>
</div> </div>
`ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file. `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file.
@ -178,15 +182,19 @@ and a JavaScript representation of the component's template.
Note that the original component class is still referenced internally by the generated factory. Note that the original component class is still referenced internally by the generated factory.
<div class="l-sub-section"> <div class="l-sub-section">
The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax
compiled to TypeScript, its intermediate form. compiled to TypeScript, its intermediate form.
JIT compilation generates these same _NgFactories_ in memory where they are largely invisible. JIT compilation generates these same _NgFactories_ in memory where they are largely invisible.
AOT compilation reveals them as separate, physical files. AOT compilation reveals them as separate, physical files.
</div> </div>
<div class="alert is-important"> <div class="alert is-important">
Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost. Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost.
</div> </div>
{@a bootstrap} {@a bootstrap}
@ -247,9 +255,11 @@ It produces a final code _bundle_ that excludes code that is exported, but never
Rollup can only tree shake `ES2015` modules which have `import` and `export` statements. Rollup can only tree shake `ES2015` modules which have `import` and `export` statements.
<div class="l-sub-section"> <div class="l-sub-section">
Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules. Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules.
It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`. It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`.
What matters is that the code uses ES `import` and `export` statements rather than `require` statements. What matters is that the code uses ES `import` and `export` statements rather than `require` statements.
</div> </div>
In the terminal window, install the Rollup dependencies with this command: In the terminal window, install the Rollup dependencies with this command:
@ -304,8 +314,10 @@ Add the following to the `plugins` array:
</code-example> </code-example>
<div class="l-sub-section"> <div class="l-sub-section">
In a production setting, you would also enable gzip on the web server to compress In a production setting, you would also enable gzip on the web server to compress
the code into an even smaller package going over the wire. the code into an even smaller package going over the wire.
</div> </div>
{@a run-rollup} {@a run-rollup}
@ -319,10 +331,12 @@ Execute the Rollup process with this command:
</code-example> </code-example>
<div class="l-sub-section"> <div class="l-sub-section">
Windows users should surround the `rollup` command in double quotes: Windows users should surround the `rollup` command in double quotes:
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
"node_modules/.bin/rollup" -c rollup-config.js "node_modules/.bin/rollup" -c rollup-config.js
</code-example> </code-example>
</div> </div>
{@a load} {@a load}
@ -489,6 +503,7 @@ You'll need separate TypeScript configuration files such as these:
</code-tabs> </code-tabs>
<div class="callout is-helpful"> <div class="callout is-helpful">
<header> <header>
@Types and node modules @Types and node modules
</header> </header>
@ -500,6 +515,7 @@ You'll need separate TypeScript configuration files such as these:
In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json` In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json`
and `"typeRoots"` would be set to `"node_modules/@types/"`. and `"typeRoots"` would be set to `"node_modules/@types/"`.
Edit your `tsconfig-aot.json` to fit your project's file structure. Edit your `tsconfig-aot.json` to fit your project's file structure.
</div> </div>
{@a shaking} {@a shaking}
@ -516,6 +532,7 @@ Rollup does the tree shaking as before.
### Running the application ### Running the application
<div class="alert is-important"> <div class="alert is-important">
The general audience instructions for running the AOT build of the Tour of Heroes app are not ready. The general audience instructions for running the AOT build of the Tour of Heroes app are not ready.
The following instructions presuppose that you have cloned the The following instructions presuppose that you have cloned the
@ -523,6 +540,7 @@ Rollup does the tree shaking as before.
github repository and prepared it for development as explained in the repo's README.md. github repository and prepared it for development as explained in the repo's README.md.
The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder. The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder.
</div> </div>
Run the JIT-compiled app with `npm start` as for all other JIT examples. Run the JIT-compiled app with `npm start` as for all other JIT examples.
@ -549,7 +567,9 @@ Copy the AOT distribution files into the `/aot` folder with the node script:
</code-example> </code-example>
<div class="l-sub-section"> <div class="l-sub-section">
You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers. You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
</div> </div>
Now AOT-compile the app and launch it with the `lite-server`: Now AOT-compile the app and launch it with the `lite-server`: