如何在ASP.NET MVC和EF中使用AngularJS

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

AngularJS作为一个越来越流行的前端框架,在使用ASP.NET MVC和实体框架开发Web应用的时候,恰当的使用它可以让你的前端界面更易开发。今天推荐的文章就是介绍如何把AngularJS结合到ASP.NET MVC开发当中。

虽然之前开发的一套SaaS系统也是以ASP.NET MVC、实体框架为基础,前端辅以AngularJS。不过一直无暇很好总结一下这方面的经验分享给大家,刚好今天推荐的文章就是讲述如何把AngularJS结合到ASP.NET的Web应用开发当中。其实步骤很简单:

  1. 通过Nuget把AngularJS添加到ASP.NET MVC的Web项目中(我一般使用作者为The AngularJS Team的包)
  2. 在视图或者布局文件中引用AngularJS的js文件,也可以添加到bundles
  3. 通过Entity Framework来获取数据
  4. 在ASP.NET MVC/WEB API的Controller中返回JSON数据
  5. 在AngularJS服务中消费这些服务端返回的JSON数据
  6. 在AngularJS控制器中调用AngularJS服务把数据传递给视图
  7. 在AngularJS视图中呈现数据

Dhananjay Kumar的这篇文章基本就是按照这个步骤的一个完整入门练习,通过“阅读原文”来仔细阅读其中的文字、配图和代码,要入门不是难事。

当然在实际实践当中还是有一些技巧的,也需要自己探寻一种符合自己情况的做法。比如我们之前并未基于AngularJS把整个Web应用做成单页应用(Single Page Application,SPA),而只是在一些需要高度交互性的页面上,利用AngularJS的绑定、MVC模型对前端代码进行优化。具体而言,ng-app一般是基于一个ASP.NET MVC视图的,且这些视图还是充分利用ASP.NET MVC本身的特性(比如由Layout来统一布局,利用PartialView组合界面等)。以后有空再详细分析我们的经验。

原文地址:http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx

时间: 2024-08-26 11:23:38

如何在ASP.NET MVC和EF中使用AngularJS的相关文章

ASP.NET MVC和EF集成AngularJS开发

参考资料: 如何在ASP.NET MVC和EF中使用AngularJS AngularJS+ASP.NET MVC+SignalR实现消息推送 [AngularJs + ASP.NET MVC]使用AntularJs快速建立ASP.NET MVC SPA網站

如何在 ASP.NET MVC 中集成 AngularJS(2)

在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分. ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一.捆绑和压缩降低了 HTTP 请求和有效载荷的大小,结果是可以更快和更好的执行 ASP.NET MVC 的网站.有许多可以减少 CS

如何在ASP.NET MVC 中获取当前URL、controller、action

一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟目录名+页面名+参数: string url=Request.RawUrl;(或 string url=Request.Url.PathAndQuery;) [3]获取 虚拟目录名+页面名:string url=HttpContext.Current.Request.Url.AbsolutePath

如何在 ASP.NET MVC 中集成 AngularJS(3)

今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表:一个运行在调试模式的应用程序下和一个运行在发布模式的应用程序下.在调试模式下,JavaScript 文件在未使用压缩功能的情况下会被下载.如果想要调试并在 JavaScript 控制器中设置断点,这是必须的.事实上,路由表的产生版本也出现了一些挑战,由于产生路由代码使用的是 JavaScript

如何在asp.net mvc中添加自定义的HTML辅助种方法

很久没在博客园发表文章了,今天来总结一下如何在asp.net mvc中添加自定义的HTML辅助方法.我们现在设计这么一个目前,利用自定义的HTML方法来渲染一个普通的img标记.直接进入主题吧: 首先我们先来看一下一个普通的img标签在HTML中的代码: <img src="Content/images/封面.jpg" alt="图片" id="img01" width="500px" height="250p

翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 另一种 MVC 应用程序: 简介 站点总是快速成长,一旦开始成长,站点就变得很难开发,组织和维护.所以在我们增加功能或者开发项目的时候,缺乏设计的大型网站会变得失去控制.这里要说的是站点的架构设计必须简单,容易被任何设计者理解 ( 从初级开发者到中级开发者 ),以及

翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap Part 1: 创建 Web Application (Knockout.js, Asp.Net MVC and Bootstrap): 前端设计 在开始 UI 部分之前,我们先看一下在 ASP.NET MVC4 中使用 Knockoutjs 和 Bootstrap

[转]asp.net mvc 从数据库中读取图片

本文转自:http://www.cnblogs.com/mayt/archive/2010/05/20/1740358.html 首先是创建一个类,继承于ActionResult,记住要引用System.Web.Mvc命名空间,如下: public class ImageResult : ActionResult { public ImageFormat ContentType { get; set; } public Image image { get; set; } public strin

在ASP.NET MVC应用程序中随机获取一个字符串

在开发ASP.NET MVC应用程序时,有可能需要一个随机字符串,作为密码或是验证码等. 如果你需要的是SQL版本,可以参考<密码需要带特殊字符(二)>http://www.cnblogs.com/insus/archive/2012/02/16/2354453.html 此篇实现方法多少是参照这个实现C#版本. 在应用程序下,创建一个CharacterUtility.cs: 这个类别中,分别有几个静态方法:一,为随机的小写字母: 二,是随机产生大写字母: 三,是随机产生数字: 四,是产生特殊