【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. HDU 4946 Area of Mushroom 凸包

    链接:pid=4946">http://acm.hdu.edu.cn/showproblem.php?pid=4946 题意:有n个人.在位置(xi,yi),速度是vi,假设对于某个点 ...

  2. SIGPIPE并产生一个信号处理

    阅读TCP某物,知道server并关闭sockfd当写两次,会产生SIGPIPE信号,假如不治疗,默认将挂起server 弄个小样本试验: #include <unistd.h> #inc ...

  3. 泛泰A820L (高通公司MSM8660 cpu) 3.4内核CM10.1(Android 4.2.2) 测试版第二版

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  4. js 性能优化整理之 高频优化

    mousemove 拖拽操作 var count = 0; elem.onmousemove = function(){ count++; // 当计数器为偶数的时候不执行mousemove if( ...

  5. Oracle SQL操作计划基线总结（SQL Plan Baseline）

    一.基础概念 Oracle 11g開始,提供了一种新的固定运行计划的方法,即SQL plan baseline,中文名SQL运行计划基线(简称基线),能够觉得是OUTLINE(大纲)或者SQL PRO ...

  6. LeetCode :: Insertion Sort List [具体分析]

    Sort a linked list using insertion sort. 仍然是一个很简洁的题目,让我们用插入排序给链表排序:这里说到插入排序.能够来回想一下, 最主要的入门排序算法.就是插入 ...

  7. 无插件，直接加参数，chrome它可以模拟手机浏览器

    在目标出现,加上一些参数即可:--user-agent="mozilla/5.0 (linux; u; android 2.3.3; en-us; sdk build/ gri34) app ...

  8. UVA1232 - SKYLINE(段树部分的变化)

    UVA1232 - SKYLINE(线段树区间改动) 题目链接 题目大意:依照顺序盖楼.假设这个位置(当前要盖的楼覆盖范围内)要新建的楼的高度>=之前就有的最大高度,那么就+1.最后输出这个+1 ...

  9. 好记性不如烂笔头85-spring3学习(6)-BeanFactory 于bean生命周期

    假设BeanFactory为了产生.管理Bean, 一个Bean从成立到毁灭.它会经过几个阶段运行. 据我所知,一般bean包括在生命周期:设定,初始化,使用阶段,四个核心阶段销毁. 1.@Bean的 ...

  10. Group By去除重复数据

    今天在写一个sql,目的是去除表里某一个字段相同的数据,只保留最新的一条.之前group by 用的少.特此记录一下. SELECT * FROM litb_approval_task SELECT ...