原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/


我们最近发布了一个VS2010/2012的项目模板,以支持AngularJS与ASP.Net MVC4。我篇文章描述了引擎下到底发生了什么。我们怎样才能将AngularJS与ASP.Net MVC4很好的揉合在一起。我们在这里打包的项目模板将你初次设置AngularJS的难度降到最低。

对于一个典型的ASP.Net MVC的WebAPI信息流可以通过下面的图来描述。

正如你在图中看到的服务器上的流程基本是相同,但发生变的是客户端,由于AnuglarJS是一个单页面应用(SPA)框架,它带来了一系列功能,帮助提供一个真正的SPA体验给用户。

在一个典型的MVC应用程序中你加载一个视图,执行一些操作,然后导航到另一个视图。这是通过标准的HTTP调用服务器加载HTML和相关内容,通常是通过一整个页面刷新完成的。

在AngularJS中事情有点不同,看起来像在页面没有刷新的情况下加载了内容。一些HTML标记区域里的内容在被浏览时发生变化。

需要注意的是AngularJS并不是一个被应用就能直接使用的Javascript库。它是一个成熟的SPA框架,因此需要一些配置才能将AngularJS和ASP.Net MVC很好的融合在一起。

配置

在我们开始配置前了解一下AngularJS的原理是很重要的。

AngularJS Routing

