[渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS
原文地址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的更多相关文章
- 如何在ASP.NET MVC和EF中使用AngularJS
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) AngularJS作为一个越来越流行的前端框架,在使用ASP.NET MVC和实体框架开发W ...
- Asp.net MVC WebApi项目的自动接口文档及测试功能打开方法
https://blog.csdn.net/foren_whb/article/details/78866133
- ASP.NET MVC Web项目中使用Log4Net记录日志,并按照日志类型分文件存储
1.创建MvcLog4Net项目 2.创建 空的MVC项目 3.项目创建完成的效果 4.选择项目,点击鼠标右键,在弹出菜单中选择“管理解决方案的 NuGet 程序包” 5. 在NuGet浏览界面: 点 ...
- ASP.NET MVC 在项目中使用面包屑导航
给框架添加一个面包屑导航 1.创建一个类 using System; using System.Collections.Generic; using System.Linq; using System ...
- .net异步性能测试(包括ASP.NET MVC WebAPI异步方法)
很久没有写博客了,今年做的产品公司这两天刚刚开了发布会,稍微清闲下来,想想我们做的产品还有没有性能优化空间,于是想到了.Net的异步可以优化性能,但到底能够提升多大的比例呢?恰好有一个朋友正在做各种语 ...
- 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的返回值自动进行各种序列化处理(序列化为 ...
- 案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发
落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界. 介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据 ...
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- cxf构建webservice的两种方式
一.简介 对于基于soap传输协议的webservice有两种开发模式,代码优先和契约优先的模式.代码优先的模式是通过编写服务器端的代码,使用代码生成wsdl:契约优先模式首先编写wsdl,再通过ws ...
- JQ插件
什么是插件 插件(plugin)是JQuery的扩展(Extension),以JQuery的核心代码为基础,是一种遵循一定规范的应用程序接口编写出来的程序. 插件的引入 引入jquery.js文件 引 ...
- 在jsp中默认写上的一段java代码表示basePath 的路径的具体的意思是什么?
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...
- chrome升级54以后,显示Adobe Flash Player 因过期而遭到阻止
请直接下载 最新的Adobe flash player 离线安装包.经测试,在线安装不管用. 百度云地址: install_flash_player_23_ppapi.exe 密码:8c2i
- java基础疑难点总结之成员变量的继承,方法重载与重写的区别,多态与动态绑定
1.成员变量的继承 1.1要点 子类用extends关键字继承父类.子类中可以提供新的方法覆盖父类中的方法.子类中的方法不能直接访问父类中的私有域,子类可以用super关键字调用父类中的方法.在子类中 ...
- 敬爱的GitHub” —— 致GitHub的一封地下信 英文原文:"Dear GitHub…" An Open Letter to GitHub
敬爱的GitHub” —— 致GitHub的一封地下信 英文原文:"Dear GitHub…" An Open Letter to GitHub 最近,一个由开源名目(包含一些最盛 ...
- centos下pip安装mysql_python
今天在使用pip安装mysql_python时,遇到一些问题,现记录下来. 1.执行pip install mysql-python时,报错 Running setup.py egg_info for ...
- 并发用户数与TPS之间的关系
1. 背景 在做性能测试的时候,很多人都用并发用户数来衡量系统的性能,觉得系统能支撑的并发用户数越多,系统的性能就越好:对TPS不是非常理解,也根本不知道它们之间的关系,因此非常有必要进行解释. 2 ...
- 用SqlParameter 给SQL传递参数
1.数据访问层 using的用法: 01.可以using System;导命名控空间 02.using 的语法结构 using(变量类型 变量名 =new 变量类型()) { } 案例: 03.us ...
- jq 操作table
转载于:http://www.jb51.net/article/34633.htm jquery获取table中的某行全部td的内容方法,需要的朋友可以参考一下 <table>< ...