VS2015集成完毕;第三方资源汉化完毕

This commit is contained in:
Zhicheng Wang 2016-06-18 14:35:32 +08:00
parent d1db5bfb72
commit e3b33ab31c
2 changed files with 94 additions and 75 deletions

View File

@ -4,18 +4,19 @@ include ../_util-fns
:marked
Some developers prefer Visual Studio as their Interactive Development Environment (IDE).
一些开发者喜欢使用Visual Studio。
有些开发者喜欢用Visual Studio。
This cookbook describes the steps required to set up and use the
Angular 2 QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.
本烹饪书介绍了在Visual Studio 2015的一个ASP.NET 4.x项目中使用Angular 2快速开始文件的方法和步骤。
本烹饪宝典介绍了在Visual Studio 2015的ASP.NET 4.x项目中用Angular 2实现“快速起步”所需的步骤。
.l-sub-section
:marked
There is no *live example* for this cookbook because it describes Visual Studio, not the application.
本烹饪书没有*在线例子*因为它介绍的是Visual Studio不是关于应用程序的。
本烹饪宝典中没有*在线例子*因为它介绍的是Visual Studio而不是应用程序。
.l-main-section
<a id="asp-net-4"></a>
:marked
@ -26,7 +27,7 @@ include ../_util-fns
The steps for setting up the QuickStart files with an ASP.NET 4.x project in
Visual Studio 2015 are as follows:
在Visual Studio里的一个ASP.NET 4.x项目中设置快速开始文件的步骤如下:
在Visual Studio的ASP.NET 4.x项目中实现“快速起步”的步骤如下:
:marked
- [Prerequisite](#prereq): Install Node.js
@ -35,19 +36,19 @@ include ../_util-fns
- [Step 1](#download): Download the QuickStart files
- [第一步](#download): 下载快速开始文件
- [第一步](#download): 下载“快速起步”的文件
- [Step 2](#setup-vs): Set up Visual Studio for TypeScript
- [第二步](#setup-vs): 为TypeScript设置Visual Studio
- [第二步](#setup-vs): 设置Visual Studio以支持TypeScript
- [Step 3](#create-project): Create the Visual Studio ASP.NET project
- [第三步](#create-project): 建Visual Studio ASP.NET项目
- [第三步](#create-project): 建Visual Studio ASP.NET项目
- [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder
- [第四步](#copy): 拷贝快速开始文件到ASP.NET项目所在的目录中
- [第四步](#copy): 把“快速起步”中的文件拷贝到ASP.NET的项目目录中
- [Step 5](#restore): Restore required packages
@ -59,55 +60,60 @@ include ../_util-fns
- [Step 7](#build-and-run): Build and run the app
- [第七步](#build-and-run): 编译和运行应用程序
- [第七步](#build-and-run): 构建和运行应用程序
.l-main-section
h2#prereq Prerequisite: Node.js
h2#prereq 前提条件: Node.js
:marked
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
如果你的电脑里没有Node.js®和npm安装**[它们](https://nodejs.org/en/download/)**
如果你的电脑里没有Node.js®和npm请安装**[它们](https://nodejs.org/en/download/)**。
.l-sub-section
:marked
**Verify that you are running node version `4.4.x` - `5.x.x`, and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
在终端或者控制台运行`node -v`和`npm -v`**确认你的Node版本为`4.4.x` - `5.x.x`npm的版本为`3.x.x`**。老版本会引起错误。
在终端或者控制台运行`node -v`和`npm -v`**确认你的Node版本为`4.4.x` - `5.x.x`npm的版本为`3.x.x`**。老版本会引起错误。
.l-main-section
h2#download Step 1: Download the QuickStart files
h2#download 第一步: 现在快速开始文件
h2#download 第一步: 现在“快速起步”文件
:marked
[Download the QuickStart source](https://github.com/angular/quickstart)
from github. If you downloaded as a zip file, extract the files.
从github[下载快速开始源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩zip文件解压它。
从github[下载“快速起步”的源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩zip文件解压它。
.l-main-section
h2#setup-vs Step 2: Set up Visual Studio for TypeScript
h2#setup-vs 第二步为TypeScript设置Visual Studio
h2#setup-vs 第二步设置Visual Studio以支持TypeScript
:marked
Ensure you have the latest version of Visual Studio 2015 installed.
Then open Visual Studio and install the latest set of TypeScript tools as follows:
认你的Visual Studio 2015是最新版本。然后打开Visual Studio病安装最新的TypeScript工具
保你的Visual Studio 2015是最新版本然后打开Visual Studio并安装最新的TypeScript工具
* Open `Tools` | `Extensions and Updates`.
* 打开`Tools` | `Extensions and Updates`。
* Select `Online` in the tree on the left.
* 选择在左侧目录树中选择`Online`。
* 在左侧目录树中选择`Online`。
* Search for `TypeScript` using the search box in the upper right.
* 使用右上角的搜索框搜索`TypeScript`。
* 在右上角的搜索框中搜`TypeScript`。
* Select the most current available TypeScript version.
@ -115,28 +121,29 @@ h2#setup-vs 第二步为TypeScript设置Visual Studio
* Download and install the package.
* 下载和安装TypeScript
* 下载并安装依赖包
.l-main-section
h2#create-project Step 3: Create the Visual Studio ASP.NET project
h2#create-project 第三步: 建Visual Studio ASP.NET项目
h2#create-project 第三步: 建Visual Studio ASP.NET项目
:marked
Create the ASP.NET 4.x project as follows:
按照下面的步骤新建ASP.NET 4.x项目:
按照下面的步骤创建ASP.NET 4.x项目:
* In Visual Studio, select `File` | `New` | `Project` from the menu.
* 在Visual Studio的目录中,选择`File` | `New` | `Project`。
* 在Visual Studio中选择`File` | `New` | `Project`菜单
* In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`.
* 在模板树中,选择`Templates` | `Visual C#` (or `Visual Basic`) | `Web`
* 在模板树中,选择`Templates` | `Visual C#`(或`Visual Basic`) | `Web`菜单
* Select the `ASP.NET Web Application` template, give the project a name, and click OK.
* 选择`ASP.NET Web Application`模板,输入一个项目名点击OK。
* 选择`ASP.NET Web Application`模板,输入项目名,点击OK”按钮
* Select the desired ASP.NET 4.5.2 template and click OK.
@ -147,51 +154,58 @@ h2#create-project 第三步: 新建Visual Studio ASP.NET项目
In this cookbook we'll select the `Empty` template with no added folders,
no authentication and no hosting. Pick the template and options appropriate for your project.
本烹饪书选择了`空白`模板,没有任何附加的目录,没有身份验证,没有服务器托管。为你的项目选择合适的模板和选项。
本烹饪宝典选择了`Empty`模板,它没有添加过任何目录,没有身份验证,没有服务器托管。为你的项目选择合适的模板和选项。
.l-main-section
h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
h2#copy 第四步: 拷贝快速开始的文件到ASP.NET项目所在的目录
h2#copy 第四步: 拷贝“快速起步”的文件到ASP.NET项目所在的目录
:marked
Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file.
Include the files in the Visual Studio project as follows:
拷贝从github下载的快速开始文件到那个包含`.csproj`文件的目录中。按照下面的步骤在Visual Studio里添加这些文件
拷贝从github下载的“快速起步”文件到包含`.csproj`文件的目录中。按照下面的步骤把它们加到Visual Studio中
* Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.
* 在Solution Explorer中点击`Show All Files`按钮,显示项目目录中所有隐藏文件。
* 在Solution Explorer中点击`Show All Files`按钮,显示项目中所有隐藏文件。
* Right-click on each folder/file to be included in the project and select `Include in Project`.
Minimally, include the following folder/files:
* 右键点击每个目录和文件,选择`Include in Project`。
最少添加下列文件:
最少添加下列文件:
* app folder (answer *No* if asked to search for TypeScript Typings)
* app目录如果询问是否搜索TypeScript类型回答*No*
* app目录如果询问是否要搜索TypeScript类型回答*No*
* styles.css
* styles.css
* index.html
* index.html
* package.json
* package.json
* tsconfig.json
* tsconfig.json
* typings.json
* typings.json
.l-main-section
h2#restore Step 5: Restore the required packages
h2#restore 第五步: 恢复需要的包
:marked
Restore the packages required for an Angular application as follows:
@ -200,13 +214,14 @@ h2#restore 第五步: 恢复需要的包
* Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`.
<br>This uses `npm` to install all of the packages defined in the `package.json` file.
It may take some time.
* 在Solution Explorer里面右键点击`package.json`,选择`Restore Packages`。
<br>这样Visual Studio会使用`npm`那安装所有在`package.json`文件中定义的包.
可能需要等待一下。
* 在Solution Explorer中右键点击`package.json`,选择`Restore Packages`。
<br>这样Visual Studio会使用`npm`来安装在`package.json`中定义的所有包.
这可能需要花一点时间。
* If desired, open the Output window (`View` | `Output`) to watch the npm commands execute.
* 如果愿意打开Output window (`View` | `Output`)来查看npm命令的执行情况。
* 如果愿意打开Output窗口(`View` | `Output`)来监控npm命令的执行情况。
* Ignore the warnings.
@ -214,7 +229,7 @@ h2#restore 第五步: 恢复需要的包
* When the restore is finished, a message should say: `npm command completed with exit code 0`.
* 当恢复完成后,应该会出现一条信息:`npm command completed with exit code 0`.
* 当恢复完成后,将会出现一条消息:`npm command completed with exit code 0`.
* Click the `Refresh` icon in Solution Explorer.
@ -222,26 +237,27 @@ h2#restore 第五步: 恢复需要的包
* **Do not** include the `node_modules` folder in the project. Let it be a hidden project project folder.
* **不要**将`node_modules`目录添加到项目,让它隐藏。
* **不要**将`node_modules`目录添加到项目中,让它隐藏。
.alert.is-important
:marked
An error such as "*@angular/compiler is not in the npm registry*" suggests that Visual Studio 2015
is using an older version of npm. Update to the latest installed version of npm:
"*@angular/compiler is not in the npm registry*"错误表明Visual Studio 2015使用了老版本的npm。安装下面的步骤安装最新版本的npm
"*@angular/compiler is not in the npm registry*"这个错误表明Visual Studio 2015使用了老版本的npm。按照下面的步骤安装最新版本的npm
* `Tools` | `Options` to open the Options dialog.
* `Tools` | `Options`来打开选项对话框。
* `Tools` | `Options`来打开选项对话框。
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
* 在左侧的树状目录中,选择`Projects and Solutions` | `External Web Tools`.
* 在左侧的树状目录中,选择`Projects and Solutions` | `External Web Tools`
* On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
use the external tools (such as npm) found in your path before using its own version of the external tools.
* 在右侧,把`$(PATH)`项移动到`$(DevEnvDir`)上面这样告诉Visual Studio优先使用在你的路径中找到的外来工具比如npm
* 在右侧,把`$(PATH)`项移动到`$(DevEnvDir`)上面,这样就会告诉Visual Studio优先在你的路径中找外来工具比如npm
* Click OK to close the dialog.
@ -249,17 +265,18 @@ h2#restore 第五步: 恢复需要的包
* Restart Visual Studio for this change to take effect.
* 重新启动Visual Studio来让上面的变化生效。
* 重新启动Visual Studio来让这些修改生效。
.l-main-section
h2#edit-config Step 6: Edit the TypeScript configuration file
h2#edit-config 第六步编辑TypeScript配置文件
:marked
For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file
as shown here.
在Visual Studio 2015里我们必须在TypeScript配置文件(`tsconfig.json`中添加`"compileOnSave": true`
在Visual Studio 2015里我们必须在TypeScript的配置文件(`tsconfig.json`)中添加`"compileOnSave": true`
+makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')
@ -276,16 +293,16 @@ h2#build-and-run 第七步:编译和运行应用程序
:marked
Click the Run button or press F5 to build and run the application.
点击运行按钮或按F5键来编译和运行应用程序。
点击运行按钮或按F5键来编译和运行应用程序。
This launches the default browser and runs the QuickStart sample application.
这样会启动默认浏览器并在里面运行快速开始应用程序。
这样会启动默认浏览器并在里面运行“快速起步”范例程序。
Try editing any of the project files. *Save* and refresh the browser to
see the changes.
试试编辑任何项目文件。*保存*并刷新浏览器查看效果。
尝试编辑任何项目文件,*保存*并刷新浏览器来查看效果。
.alert.is-important
:marked
@ -294,11 +311,12 @@ h2#build-and-run 第七步:编译和运行应用程序
Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518).
像“*Property map does not exist on type Observable<Response>*”和“*Observable cannot be found*”这样的编译错误
说明Visual Studio是老版本。退出Visual Studio按照[这里的指南](https://github.com/Microsoft/TypeScript/issues/8518)升级Visual Studio。
说明Visual Studio的版本太老了。退出Visual Studio按照[这里的指南](https://github.com/Microsoft/TypeScript/issues/8518)升级Visual Studio。
You'll be asked to replace the file
你会被问是否覆盖文件。
它会问你是否要覆盖文件。
code-example.
c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js
@ -311,12 +329,13 @@ h2#build-and-run 第七步:编译和运行应用程序
h2#routing Note on Routing Applications
h2#routing 应用程序的路由
:marked
If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*.
Look at the address bar. Does it contain a navigation url (a "deep link")?
We'll have to configure the server to return `index.html` for these requests.
Until we do, remove the navigation path and refresh again.
如果这个应用程序使用Angular路由器浏览器刷新可能会返回一个*404 - Page Not Found*。查看一下地址栏它是否包含一个导航url一个“深链接”)?
我们必须要配置服务器,让它为这些请求返回`index.html`。在此之前,删除导航路径,再次刷新。
如果这个应用程序使用了Angular路由器刷新浏览器时可能会返回一个*404 - Page Not Found*。查看一下地址栏它是否包含一个导航url“深链接”
我们必须配置服务器,让它为这些请求直接返回`index.html`的内容。在配置完之前,请暂时删除导航路径,回到首页,再进行刷新。

View File

@ -9,15 +9,15 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
var vm = this;
vm.fbObject = {
"community": [{
"社区": [{
"groups": {
"icon": "",
"resources": [{
"rev": true,
"title": "Angular Beers",
"title": "Angular啤酒花园",
"url": "http://www.meetup.com/AngularJS-Beers/"
}, {"rev": true, "title": "Angular Camp", "url": "http://angularcamp.org/"}],
"title": "Groups"
}, {"rev": true, "title": "Angular训练营", "url": "http://angularcamp.org/"}],
"title": "讨论组"
},
"podcasts": {
"icon": "",
@ -40,13 +40,13 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 2,
"logo": "",
"rev": true,
"title": "Adventures in Angular",
"title": "Angular探险",
"url": "https://devchat.tv/adventures-in-angular"
}],
"title": "Podcasts"
}
}],
"development": [{
"开发": [{
"tooling": {
"icon": "",
"resources": [{
@ -61,7 +61,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 1,
"logo": "https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png",
"rev": true,
"title": "Angular Universal",
"title": "Angular统一平台",
"url": "https://github.com/angular/universal"
}, {
"desc": "Lightweight development only node server",
@ -82,10 +82,10 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 4,
"logo": "",
"rev": true,
"title": "Universal for ASP.NET",
"title": "统一平台(ASP.NET版)",
"url": "https://github.com/aspnet/nodeservices"
}],
"title": "Tooling"
"title": "工具"
}
}, {
"ide": {
@ -112,7 +112,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "IntelliJ IDEA",
"url": "https://www.jetbrains.com/idea/"
}],
"title": "IDEs"
"title": "IDE"
}
}, {
"data": {
@ -139,7 +139,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "Apollo",
"url": "http://docs.apollostack.com/apollo-client/angular2.html"
}],
"title": "Data Libraries"
"title": "数据访问库"
}
}, {
"ui": {
@ -194,7 +194,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "ng2-bootstrap",
"url": "http://valor-software.com/ng2-bootstrap/"
}],
"title": "UI Components"
"title": "UI组件"
}
}, {
"platform": {
@ -235,10 +235,10 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"title": "Windows (UWP)",
"url": "http://github.com/preboot/angular2-universal-windows-app"
}],
"title": "Cross-Platform Development"
"title": "跨平台开发"
}
}],
"education": [{
"教育": [{
"online": {
"icon": "",
"resources": [{
@ -274,10 +274,10 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 5,
"logo": "",
"rev": true,
"title": "Frontend Masters",
"title": "前端大师课",
"url": "https://frontendmasters.com/courses/angular-2/"
}],
"title": "Online Training"
"title": "在线培训"
}
}, {
"workshops": {
@ -294,7 +294,7 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 1,
"logo": "",
"rev": true,
"title": "Angular Boot Camp",
"title": "Angular训练营",
"url": "https://angularbootcamp.com"
}, {
"desc": "",
@ -308,10 +308,10 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 3,
"logo": "",
"rev": true,
"title": "Frontend Masters",
"title": "前端大师课",
"url": "https://frontendmasters.com/workshops/angular-2/"
}],
"title": "Workshops & Onsite Training"
"title": "工作室与现场培训"
}
}, {
"books": {
@ -321,21 +321,21 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 0,
"logo": "",
"rev": true,
"title": "Packt Publishing",
"title": "Packt出版社",
"url": "https://www.packtpub.com/all/?search=angular%202#"
}, {
"desc": "",
"id": 1,
"logo": "",
"rev": true,
"title": "Manning Publications",
"title": "图灵出版社",
"url": "https://www.manning.com/search?q=angular"
}, {
"desc": "",
"id": 2,
"logo": "",
"rev": true,
"title": "O'Reilly Media",
"title": "O'Reilly出版社",
"url": "https://ssearch.oreilly.com/?q=angular+2&x=0&y=0"
}, {
"desc": "",
@ -356,24 +356,24 @@ angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', func
"id": 5,
"logo": "",
"rev": true,
"title": "Angular 2 Book",
"title": "Angular 2丛书",
"url": "https://leanpub.com/angular2-book"
}, {
"desc": "",
"id": 6,
"logo": "",
"rev": true,
"title": "Becoming a Ninja with Angular 2",
"title": "Angular 2忍者训练",
"url": "https://books.ninja-squad.com/angular2"
}, {
"desc": "",
"id": 7,
"logo": "",
"rev": true,
"title": "Practical Angular 2",
"title": "Angular 2实战",
"url": "https://leanpub.com/practical-angular-2"
}],
"title": "Books"
"title": "书籍"
}
}]
};