AngularJs + ASP.NET MVC

【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結束後，我們到ViewShared資料夾下的_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