Question

我正在编写我的第一个Angular应用程序，它将是一个单页面应用程序。我会将它与MVC一起使用。我正在尝试编写一个带有两个链接的示例应用程序但面临如下所述的问题。我选择了正常的MVC项目模板，以下是代码：

_Layout.cshtml

<!DOCTYPE html>
<html data-ng-app="Sample">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                    <li><a href="Link1">Link 1</a></li>
                    <li><a href="Link2">Link 2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"  data-ng-view>
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/MyScripts/Module.js"></script>
    <script src="~/MyScripts/LinkController.js"></script>
</body>
</html>

HomeController

    public ActionResult Index()
    {
        ViewBag.Title = "Home Page";

        return View();
    }

    public ActionResult Link1()
    {
        return PartialView("_Link1");
    }

    public ActionResult Link2()
    {
        return PartialView("_Link2");
    }

_Link1.cshtml（仅限_Link2.cshtml）

@{
    Layout = null;
}
<p>This is link 1 page</p>

Module.js（角度）

var app = angular.module("Sample");

//The Factory used to define the value to
//Communicate and pass data across controllers

app.factory("ShareData", function () {
    return { value: 0 }
});

//Defining Routing
app.config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {
    $routeProvider.when('/Link1',
                        {
                            templateUrl: 'Home/Link1',
                        });
    $routeProvider.when('/Link2',
                        {
                            templateUrl: 'Home/Link2',
                        });
    $routeProvider.otherwise(
                        {
                            redirectTo: '/'
                        });
   // $locationProvider.html5Mode(true);
    $locationProvider.html5Mode(true).hashPrefix('!')
}]);

所以上面的代码到位后，我面临以下问题：

当我按下我页面上的“Link1”锚点项目时，它没有路由到“Link1”路由并且在我的mvc控制器的“Link1”方法中命中了断点。但是，如果我在浏览器中写入“Home / Link1”，则它会触及控制器方法。那么我怎么能解决这个问题，即按下“Link1”直接打开Link1视图？
当我在浏览器中按“ AppURL / Home / Link1”时，它会打开“Link1”视图，但它完全取代了以前的视图（即菜单栏和页脚））。我想要的是我想保留布局（即菜单栏和页脚）并在“RenderBody”区域内加载局部视图。

任何人都可以更正上面的代码并让我开始使用我的第一个应用程序吗？

Answer 1

作为一个刚开始学习Angular的人，我可以帮助你解决这个问题。而且，除了你一些心痛，并给你一些建议。建议不要将Microsoft MVC路由与AngularJS路由混合用于页面路由。如果有的话，使用MVC作为您的第一个登陆页面;但是，从那里，使用AngularJS作为客户端模板，并离开MVC（或者最好是WebAPI）将数据提供给客户端。使用服务器端组件来编组数据和AngularJS，让用户在应用程序中导航。

以下是我建议使用AngularJS在Microsoft商店进行操作的一个很好的示例 - http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-(spa)-with-aspnet-web-api-and-angularjs

单页面应用程序中的MVC和角度JS

1 个答案: