【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. D其他项目打电话AL工程EF Model

     Based on your description and the error code, you will just need to ensure that your DataContext ...

  2. JAVA 跑马灯文字效果

    JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...

  3. C++11的一些功能

    .断言是将一个须要为真的表达式放在语句中,在debug模式下检查一些逻辑错误的參数.C++中使用assert须要使用<assert.h>或者<cassert>头文件.有函数定义 ...

  4. tomcatserver解析（六）-- Acceptor

    Acceptor负责用来管理连接到tomcatserver的数量,来看看Acceptor在tomcatserver中的应用,是怎样实现连接管理的,socket连接建立成功之后,是怎样实现内容的读写的( ...

  5. JUnit使用参数测试和一组测试

    JUnit该参数测试和一组测试使用简单 参数测试 作为替代阵列int a0,a1,a2喜欢,当测试加法assertEquals(3.0, h.add(1, 2), 0.1);相当于声明一个变量,要測试 ...

  6. Linux通过使用Sambaserver示例

    Linux通过使用Sambaserver示例 实验环境: Vbox下一个.Rehat5虚拟机 使用sambaserver 目的:使用sambaserver将文件上传到server上 [root@rh5 ...

  7. ViewGroup可实现上下、各地跑马灯效果滚动

    先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...

  8. Cocos2d-x3.0 DrawNode吸取

    DrawNode正如它的绘图形状的节点,相互作用可以使将来更加灵活. DrawNode* DrawLayer::shape() { auto shape = DrawNode::create(); s ...

  9. Ad Hoc

    Ad Hoc源自于拉丁语,意思是"for this"引申为"for this purpose only",即"为某种目的设置的,特别的"意思 ...

  10. 数字IC设计-15-DPI（延续）

    简介 供SV,无论是构建测试激励,或模拟硬件的并行行为,DPI这是非常方便.上次我们介绍SV内通"import"导入和电话C性能. 在本节,通过一个简单的例子来说明C什么语言的函数 ...