fix: 翻译 app-shell

This commit is contained in:
Zhicheng WANG 2019-06-05 14:07:45 +08:00
parent 0dee068b00
commit 0895bcef8b

View File

@ -1,34 +1,72 @@
# App shell # App shell
# 应用外壳
App shell is a way to render a portion of your application via a route at build time. App shell is a way to render a portion of your application via a route at build time.
It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads. It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
应用外壳是一种在构建期间借助路由渲染部分应用的方法。它可以通过快速启动一个静态渲染页面(所有页面的公共骨架)来改善用户体验。与此同时,浏览器会下载完整的客户端版本,并在代码加载后自动切换到完整版。
This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript. This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript.
这能让用户快速看到应用中第一个有意义的画面,因为浏览器可以很简单地渲染出 HTML 和 CSS而无需初始化任何 JavaScript。
Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell). Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).
欲知详情,参见[应用外壳模型](https://developers.google.com/web/fundamentals/architecture/app-shell)。
## Step 1: Prepare the application ## Step 1: Prepare the application
## 第 1 步:准备本应用
You can do this with the following CLI command: You can do this with the following CLI command:
可以用下列 CLI 命令来执行本操作:
<code-example format="." language="bash" linenums="false"> <code-example format="." language="bash" linenums="false">
ng new my-app --routing ng new my-app --routing
</code-example> </code-example>
For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application. For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
对于既有应用,你必须手动添加 `RouterModule` 并在应用中定义 `<router-outlet>`
## Step 2: Create the app shell ## Step 2: Create the app shell
## 第 2 步:创建应用外壳
Use the CLI to automatically create the app shell. Use the CLI to automatically create the app shell.
使用 CLI 自动创建一个应用外壳。
<code-example format="." language="bash" linenums="false"> <code-example format="." language="bash" linenums="false">
ng generate app-shell --client-project my-app --universal-project server-app ng generate app-shell --client-project my-app --universal-project server-app
</code-example> </code-example>
* `my-app` takes the name of your client application. - `my-app` takes the name of your client application.
* `server-app` takes the name of the Universal (or server) application.
`my-app` 是本客户端应用的名字。
- `server-app` takes the name of the Universal (or server) application.
`server-app` 是这个 Universal或 server应用的名字。
After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes. After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
执行完这个命令,你会发现 `angular.json` 配置文件中已经增加了两个新目标,并做了一些其它更改。
<code-example format="." language="none" linenums="false"> <code-example format="." language="none" linenums="false">
"server": { "server": {
"builder": "@angular-devkit/build-angular:server", "builder": "@angular-devkit/build-angular:server",
@ -50,10 +88,18 @@ After running this command you will notice that the `angular.json` configuration
## Step 3: Verify the app is built with the shell content ## Step 3: Verify the app is built with the shell content
## 第 3 步:验证该应用是使用应用外壳的内容构建的
Use the CLI to build the `app-shell` target. Use the CLI to build the `app-shell` target.
使用 CLI 构建目标 `app-shell`
<code-example format="." language="bash" linenums="false"> <code-example format="." language="bash" linenums="false">
ng run my-app:app-shell ng run my-app:app-shell
</code-example> </code-example>
To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output. To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.
要验证构建的输出,请打开 `dist/my-app/index.html`。寻找默认的文本 `app-shell works!` 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。