MVC и угловой JS в приложении с одной страницей

Я пишу свое первое приложение с угловыми углами, и это будет одностраничное приложение. Я буду использовать его вместе с MVC. Я пытаюсь написать одно примерное приложение с двумя ссылками, но сталкиваясь с проблемами, как описано ниже. Я выбрал нормальный шаблон проекта MVC и Ниже приведен код:MVC и угловой JS в приложении с одной страницей

_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» и не ударяет точку останова внутри метода «Link1» моего контроллера mvc. Однако, если я напишу «Home/Link1» в браузере, он попадает в метод контроллера. Итак, как я могу это исправить. Нажав на ссылку «Link1», вы сразу откроете представление Link1?
Когда я нажимаю, «AppURL/Главная/Link1» в браузере он делает открыть «LINK1» вид, однако он полностью заменяет предыдущий вид (т.е. с меню и нижний колонтитулы). Я хочу, чтобы я сохранил макет (т. Е. Панель меню и нижний колонтитул) и загрузил частичный вид внутри области «RenderBody».

Может ли кто-то исправить вышеуказанный код и начать работать с моим первым приложением?

источник

2015-10-30 user2185592

Как человек, который был там, где вы находитесь, когда я начал изучать Угловое, я могу помочь вам с этой просьбой; но и избавить вас от некоторой боли и дать вам несколько советов. Совет состоит в том, чтобы не смешивать маршрутизацию Microsoft MVC с маршрутизацией AngularJS для маршрутизации страниц. Если что-нибудь, используйте MVC для вашей первой целевой страницы; однако оттуда используйте AngularJS для своих клиентских шаблонов и оставьте MVC (или, желательно, WebAPI), чтобы предоставить данные вашему клиенту. Используйте компонент на стороне сервера для сортировки данных и AngularJS, чтобы использовать навигацию через приложение.

Вот хороший пример того, что я предлагаю сделать в магазине Microsoft, используя 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

источник

2015-10-30 12:32:18

Я понимаю, что вы пытаетесь сказать, но любой рабочий код или документ с фрагментами кода, чтобы понять, что это будет очень хорошо для меня. – user2185592

Я добавил ссылку на мой пост –

MVC и угловой JS в приложении с одной страницей

ответ

Смежные вопросы