MVC和角JS在单页面应用中的应用
MVC和角JS在单页面应用中的应用
提问于 2015-10-30 12:03:07
我正在编写我的第一个角度应用程序，它将是一个单一的页面应用程序。不过，我将与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>© @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 1”，则会碰到控制器方法。那么我如何解决这个问题，即直接按" Link1“打开Link1视图呢？
- 当我在浏览器中按下“AppURL/Home/Link1 1”时，它确实打开了"Link1“视图，但是它完全取代了以前的视图(即用菜单栏和页脚)。我想要的是保留布局(即菜单栏和页脚)，并在"RenderBody“区域中加载部分视图。
有人能纠正上面的代码，让我开始使用我的第一个应用程序吗？
回答 1
Stack Overflow用户
发布于 2015-10-30 12:32:18
作为一个我第一次开始学角的人，我可以帮你解决这个问题；同时，给你留点心痛，给你一些建议。建议不要将Microsoft路由与AngularJS路由混合用于页面路由。如果有的话，使用MVC作为您的第一个登陆页面；但是，从那里开始，使用AngularJS作为客户端模板，并离开MVC (最好是WebAPI)将数据提供给客户端。使用服务器端组件来传递数据和AngularJS，让用户在应用程序中导航。
下面是一个很好的示例，供我建议使用AngularJS - 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在Microsoft商店中使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33435565
复制相关文章
相似问题
腾讯云开发者
