Visual Studio 2015,Angular2进行开发快速入门
2016-11-01 15:02
423 查看
本文介绍了在
Visual Studio 2015 的 ASP.NET 4.x 项目中,用 Angular 实现“快速起步”所需的步骤。
ASP.NET
4.x 项目
在 Visual Studio 的 ASP.NET 4.x 项目中实现“快速起步”的步骤如下:
前提条件 : 安装 Node.js
第一步 : 下载“快速起步”的文件
第二步 : 设置 Visual Studio ,以支持 TypeScript
第三步 : 创建 Visual Studio ASP.NET 项目
第四步 : 把“快速起步”中的文件拷贝到 ASP.NET 的项目目录中
第五步 : 恢复需要的包
第六步 : 编辑 TypeScript 配置文件
第七步 : 构建和运行应用程序
如果你的电脑里没有 Node.js® 和 npm ,请安装 它们 。
在终端或者控制台中运行
npm 的版本为
从 github 下载“快速起步”的源代码 。如果下载的是一个压缩的 zip 文件,解压它。
确保你的 Visual Studio 2015 是最新版本,然后打开 Visual Studio 并安装最新的 TypeScript 工具:
打开
在左侧目录树中选择
在右上角的搜索框中搜
选择最新版本的 TypeScript 。
下载并安装依赖包。
按照下面的步骤创建 ASP.NET 4.x 项目 :
在 Visual Studio 中,选择
在模板树中,选择
选择
选择自己喜欢的 ASP.NET 4.5.2 模板,点击 OK 。
本烹饪宝典选择了
拷贝从 github 下载的“快速起步”文件到包含
Visual Studio 中:
在 Solution Explorer 中点击
右键点击每个目录和文件,选择
app 目录(如果询问是否要搜索 TypeScript 类型,回答 No )
styles.css
index.html
package.json
tsconfig.json
typings.json
按下面的步骤恢复 Angular 应用程序需要的包:
在 Solution Explorer 中右键点击
这样, Visual Studio 会使用
. 这可能需要花一点时间。
如果愿意,打开 Output 窗口 (
来监控 npm 命令的执行情况。
忽略所有警告。
当恢复完成后,将会出现一条消息:
在 Solution Explorer 里,点击
不要 将
"@angular/compiler is not in the npm registry" 这个错误表明 Visual Studio 2015 使用了老版本的 npm 。按照下面的步骤安装最新版本的 npm :
在左侧的树状目录中,选择
在右侧,把
上面,这样就会告诉 Visual Studio 优先在你的路径中查找外来工具(比如 npm )。
点击 OK ,关闭对话框。
重新启动 Visual Studio 来让这些修改生效。
在 Visual Studio 2015 里,必须在 TypeScript 的配置文件 (
中添加
COPY CODE
修改上面的设置后, 退出 Visual Studio ,再打开它并加载项目。
将 index.html 设置为启动页面:在 Solution Explorer 中,右键点击
点击“运行”按钮或按 F5 键来编译和运行应用程序。
这样会启动默认浏览器并在里面运行“快速起步”范例程序。
尝试编辑任何项目文件, 保存 并刷新浏览器来查看效果。
像“ Property
not exist on type
cannot be found ”这样的编译错误 说明 Visual Studio 的版本太老了。退出 Visual Studio ,按照 这里的指南 升级
Visual Studio 。
它会问你是否要覆盖文件。
COPY CODE
这个操作需要管理员权限。
如果这个应用程序使用了 Angular 路由器,刷新浏览器时可能会返回一个 404 - Page Not Found 。查看一下地址栏,它是否包含一个导航 url (“深链接”)? 我们必须配置服务器,让它为这些请求直接返回
Visual Studio 2015 的 ASP.NET 4.x 项目中,用 Angular 实现“快速起步”所需的步骤。
ASP.NET
4.x 项目
在 Visual Studio 的 ASP.NET 4.x 项目中实现“快速起步”的步骤如下:
前提条件 : 安装 Node.js
第一步 : 下载“快速起步”的文件
第二步 : 设置 Visual Studio ,以支持 TypeScript
第三步 : 创建 Visual Studio ASP.NET 项目
第四步 : 把“快速起步”中的文件拷贝到 ASP.NET 的项目目录中
第五步 : 恢复需要的包
第六步 : 编辑 TypeScript 配置文件
第七步 : 构建和运行应用程序
前提条件 : Node.js
如果你的电脑里没有 Node.js® 和 npm ,请安装 它们 。在终端或者控制台中运行
node -v和
npm -v, 请确认你的 Node 版本为
4.4.x-
5.x.x,
npm 的版本为
3.x.x。老版本会引起错误。
第一步 : 现在“快速起步”文件
从 github 下载“快速起步”的源代码 。如果下载的是一个压缩的 zip 文件,解压它。
第二步:设置 Visual Studio ,以支持 TypeScript
确保你的 Visual Studio 2015 是最新版本,然后打开 Visual Studio 并安装最新的 TypeScript 工具:打开
Tools|
Extensions and Updates。
在左侧目录树中选择
Online。
在右上角的搜索框中搜
TypeScript。
选择最新版本的 TypeScript 。
下载并安装依赖包。
第三步 : 创建 Visual Studio ASP.NET 项目
按照下面的步骤创建 ASP.NET 4.x 项目 :在 Visual Studio 中,选择
File|
New|
Project菜单。
在模板树中,选择
Templates|
Visual C#( 或
Visual Basic) |
Web菜单。
选择
ASP.NET Web Application模板,输入项目名,点击“ OK ”按钮。
选择自己喜欢的 ASP.NET 4.5.2 模板,点击 OK 。
本烹饪宝典选择了
Empty模板,它没有添加过任何目录,没有身份验证,没有服务器托管。为你的项目选择合适的模板和选项。
第四步 : 拷贝“快速起步”的文件到 ASP.NET 项目所在的目录
拷贝从 github 下载的“快速起步”文件到包含 .csproj文件的目录中。按照下面的步骤把它们加到
Visual Studio 中:
在 Solution Explorer 中点击
Show All Files按钮,显示项目中所有隐藏文件。
右键点击每个目录和文件,选择
Include in Project。 最少要添加下列文件:
app 目录(如果询问是否要搜索 TypeScript 类型,回答 No )
styles.css
index.html
package.json
tsconfig.json
typings.json
第五步 : 恢复需要的包
按下面的步骤恢复 Angular 应用程序需要的包:在 Solution Explorer 中右键点击
package.json,选择
Restore Packages。
这样, Visual Studio 会使用
npm来安装在
package.json中定义的所有包
. 这可能需要花一点时间。
如果愿意,打开 Output 窗口 (
View|
Output)
来监控 npm 命令的执行情况。
忽略所有警告。
当恢复完成后,将会出现一条消息:
npm command completed with exit code 0.
在 Solution Explorer 里,点击
Refresh图标。
不要 将
node_modules目录添加到项目中,让它隐藏。
"@angular/compiler is not in the npm registry" 这个错误表明 Visual Studio 2015 使用了老版本的 npm 。按照下面的步骤安装最新版本的 npm :
Tools|
Options来打开“选项”对话框。
在左侧的树状目录中,选择
Projects and Solutions|
External Web Tools。
在右侧,把
$(PATH)项移动到
$(DevEnvDir)
上面,这样就会告诉 Visual Studio 优先在你的路径中查找外来工具(比如 npm )。
点击 OK ,关闭对话框。
重新启动 Visual Studio 来让这些修改生效。
第六步:编辑 TypeScript 配置文件
在 Visual Studio 2015 里,必须在 TypeScript 的配置文件 (tsconfig.json)
中添加
"compileOnSave": true:
tsconfig.json (scripts)
COPY CODE{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"compileOnSave": true
}
修改上面的设置后, 退出 Visual Studio ,再打开它并加载项目。
第七步:编译和运行应用程序
将 index.html 设置为启动页面:在 Solution Explorer 中,右键点击 index.html,选择选项
Set As Start Page。
点击“运行”按钮或按 F5 键来编译和运行应用程序。
这样会启动默认浏览器并在里面运行“快速起步”范例程序。
尝试编辑任何项目文件, 保存 并刷新浏览器来查看效果。
像“ Property
mapdoes
not exist on type
Observable<Response>”和“ Observable
cannot be found ”这样的编译错误 说明 Visual Studio 的版本太老了。退出 Visual Studio ,按照 这里的指南 升级
Visual Studio 。
它会问你是否要覆盖文件。
COPY CODE
c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js
这个操作需要管理员权限。
应用程序的路由
如果这个应用程序使用了 Angular 路由器,刷新浏览器时可能会返回一个 404 - Page Not Found 。查看一下地址栏,它是否包含一个导航 url (“深链接”)? 我们必须配置服务器,让它为这些请求直接返回 index.html的内容。在配置完之前,请暂时删除导航路径,回到首页,再进行刷新。
相关文章推荐
- Visual Studio 2015,Angular2进行开发快速入门
- SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发
- Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一)
- SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发
- visual studio 2015 搭建python开发环境,python入门到精通[三]
- 解读angular2官方文档的“快速上手“章节的开发环境,进行配置启动项目(图文)
- Visual Studio 2015 插件开发 从入门到放弃(一)
- SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发
- 使用Visual Studio快速开发STM32F4-Discovery探索板入门
- Visual Studio 2015 插件开发入门
- visual studio 2015 搭建python开发环境,python入门到精通[三]
- Visual Studio 2015 和 Apache Cordova 跨平台开发入门(一)
- Visual Studio 2015 使用ODP.net进行EF开发
- Realview MDK4.0 进行2440开发快速入门
- SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发
- Android开发者如何快速进行入门开发
- DirectShow开发快速入门之数据流的流动
- 使用 IBM Rational Portfolio Manager 进行业务驱动开发入门简介
- Eclipse平台利用SWT Designer6.0进行图形界面开发入门--搭建开发环境篇
- 使用 Eclipse 向导进行快速开发