使用Angular.JS和ASP.NET创建单页应用

jopen 10年前

  英文原文:Creating Single Page Apps With Angular.JS and ASP.NET

  周三(4 月 2 日)的 Build 大会上,David Catuhe 和 Jon Galloway 做了一个关于将 AngularJS 用于 ASP.NET 应用程序的演讲。他们为开发者提供了一种方式,可以快速构建流行的单页 Web 应用。

  Angular 是由 Google 创建并运营的开源项目。顾名思义,这是一个基于 JavaScript 的库,遵循模型-视图-控制器(MVC)设计模式。如 Catuhe 和 Galloway 所说,Angular 使用依赖注入,使 ASP.NET 应用更加强大。要想启用 Angular,只需要引入单个文件 angular.min.js。(NuGet 用户可以获取最新版本(beta)或稳定版本。)

  他们指出,Angular 并不是一个非此即彼的方案,你完全可以仅使用其中的页面选取功能。不管怎样,Catuhe 和 Galloway 都建议在项目的 Scripts 文件夹下创建一个“apps”目录,来组织文件。

  压缩 JS 文件时需要格外注意:由于会影响 Angular 的依赖注入,因此默认情况下对应用代码进行压缩会破坏应用程序本身。(Angular 教程文档的“A Note on Minification”一节对此进行了详细介绍。)

  要真正在页面中激活 Angular,需要在 html 标签中添加“ng-app”:

<html ng-app … >

  这可以通知 Angular 准备好做某些事情。Angular 通过其自带的轻量级版本的 jQuery,使用$http 加载文件。如果项目已经安装了 jQuery,Angular 将会使用该版本,以保持一致性。

  Catuhe 和 Galloway 还展示了一个示例应用,一个显示并存储“万智牌”信息的单页应用(SPA)。单页应用只用一个视图来构建 UI,而 Angular 本身使用路由来定义这些视图。

  由于 Angular 中过深的链接会使 MVC 路由造成冲突,因此他们建议使用一个路由:

routes.MapRoute (               name: "Catch all route for SPA",               url: "App/{*catchall}",               defaults: new{                               controller = "Home",                                action = "Index"});

  还有一个关于显示 HTML 的小技巧。如果 HTML 是视图生成的,一切都没有问题。但如果 HTML 来自文件(如 MyHTML.html),应该使用 IIS 重写规则来改变 URL:

/myHTML.html -> /myHTML

  要想观看完整的 demo 应用,请查阅该演讲的 Channel9 页面

来自: InfoQ