BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Jeff Martin 关注 17 他的粉丝 ,译者 姚琪琳 关注 0 他的粉丝 发布于 2014年4月11日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

周三(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页面

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT