【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. Android开发学习总结——Android开发的一些相关概念（转）

    一.什么是3G.4G 1995年问世的第一代模拟制式手机(1G)只能进行语音通话. 1996到1997年出现的第二代GSM.CDMA等数字制式手机(2G)便增加了接收数据的功能 Ÿ 3G指的是第三代移 ...

  2. UVa 10491 - Cows and Cars

    題目:有m+n個們,每個門後面有牛或者車:有n仅仅牛,m輛車,你選擇当中1個: 然後打開当中的k你沒有選中的門後是牛的,問你改變選時得到車的概率. 說明:數學題,概率.全概率公式就可以: 說明:第10 ...

  3. [DEEP LEARNING An MIT Press book in preparation]Linear algebra

    线性代数是数学的一个重要分支,它经常被施加到project问题,要了解学习和工作深入研究的深度,因此,对于线性代数的深刻理解是非常重要的.下面是我总结的距离DL book性代数中抽取出来的比較有意思的 ...

  4. React.js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

  5. Leetcode:maximum_depth_of_binary_tree题解

    一.     题目 给定一个二叉树,求它的最大深度.最大深度是沿从根节点,到叶节点最长的路径. 二.     分析 (做到这里发现接连几道题都是用递归,可能就是由于自己时挑的简单的做的吧.) 找出最深 ...

  6. MVC5 Entity Framework学习之实现继承

    之前你已经学习了怎样处理并发异常,在本节中你将学习怎样实现继承. 在面向对象的编程中,你能够使用继承来重用代码.接下来你将改动Instructor和Student类,让它们派生自Person基类,该基 ...

  7. 高效C++规划

    推荐写C++代码风格.看似easy.坚持不易,且写且珍惜! --陈国林 1. 版本号和版本号声明 版本号和版本号文件声明位于头文件和定义文件的开头,主要内容 (1)版本号信息 (2)文件名.标识符.摘 ...

  8. UIBezierPath 和 CAShapeLayer 绘画图纸

    五角大楼画一个小圆圈戴: - (void)drawPentagon{ //(1)UIBezierPath对象 UIBezierPath *aPath = [UIBezierPath bezierPat ...

  9. C++,Python,Go对照学习-01

    好吧其实学Go只是为了好玩,只是为了好玩,学习过程中不免会把其他我懂的语言的思维定势和习惯带进来,由此有了这篇对照学习的记录,就当是留下学习的脚印吧. 这里所提及的语言特性在C++指最新的C++11标 ...

  10. 有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...