Angularjs 单页应用中的MVC和angular JS_Angularjs_Asp.net Mvc_Single Page Application

Angularjs 单页应用中的MVC和angular JS

angularjs asp.net-mvc

Angularjs 单页应用中的MVC和angular JS,angularjs,asp.net-mvc,single-page-application,Angularjs,Asp.net Mvc,Single Page Application,我正在编写我的第一个Angle应用程序，它将是一个单页应用程序。不过，我会将它与MVC一起使用。我试图编写一个带有两个链接的示例应用程序，但遇到如下所述的问题。我选择了普通MVC项目模板，代码如下： \u Layout.cshtml <!DOCTYPE html> <html data-ng-app="Sample"> <head> <meta charset="utf-8" /> <meta name="viewport"

我正在编写我的第一个Angle应用程序，它将是一个单页应用程序。不过，我会将它与MVC一起使用。我试图编写一个带有两个链接的示例应用程序，但遇到如下所述的问题。我选择了普通MVC项目模板，代码如下：

\u 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>

\u Link1.cshtml（\u Link2.cshtml仅类似）

因此，有了上述代码，我面临以下问题：

当我按下页面上的“Link1”锚定项时，它不是路由到“Link1”路由，而是在我的mvc控制器的“Link1”方法中点击断点。但是，如果我在浏览器中写入“Home/Link1”，则它会命中控制器方法。那么我如何解决这个问题，即按下“Link1”直接打开Link1视图

当我在浏览器中按“AppURL/Home/Link1”时，它确实会打开“Link1”视图，但它会完全替换以前的视图（即使用菜单栏和页脚）。我想要的是保留布局（即菜单栏和页脚），并在“RenderBody”区域内加载局部视图

有人能纠正以上代码并让我开始使用我的第一个应用程序吗

作为一个在我刚开始学习Angular时就在你身边的人，我可以帮助你完成这个请求；但同时，也要避免一些心痛，给你一些建议。建议不要将MicrosoftMVC路由与AngularJS路由混合用于页面路由。如果有的话，使用MVC作为你的第一个登录页面；但是，从那里开始，使用AngularJS作为客户端模板，并留下MVC（或者最好是WebAPI）将数据提供给客户端。使用服务器端组件整理数据，使用AngularJS在应用程序中导航

这是一个很好的示例，我建议在Microsoft商店使用AngularJS进行操作-

我理解您的意思，但是任何带有代码片段的工作代码或文档都会对我非常有帮助。我已经在我的帖子中添加了一个链接

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

        return View();
    }

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

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

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

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('!')
}]);