【AngularJs + ASP.NET MVC】使用AntularJs快速建立ASP.NET MVC SPA網站

這幾天接觸到了AngularJs的美麗，讓饅頭有點躍躍欲試使用AngularJs來做一個SPA(單頁式網站)，沒想到使用AngularJs來製作SPA網站這麼簡單！相信你看完這次的分享，你也想動手試一試！

在Visual Studio中有一個專案範本Single Page Application，不過這個專案範本預設是使用knockout.js來建立的，所以饅頭這邊是使用Web API的專案來開始製作

選擇了Web API專案後，這個專案中本身沒有AngularJs，所以我們要透過Nuget來取得AngularJs(當然，也可以從官方網站下載)，在右上角打上AngularJs後就可以找到！我們可以安裝第一個nuget package，這個package預設會幫我們安裝整個AngularJs的Javascript Library

安裝AgnularJs完成後，我們要把Javascript放置到頁面中，當然我們使用MVC中提供的Bundle的功能

1 bundles.Add(new ScriptBundle("~/bundles/AgnularJs").Include(
2             "~/Scripts/angular.js",
3             "~/Scripts/angular*"));

接下來我們把整個(或相關檔案)AngularJs放置到頁面中吧！

這邊要注意一下，angular.js這個檔案要放在最上頭，否則您開啟瀏覽器的開發工具會看到滿江紅喔！

設定Bundle結束後，我們到View\Shared資料夾下的_Layout.cshtml在檔案的下方加入我們剛剛設定的Bundle package

1 @Scripts.Render("~/bundles/AgnularJs")

以及在html的tag上加上ng-app的屬性，最後的Layout會長的樣這樣

