fix: 不再使用重复id设置anchor(#198)
This commit is contained in:
Zhicheng Wang
parent
46f8158885
commit
cb38d7613c
|
|
@ -46,8 +46,9 @@ include _util-fns
|
|||
|
||||
|
||||
.l-main-section
|
||||
h2#devenv Step 1. Set up the Development Environment
|
||||
h2#devenv 步骤1. 设置开发环境
|
||||
h2#devenv
|
||||
p Step 1. Set up the Development Environment
|
||||
p 步骤1. 设置开发环境
|
||||
|
||||
:marked
|
||||
You need to set up our development environment before you can do anything.
|
||||
|
|
@ -78,9 +79,9 @@ code-example(language="sh" class="code-shell").
|
|||
npm install -g @angular/cli
|
||||
|
||||
.l-main-section
|
||||
h2#create-project Step 2. Create a new project
|
||||
|
||||
h2#create-project 步骤2. 创建新项目
|
||||
h2#create-project
|
||||
p Step 2. Create a new project
|
||||
p 步骤2. 创建新项目
|
||||
|
||||
:marked
|
||||
Open a terminal window.
|
||||
|
|
@ -104,9 +105,9 @@ code-example(language="sh" class="code-shell").
|
|||
创建新项目需要花费很多时间，大多数时候都是在安装那些npm包。
|
||||
|
||||
.l-main-section
|
||||
h2#serve Step 3: Serve the application
|
||||
|
||||
h2#serve 步骤3. 启动开发服务器
|
||||
h2#serve
|
||||
p Step 3: Serve the application
|
||||
p 步骤3. 启动开发服务器
|
||||
|
||||
:marked
|
||||
Go to the project directory and launch the server.
|
||||
|
|
@ -131,9 +132,9 @@ figure.image-display
|
|||
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")
|
||||
|
||||
.l-main-section
|
||||
h2#first-component Step 4: Edit our first Angular component
|
||||
|
||||
h2#first-component 步骤4. 编辑我们的第一个Angular组件
|
||||
h2#first-component
|
||||
p Step 4: Edit our first Angular component
|
||||
p 步骤4. 编辑我们的第一个Angular组件
|
||||
|
||||
:marked
|
||||
The CLI created our first Angular component for us.
|
||||
|
|
|
|||
|
|
@ -82,9 +82,9 @@ include ../_util-fns
|
|||
|
||||
|
||||
.l-main-section
|
||||
h2#prereq1 Prerequisite: Node.js
|
||||
|
||||
h2#prereq1 前提条件: Node.js
|
||||
h2#prereq1
|
||||
p Prerequisite: Node.js
|
||||
p 前提条件: Node.js
|
||||
|
||||
:marked
|
||||
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
|
||||
|
|
@ -100,9 +100,9 @@ h2#prereq1 前提条件: Node.js
|
|||
|
||||
在终端或者控制台中运行`node -v`和`npm -v`，**请确认你的Node版本为`4.6.x`或更高，npm的版本为`3.x.x`或更高**。老版本会引起错误。
|
||||
.l-main-section
|
||||
h2#prereq2 Prerequisite: Visual Studio 2015 Update 3
|
||||
|
||||
h2#prereq2 前提条件: Visual Studio 2015 Update 3
|
||||
h2#prereq2
|
||||
p Prerequisite: Visual Studio 2015 Update 3
|
||||
p 前提条件: Visual Studio 2015 Update 3
|
||||
:marked
|
||||
The minimum requirement for developing Angular applications with Visual Studio is Update 3.
|
||||
Earlier versions do not follow the best practices for developing applications with TypeScript.
|
||||
|
|
@ -118,9 +118,9 @@ h2#prereq2 前提条件: Visual Studio 2015 Update 3
|
|||
如果还没有，安装**[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**。或者使用`Tools | Extensions and Updates`来直接在Visual Studio 2015中更新到Update 3。
|
||||
|
||||
.l-main-section
|
||||
h2#prereq3 Prerequisite: Configure External Web tools
|
||||
|
||||
h2#prereq3 前提条件: 配置External Web tools
|
||||
h2#prereq3
|
||||
p Prerequisite: Configure External Web tools
|
||||
p 前提条件: 配置External Web tools
|
||||
:marked
|
||||
Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:
|
||||
|
||||
|
|
@ -158,9 +158,9 @@ h2#prereq3 前提条件: 配置External Web tools
|
|||
Visual Studio将优先在当前的工作区查找外部工具，如果没有找到，便查找全局路径，如果还没有找到，Visual Studio就使用自带的工具版本。
|
||||
|
||||
.l-main-section
|
||||
h2#prereq4 Prerequisite: Install TypeScript 2 for Visual Studio 2015
|
||||
|
||||
h2#prereq4 前提条件: 安装TypeScript 2 for Visual Studio 2015
|
||||
h2#prereq4
|
||||
p Prerequisite: Install TypeScript 2 for Visual Studio 2015
|
||||
p 前提条件: 安装TypeScript 2 for Visual Studio 2015
|
||||
:marked
|
||||
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2,
|
||||
which you need to develop Angular applications.
|
||||
|
|
@ -189,9 +189,9 @@ h2#prereq4 前提条件: 安装TypeScript 2 for Visual Studio 2015
|
|||
至此，Visual Studio准备好了。重新启动Visual Stuido，这样我们可以有一个崭新的开始。
|
||||
|
||||
.l-main-section
|
||||
h2#download Step 1: Download the QuickStart files
|
||||
|
||||
h2#download 第一步: 现在“快速起步”文件
|
||||
h2#download
|
||||
p Step 1: Download the QuickStart files
|
||||
p 第一步: 现在“快速起步”文件
|
||||
|
||||
:marked
|
||||
[Download the QuickStart source](https://github.com/angular/quickstart)
|
||||
|
|
@ -200,9 +200,9 @@ h2#download 第一步: 现在“快速起步”文件
|
|||
从github[下载“快速起步”的源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩的zip文件，解压它。
|
||||
|
||||
.l-main-section
|
||||
h2#create-project Step 2: Create the Visual Studio ASP.NET project
|
||||
|
||||
h2#create-project 第二步：创建Visual Studio ASP.net项目
|
||||
h2#create-project
|
||||
p Step 2: Create the Visual Studio ASP.NET project
|
||||
p 第二步：创建Visual Studio ASP.net项目
|
||||
|
||||
:marked
|
||||
Create the ASP.NET 4.x project in the usual way as follows:
|
||||
|
|
@ -237,9 +237,9 @@ h2#create-project 第二步：创建Visual Studio ASP.net项目
|
|||
本烹饪宝典选择了`Empty`模板，它没有添加过任何目录，没有身份验证，没有服务器托管。为你的项目选择合适的模板和选项。
|
||||
|
||||
.l-main-section
|
||||
h2#copy Step 3: Copy the QuickStart files into the ASP.NET project folder
|
||||
|
||||
h2#copy 第三步: 拷贝“快速起步”的文件到ASP.NET项目所在的目录
|
||||
h2#copy
|
||||
p Step 3: Copy the QuickStart files into the ASP.NET project folder
|
||||
p 第三步: 拷贝“快速起步”的文件到ASP.NET项目所在的目录
|
||||
|
||||
:marked
|
||||
Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file.
|
||||
|
|
@ -278,9 +278,9 @@ h2#copy 第三步: 拷贝“快速起步”的文件到ASP.NET项目所在的目
|
|||
|
||||
|
||||
.l-main-section
|
||||
h2#restore Step 4: Restore the required packages
|
||||
|
||||
h2#restore 第四步: 恢复需要的包
|
||||
h2#restore
|
||||
p Step 4: Restore the required packages
|
||||
p 第四步: 恢复需要的包
|
||||
|
||||
:marked
|
||||
Restore the packages required for an Angular application as follows:
|
||||
|
|
@ -317,9 +317,9 @@ h2#restore 第四步: 恢复需要的包
|
|||
|
||||
|
||||
.l-main-section
|
||||
h2#build-and-run Step 5: Build and run the app
|
||||
|
||||
h2#build-and-run 第五步：构建和运行应用
|
||||
h2#build-and-run
|
||||
p Step 5: Build and run the app
|
||||
p 第五步：构建和运行应用
|
||||
|
||||
:marked
|
||||
First, ensure that `index.html` is set as the start page.
|
||||
|
|
@ -347,9 +347,9 @@ h2#build-and-run 第五步：构建和运行应用
|
|||
尝试编辑任何项目文件，*保存*并刷新浏览器来查看效果。
|
||||
|
||||
.l-main-section
|
||||
h2#routing Note on Routing Applications
|
||||
|
||||
h2#routing 应用程序的路由
|
||||
h2#routing
|
||||
p Note on Routing Applications
|
||||
p 应用程序的路由
|
||||
|
||||
:marked
|
||||
If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*.
|
||||
|
|
|
|||
|
|
@ -625,8 +625,9 @@ block ngmodule-vs-component
|
|||
当别人请求英雄数据时，在`getHeroes`方法中调用这个属性的方法。
|
||||
|
||||
- var injUrl = '../api/core/index/Injectable-decorator.html';
|
||||
h3#injectable Why @Injectable()?
|
||||
h3#injectable 为什么要用 @Injectable()?
|
||||
h3#injectable
|
||||
p Why @Injectable()?
|
||||
p 为什么要用 @Injectable()?
|
||||
:marked
|
||||
**<a href="#{injUrl}">@Injectable()</a>** marks a class as available to an
|
||||
injector for instantiation. Generally speaking, an injector will report an
|
||||
|
|
|
|||
|
|
@ -547,8 +547,9 @@ p.
|
|||
我们可以在<live-example>在线例子</live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。
|
||||
|
||||
- var _dollar = _docsFor === 'ts' ? '$' : '';
|
||||
h3#async-pipe The impure #[i AsyncPipe]
|
||||
h3#async-pipe 非纯管道#[i AsyncPipe]
|
||||
h3#async-pipe
|
||||
p The impure #[i AsyncPipe]
|
||||
p 非纯管道#[i AsyncPipe]
|
||||
:marked
|
||||
The Angular `AsyncPipe` is an interesting example of an impure pipe.
|
||||
The `AsyncPipe` accepts a `#{_Promise}` or `#{_Observable}` as input
|
||||
|
|
|
|||
|
|
@ -1652,9 +1652,9 @@ a#hero-detail-ctor
|
|||
|
||||
使用`subscribe`方法来检测`id`的变化，并据此重新获取英雄。
|
||||
|
||||
h4#reuse Observable <i>params</i> and component re-use
|
||||
|
||||
h4#reuse Observable<i>参数</i>与组件复用
|
||||
h4#reuse
|
||||
p Observable <i>params</i> and component re-use
|
||||
p Observable<i>参数</i>与组件复用
|
||||
|
||||
:marked
|
||||
In this example, you retrieve the route params from an `Observable`.
|
||||
|
|
@ -2027,8 +2027,9 @@ figure.image-display
|
|||
|
||||
这儿可选的`foo`路由参数人畜无害，并继续被忽略。
|
||||
|
||||
h3#route-animation Adding animations to the routed component
|
||||
h3#route-animation 为路由组件添加动画
|
||||
h3#route-animation
|
||||
p Adding animations to the routed component
|
||||
p 为路由组件添加动画
|
||||
:marked
|
||||
The heroes feature module is almost complete, but what is a feature without some smooth transitions?
|
||||
|
||||
|
|
@ -2792,8 +2793,9 @@ a#can-activate-guard
|
|||
|
||||
+makeExcerpt('src/app/admin/admin-routing.module.1.ts (admin routing)', 'admin-routes')
|
||||
|
||||
h3#component-less-route <i>Component-Less Route</i>: grouping routes without a component
|
||||
h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行分组
|
||||
h3#component-less-route
|
||||
p <i>Component-Less Route</i>: grouping routes without a component
|
||||
p <i>无组件路由</i>: 不借助组件对路由进行分组
|
||||
:marked
|
||||
Looking at the child route under the `AdminComponent`,there is a `path` and a `children`
|
||||
property but it's not using a `component`.
|
||||
|
|
@ -2962,8 +2964,9 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
|
|||
它们所需的守卫和服务提供商**必须**在模块一级提供。这让路由器在导航过程中可以通过`Injector`来取得这些服务。
|
||||
同样的规则也适用于[异步加载](#asynchronous-routing)的特性模块。
|
||||
|
||||
h3#can-activate-child-guard <i>CanActivateChild</i>: guarding child routes
|
||||
h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
|
||||
h3#can-activate-child-guard
|
||||
p <i>CanActivateChild</i>: guarding child routes
|
||||
p <i>CanActivateChild</i>: 守卫子路由
|
||||
:marked
|
||||
You can also protect child routes with the `CanActivateChild` guard.
|
||||
The `CanActivateChild` guard is similar to the `CanActivate` guard.
|
||||
|
|
@ -2988,9 +2991,9 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
|
|||
|
||||
+makeExcerpt('src/app/admin/admin-routing.module.3.ts (excerpt)', 'can-activate-child')
|
||||
|
||||
h3#can-deactivate-guard <i>CanDeactivate</i>: handling unsaved changes
|
||||
|
||||
h3#can-deactivate-guard <i>CanDeactivate</i>：处理未保存的更改
|
||||
h3#can-deactivate-guard
|
||||
p <i>CanDeactivate</i>: handling unsaved changes
|
||||
p <i>CanDeactivate</i>：处理未保存的更改
|
||||
|
||||
:marked
|
||||
Back in the "Heroes" workflow, the app accepts every change to a hero immediately without hesitation or validation.
|
||||
|
|
@ -3152,8 +3155,9 @@ a#CanDeactivate
|
|||
现在，我们已经给了用户一个能保护未保存更改的安全守卫。
|
||||
|
||||
<a id="Resolve"></a>
|
||||
h3#resolve-guard <i>Resolve</i>: pre-fetching component data
|
||||
h3#resolve-guard <i>解析</i>: 提前获取组件数据
|
||||
h3#resolve-guard
|
||||
p <i>Resolve</i>: pre-fetching component data
|
||||
p <i>解析</i>: 提前获取组件数据
|
||||
:marked
|
||||
In the `Hero Detail` and `Crisis Detail`, you waited until the route was activated to fetch the respective hero or crisis.
|
||||
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@ block includes
|
|||
运行<live-example>在线例子</live-example>来试用本页的代码。
|
||||
|
||||
.l-main-section
|
||||
h2#report-issues Reporting vulnerabilities
|
||||
|
||||
h2#report-issues 举报漏洞
|
||||
h2#report-issues
|
||||
p Reporting vulnerabilities
|
||||
p 举报漏洞
|
||||
|
||||
:marked
|
||||
Email us at [security@angular.io](mailto:security@angular.io) to report vulnerabilities in
|
||||
|
|
@ -65,9 +65,9 @@ h2#report-issues 举报漏洞
|
|||
要了解关于“谷歌如何处理安全问题”的更多信息，参见[谷歌的安全哲学](https://www.google.com/about/appsecurity/)。
|
||||
|
||||
.l-main-section
|
||||
h2#best-practices Best practices
|
||||
|
||||
h2#best-practices 最佳实践
|
||||
h2#best-practices
|
||||
p Best practices
|
||||
p 最佳实践
|
||||
|
||||
:marked
|
||||
* **Keep current with the latest Angular library releases.**
|
||||
|
|
@ -91,9 +91,9 @@ h2#best-practices 最佳实践
|
|||
**避免使用本文档中带“[_安全风险_](#bypass-security-apis)”标记的Angular API。**
|
||||
|
||||
.l-main-section
|
||||
h2#xss Preventing cross-site scripting (XSS)
|
||||
|
||||
h2#xss 防范跨站脚本(XSS)攻击
|
||||
h2#xss
|
||||
p Preventing cross-site scripting (XSS)
|
||||
p 防范跨站脚本(XSS)攻击
|
||||
|
||||
:marked
|
||||
[Cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers
|
||||
|
|
@ -267,9 +267,9 @@ block html-sanitization
|
|||
|
||||
block bypass-security-apis
|
||||
.l-main-section
|
||||
h2#bypass-security-apis Trusting safe values
|
||||
|
||||
h2#bypass-security-apis 信任安全的值
|
||||
h2#bypass-security-apis
|
||||
p Trusting safe values
|
||||
p 信任安全的值
|
||||
|
||||
:marked
|
||||
Sometimes applications genuinely need to include executable code, display an `<iframe>` from some
|
||||
|
|
@ -333,9 +333,9 @@ block bypass-security-apis
|
|||
block http
|
||||
.l-main-section
|
||||
|
||||
h2#http HTTP-level vulnerabilities
|
||||
|
||||
h2#http HTTP级别的漏洞
|
||||
h2#http
|
||||
p HTTP-level vulnerabilities
|
||||
p HTTP级别的漏洞
|
||||
|
||||
:marked
|
||||
Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request
|
||||
|
|
@ -473,9 +473,9 @@ block http
|
|||
要学习更多这方面的知识，请参见[谷歌Web安全博客文章](https://security.googleblog.com/2011/05/website-security-for-webmasters.html)的XSSI小节。
|
||||
|
||||
.l-main-section
|
||||
h2#code-review Auditing angular applications
|
||||
|
||||
h2#code-review 审计Angular应用程序
|
||||
h2#code-review
|
||||
p Auditing angular applications
|
||||
p 审计Angular应用程序
|
||||
|
||||
:marked
|
||||
Angular applications must follow the same security principles as regular web applications, and
|
||||
|
|
|
|||
|
|
@ -675,9 +675,9 @@ block hero-list-comp-add-hero
|
|||
+makeExample('server-communication/ts/src/app/toh/hero-list.component.ts', 'addHero', 'src/app/toh/hero-list.component.ts (addHero)')(format=".")
|
||||
|
||||
+ifDocsFor('ts')
|
||||
h2#promises Fall back to promises
|
||||
|
||||
h2#promises 倒退为承诺 (Promise)
|
||||
h2#promises
|
||||
p Fall back to promises
|
||||
p 倒退为承诺 (Promise)
|
||||
:marked
|
||||
Although the Angular `http` client API returns an `Observable<Response>` you can turn it into a
|
||||
[`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
|
||||
|
|
@ -757,8 +757,9 @@ block hero-list-comp-add-hero
|
|||
要理解订阅的实现和效果，请看 [Ben Lesh 关于可观察对象的演讲](https://www.youtube.com/watch?v=3LKMwkuK0ZE)
|
||||
或者他在 [egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises) 的课程。
|
||||
|
||||
h2#cors Cross-Origin Requests: Wikipedia example
|
||||
h2#cors 跨域请求：Wikipedia 范例
|
||||
h2#cors
|
||||
p Cross-Origin Requests: Wikipedia example
|
||||
p 跨域请求：Wikipedia 范例
|
||||
:marked
|
||||
You just learned how to make `XMLHttpRequests` using the !{_Angular_Http} service.
|
||||
This is the most common approach for server communication, but it doesn't work in all scenarios.
|
||||
|
|
|
|||
|
|
@ -262,9 +262,9 @@ block notable-differences
|
|||
|
||||
具有新的[模板表达式运算符](#expression-operators)，比如`|`和`?.`
|
||||
|
||||
h3#expression-context Expression context
|
||||
|
||||
h3#expression-context 表达式上下文
|
||||
h3#expression-context
|
||||
p Expression context
|
||||
p 表达式上下文
|
||||
|
||||
block template-expressions-cannot
|
||||
:marked
|
||||
|
|
@ -2585,9 +2585,9 @@ figure.image-display
|
|||
从`HeroDetailComponent`角度来看，`HeroDetailComponent.deleteRequest`是个**输出**属性，
|
||||
因为事件从那个属性流*出*，流向模板绑定语句中的处理器。
|
||||
|
||||
h3#aliasing-io Aliasing input/output properties
|
||||
|
||||
h3#aliasing-io 给输入/输出属性起别名
|
||||
h3#aliasing-io
|
||||
p Aliasing input/output properties
|
||||
p 给输入/输出属性起别名
|
||||
|
||||
:marked
|
||||
Sometimes we want the public name of an input/output property to be different from the internal name.
|
||||
|
|
|
|||
Loading…
Reference in New Issue