【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. Linux下find命令具体解释

    1. find命令 linux的find命令用来查找文件,功能非常强大, 能够通过时间, 用户组, 文件名称, 文件类型, 权限,大小等来查找对应文件. 2. find的使用方法 通过find --h ...

  2. 备注ocp_ORACLE专题网络

    声明:原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanl ...

  3. Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说

    详细代码如下: <!doctype html> <html lang="en"> <head> <script src="htt ...

  4. Flex里的特效

      Flex中提供了丰富的效果组件.因为效果是一种依据时间渐变的过程,因此全部效果都具有duration属性,用来设置播放时间(以毫秒为单位).也能够通过设置repeatCount属性和repeatD ...

  5. PHP设计模式——备忘录模式

    声明:本系列博客參考资料<大话设计模式>,作者程杰. 备忘录模式又叫做快照模式或Token模式,在不破坏封闭的前提下.捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对 ...

  6. 余弦信号DFT频谱分析（继续）

    以前谈到序列的实际长度可以通过零填充方法加入,使得最终增加N添加表观分辨率. 但它并没有解决泄漏频率的问题. 根本原因在于泄漏窗口选择的频率. 由于矩形窗突然被切断,频谱旁瓣相对幅度过大,造成泄漏分量 ...

  7. vs2010公布时去除msvcp100.dll和msvcr100.dll图讲解明

    近期开发个程序,Copy到虚拟机环境中測试时提示缺少msvcr100.dll,于是想到编译时设置选项去除依赖. 什么是 msvcr100.dll MS = Microsoft V = Visual C ...

  8. Deep Learning Papers

    一.Image Classification(Recognition) lenet: http://yann.lecun.com/exdb/publis/pdf/lecun-01a.pdf alexn ...

  9. DWR入门的例子(一个)

    DWR(Direct Web Remoting)是WEB远程调用框架.使用这种框架使AJAX发展至今已成为非常easy.使用DWR能client利用JavaScript直接调用服务端的Java方法并返 ...

  10. u_boot启动过程中的具体分析（1）

    闭上眼睛,细致的回顾一下从NAND FLASH 启动的整个流程,首先,当我们打开板子的时候,先执行的就是嵌入在芯片上的iROM,它的作用就是为了把.NAND Flash 中的bootloader的一部 ...