這幾天接觸到了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( |
接下來我們把整個(或相關檔案)AngularJs放置到頁面中吧！
這邊要注意一下，angular.js這個檔案要放在最上頭，否則您開啟瀏覽器的開發工具會看到滿江紅喔！
設定Bundle結束後，我們到View\Shared資料夾下的_Layout.cshtml在檔案的下方加入我們剛剛設定的Bundle package
1 | @Scripts.Render("~/bundles/AgnularJs") |
以及在html的tag上加上ng-app的屬性，最後的Layout會長的樣這樣
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") |
11 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
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 > |
21 | @Html.ActionLink("應用程式名稱","Index","Home",new { area = "" },new { @class = "navbar-brand" }) |
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 > |
31 | < div class = "container body-content" > |
35 | < p >© @DateTime.Now.Year - 我的 ASP.NET 應用程式</ p > |
39 | @Scripts.Render("~/bundles/jquery") |
40 | @Scripts.Render("~/bundles/AgnularJs") |
41 | @Scripts.Render("~/bundles/bootstrap") |
43 | @RenderSection("scripts",required: false) |
接下來，我們在Script的資料夾下新增一個Javascrpt檔案，饅頭這邊命名為angular.SPADemo.js
angular.SPADemo.js檔案中我們在這邊設定SPA的路由，饅頭這邊將第一個頁面放置在Home/SPApage1中
01 | var SPA = angular.module( "SPA" ,[ "ngRoute" ]); |
03 | SPA.config([ '$routeProvider' , "$locationProvider" , |
04 | function ($routeProvider,$locationProvider) { |
07 | templateUrl: '/Home/SPApage1' , |
所以我們要在HomeController中新增一個ActionResult，名為SPApage1，並且回傳PartialView
2 | public ActionResult SPApage1() |
4 | return PartialView( "_SPApage1" ); |
並且將原先在Index頁面中的Html 搬移到該頁面中
01 | @*新增一個div，並加上一個angularjs的Controller*@ |
02 | < div ng-controller = "Main" > |
03 | @*原先在Home/Index頁面中的Html*@ |
04 | < div class = "jumbotron" > |
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 »</ a ></ p > |
11 | < h2 >Getting started</ h2 > |
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. |
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 > |
26 | < p >You can easily find a web hosting company that offers the right mix of features and price for your applications.</ p > |
我們將Index的頁面，改為
這樣我們就可以完成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