01 <!DOCTYPE html>
02 <html ng-app="SPA">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
05     <meta charset="utf-8" />
06     <meta name="viewport" content="width=device-width" />
07     <title>@ViewBag.Title</title>
08     @Styles.Render("~/Content/css")
09     @Scripts.Render("~/bundles/modernizr")
10 </head>
11 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
12 <body>
13     <div class="navbar navbar-inverse navbar-fixed-top">
14         <div class="container">
15             <div class="navbar-header">
16                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
17                     <span class="icon-bar"></span>
18                     <span class="icon-bar"></span>
19                     <span class="icon-bar"></span>
20                 </button>
21                 @Html.ActionLink("應用程式名稱", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
22             </div>
23             <div class="navbar-collapse collapse">
24                 <ul class="nav navbar-nav">
25                     <li>@Html.ActionLink("首頁", "Index", "Home", new { area = "" }, null)</li>
26                     <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
27                 </ul>
28             </div>
29         </div>
30     </div>
31     <div class="container body-content">
32         @RenderBody()
33         <hr />
34         <footer>
35             <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 應用程式</p>
36         </footer>
37     </div>
38  
39     @Scripts.Render("~/bundles/jquery")
40     @Scripts.Render("~/bundles/AgnularJs")
41     @Scripts.Render("~/bundles/bootstrap")
42  
43     @RenderSection("scripts", required: false)
44 </body>
45 </html>

接下來，我們在Script的資料夾下新增一個Javascrpt檔案，饅頭這邊命名為angular.SPADemo.js

angular.SPADemo.js檔案中我們在這邊設定SPA的路由，饅頭這邊將第一個頁面放置在Home/SPApage1中

01 var SPA = angular.module("SPA", ["ngRoute"]);
02 //SPA路由設定，可在此往下新增路由
03 SPA.config(['$routeProvider', "$locationProvider",
04   function ($routeProvider, $locationProvider) {
05       $routeProvider
06         .when("/", {
07             templateUrl: '/Home/SPApage1',
08             controller: 'Main'
09         })
10   }])

所以我們要在HomeController中新增一個ActionResult，名為SPApage1，並且回傳PartialView

1 //Controller
2 public ActionResult SPApage1()
3 {
4     return PartialView("_SPApage1");
5 }

並且將原先在Index頁面中的Html 搬移到該頁面中

01 @*新增一個div，並加上一個angularjs的Controller*@
02 <div ng-controller="Main">
03     @*原先在Home/Index頁面中的Html*@
04     <div class="jumbotron">
05         <h1>ASP.NET</h1>
06         <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
07         <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
08     </div>
09     <div class="row">
10         <div class="col-md-4">
11             <h2>Getting started</h2>
12             <p>
13                 ASP.NET Web API is a framework that makes it easy to build HTTP services that reach
14                 a broad range of clients, including browsers and mobile devices. ASP.NET Web API
15                 is an ideal platform for building RESTful applications on the .NET Framework.
16             </p>
17             <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301870">Learn more &raquo;</a></p>
18         </div>
19         <div class="col-md-4">
20             <h2>Get more libraries</h2>
21             <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
22             <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301871">Learn more &raquo;</a></p>
23         </div>
24         <div class="col-md-4">
25             <h2>Web Hosting</h2>
26             <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
27             <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301872">Learn more &raquo;</a></p>
28         </div>
29     </div>
30 </div>

我們將Index的頁面，改為

1 <div ng-view></div>

這樣我們就可以完成SPA了！(其他頁面依樣畫葫蘆就可以了)

其他的頁面可以繼續在路由新增，然後填上MVC中相對的位置，要記得把畫面的部分移除Layout喔！

PS. 若在Layout有設定Section的CSS或JS的Render，會無法載入喔！所以可以考慮在畫面一開始時，載入所有的JS跟CSS！但這樣的情況要請大家把JS模組化，並且盡可能的重用，否則光載入JS檔案就要等到天荒地老了...

https://code.msdn.microsoft.com/CRUD-Operations-in-MVC-5-d4ff2263/sourcecode?fileId=119238&pathId=457841343

AngularJs + ASP.NET MVC的更多相关文章

  1. [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序

    本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...

  2. AngularJS+ASP.NET MVC+SignalR实现消息推送

    原文:AngularJS+ASP.NET MVC+SignalR实现消息推送 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现 ...

  3. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework（官方教程翻译版 版本3.2.5）含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  4. [Angularjs]asp.net mvc+angularjs+web api单页应用

    写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...

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

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

  6. [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

    写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...

  7. ASP.NET MVC和EF集成AngularJS开发

    参考资料: 如何在ASP.NET MVC和EF中使用AngularJS AngularJS+ASP.NET MVC+SignalR实现消息推送 [AngularJs + ASP.NET MVC]使用A ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS（3）

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

随机推荐

  1. NYOJ 1068 ST（段树 为段更新+间隔总和）

    ST 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描写叙述 "麻雀"lengdan用随机数生成了后台数据.可是笨笨的他被妹纸的问题给难住了. .. 已知 ...

  2. python 性能－ and-or 学习技能

    C语言类似表情: bool ? a : b ,当表达式值为真的话,值为a.否则为b. 看一个样例: >>> a = "first" >>> b ...

  3. 如何识别SQL Server中的IO瓶颈

    原文:如何识别SQL Server中的IO瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2329/how-to-identify-io-bottlene ...

  4. 基于VMware的虚拟Linux集群搭建-lvs+keepalived

    基于VMware的虚拟Linux集群搭建-lvs+keepalived 本文通过keepalived实现lvsserver的的双机热备和真实server之间的负载均衡.这方面的blog挺多,可是每一个 ...

  5. java它们的定义jar套餐读Excel（这包括2003和2007）数据，和实例

    使用java它们的定义jar套餐读excel数据支持excel2007和excel2003 在http://download.csdn.net/detail/u010792467/8079355下载所 ...

  6. 熟人UML

    UML,全名Unified Modeling Language.模语言.它是软件和系统开发的标准建模语言.主要是以图形的方式对系统进行分析.设计. 同一时候,UML不是一个程序设计语言,也不是一个形式 ...

  7. NSIS：安装、卸载时检查程序是否正在运行

    原文 NSIS:安装.卸载时检查程序是否正在运行 如果我们要安装或升级的程序正在运行,文件肯定会替换不成功,以下代码可以提示用户结束正在运行的程序. 需要使用插件FindProcDLL.dll,下载路 ...

  8. Java并发编程：线程池的使用（转）

    Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, ...

  9. Message解析流程（转）

    Message的解析作为一个共同组件.对应不同格式的msg文件有不同的实现类来解析.用SAXParser. 1:Final class MessageResourceManager   在Start方 ...

  10. ASP.NET AJAX简明教程

     当我们谈论Ajax时,首先想到的就是JavaScript下的Ajax,用来完成网页的交互,局部刷新工作,Microsoft的ASP.NET AJAX框架在Web的开发中承担着类似的角色,并简化了Ja ...