一旦AngularJS开始工作它将拦截所有的网址导航请求(<a>标记),并停止浏览器刷新整个页面。它是这么处理的:

  • 它开始与用户访问APP的HOME(如http://localhost/home)。这是从一个服务器视图中获取数据的标准HTML请求。
  • 浏览器然后加载必要的HTML和脚本,并设置了AngularJS配置。

AngularJS导航($location服务)发起请求加载局部视图到一个特定的页面部分(ng-view或ng-include)。

牢记这一点,我们开始设置视图。

Setting up Views

AngularJS有它自己的视图引擎(templating engine),因此我们可以使用标准的HTML文件或razor view返回的HTML内容。如果是标准的HTML文件我们将不能通过动态视图(CSHTML,vbhtml)来获得一些内容。

这篇文章详细描述了如何在razor view中配置。

Master Page (_layout.cshtml)

从一个典型的母版页开始与AnuglarJS集成

<html>
<head>
<!-- Style sheet declartion -->
</head>
<body ng-app="main" ng-controller="RootController">
<!-- Header \ Sidebar Content-->
<div class="container">
@RenderBody()
</div>
<!--Script declarations go here-->
</body>
</html>

注意body上ng-app的标签和RootController。  AngularJS bootstraps框架一旦它看到的ng-app被声明。

接下来的步骤则是设置容器(它填充了@ RenderBody()区域)。

Container HTML View (home/index.cshtml)

一个典型的容器视图可以很简单,比如这:

<div data-ng-view=""></div>

这里的ng-view的声明是一个AngularJS指令,它由包括当前路径的模板渲染到主布局(index.cshtml)文件补充$route的(在内部依赖于$location服务)。

此div现在作为一个容器供其他partial views加载。每当路径(URL)变化在此div的内容都会更具服务端返回内容产生变化。

Other Partial Views

这些都是ASP.NET MVC中模板页之外的标准partial views。

 @{
Layout = null;
} <h2>Users</h2>
<div>
<!--HTML template for rendering user list-->
</div>

由于这些partial views所提出的请求是不完整的页面请求所以只有HTML片段。

这是标准设置的视图。接下来的部分是路由

Routing Setup

在AngularJS路由的设置是使用$ routeProvider做在配置阶段。

下图显示了如何在AngularJS路由映射到局部视图

如果您的阅读过AngularJS routing,这将立即开始变得有意义。在浏览器的URL变化,该框

架要求已在$ routeProvider配置。

Browser Url : http://localhost/#/demo

Partial requested : http://localhost/home/demo

现在你可以明白是怎么AngularJS和MVC的路由可以在一起很好的工作。

最后一步是设置AnglarJS脚本文件。

AngularJS App Scripts

对于AngularJS的构建包括controllers,指令,过滤器和服务。一些约定可以帮助我们组织应用程序代码中AngularJS。

为每个指令,过滤器和服务创建一个文件

为每一个局部视图创建一个文件

创建一个用于配置常用AngularJS设置和引导应用程序中的app.js文件

最终的结构看起来像这样

[渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS的更多相关文章

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

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) AngularJS作为一个越来越流行的前端框架,在使用ASP.NET MVC和实体框架开发W ...

  2. Asp.net MVC WebApi项目的自动接口文档及测试功能打开方法

    https://blog.csdn.net/foren_whb/article/details/78866133

  3. ASP.NET MVC Web项目中使用Log4Net记录日志,并按照日志类型分文件存储

    1.创建MvcLog4Net项目 2.创建 空的MVC项目 3.项目创建完成的效果 4.选择项目,点击鼠标右键,在弹出菜单中选择“管理解决方案的 NuGet 程序包” 5. 在NuGet浏览界面: 点 ...

  4. ASP.NET MVC 在项目中使用面包屑导航

    给框架添加一个面包屑导航 1.创建一个类 using System; using System.Collections.Generic; using System.Linq; using System ...

  5. .net异步性能测试(包括ASP.NET MVC WebAPI异步方法)

    很久没有写博客了,今年做的产品公司这两天刚刚开了发布会,稍微清闲下来,想想我们做的产品还有没有性能优化空间,于是想到了.Net的异步可以优化性能,但到底能够提升多大的比例呢?恰好有一个朋友正在做各种语 ...

  6. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  7. 案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发

    落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界. 介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据 ...

  8. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  9. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. cxf构建webservice的两种方式

    一.简介 对于基于soap传输协议的webservice有两种开发模式,代码优先和契约优先的模式.代码优先的模式是通过编写服务器端的代码,使用代码生成wsdl:契约优先模式首先编写wsdl,再通过ws ...

  2. JQ插件

    什么是插件 插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入 引入jquery.js文件 引 ...

  3. 在jsp中默认写上的一段java代码表示basePath 的路径的具体的意思是什么?

    <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...

  4. chrome升级54以后,显示Adobe Flash Player 因过期而遭到阻止

    请直接下载 最新的Adobe flash player 离线安装包.经测试,在线安装不管用. 百度云地址: install_flash_player_23_ppapi.exe  密码:8c2i

  5. java基础疑难点总结之成员变量的继承,方法重载与重写的区别,多态与动态绑定

    1.成员变量的继承 1.1要点 子类用extends关键字继承父类.子类中可以提供新的方法覆盖父类中的方法.子类中的方法不能直接访问父类中的私有域,子类可以用super关键字调用父类中的方法.在子类中 ...

  6. 敬爱的GitHub” —— 致GitHub的一封地下信   英文原文:"Dear GitHub…" An Open Letter to GitHub

    敬爱的GitHub” —— 致GitHub的一封地下信 英文原文:"Dear GitHub…" An Open Letter to GitHub 最近,一个由开源名目(包含一些最盛 ...

  7. centos下pip安装mysql_python

    今天在使用pip安装mysql_python时,遇到一些问题,现记录下来. 1.执行pip install mysql-python时,报错 Running setup.py egg_info for ...

  8. 并发用户数与TPS之间的关系

    1.  背景 在做性能测试的时候,很多人都用并发用户数来衡量系统的性能,觉得系统能支撑的并发用户数越多,系统的性能就越好:对TPS不是非常理解,也根本不知道它们之间的关系,因此非常有必要进行解释. 2 ...

  9. 用SqlParameter 给SQL传递参数

    1.数据访问层 using的用法: 01.可以using System;导命名控空间 02.using 的语法结构 using(变量类型  变量名 =new 变量类型()) { } 案例: 03.us ...

  10. jq 操作table

    转载于:http://www.jb51.net/article/34633.htm jquery获取table中的某行全部td的内容方法,需要的朋友可以参考一下   <table>< ...