В дополнение к тому, что @Andiih заявил в своем ответе. Библиотека маршрутизации Angular предназначена для обработки ваших маршрутов Angular E.G. между
(из-за отсутствия лучшего срока)
передняя часть контроллеры.
Кажется, что у вас смешанные Angular и ASP.NET MVC маршрутизации в том виде, в котором вы ожидаете, что 2 на работу. Ваш базовый маршрут - localhost/Home/Index# с этого момента. Angular присоединяет свои (под) маршруты к базе URL, в результате чего вы получаете результат URL.
Несмотря на то, что при необходимости можно было бы прыгать между MVC и Angular маршрутами и контроллерами, это был бы более сложный сценарий, чем я предполагаю, что вы стремитесь достичь. Кроме того, мне никогда не приходилось идти в такой степени в прошлом.
В общем, что бы в настоящее время происходит:
Если бы вы уйдете со страницы Index.cshtml «Root» вы фактически перемещаться от вашего текущего Angular приложения .. или перемещаться к в другое приложение ... в зависимости от структуры решения вы могли бы даже использовать разные рамки JavaScript MV * для каждой отдельной страницы ... но это просто безумие.
... но я сомневаюсь, что это то, что вы хотите, на данном этапе, поэтому для простоты позволяет придерживаться если у вас есть только один ASP.Net MVC Route/Страница, и вы просто хотите просто перемещаться между Angular маршрутов и данных о доставке до Angular маршрутов или страниц с вашего заднего конца .NET услуг как-то.
Таким образом, кажется, что вы могли бы быть потенциально отсутствует связь между тем, что роль каждого из рамок предназначены для воспроизведения в стеке вы в настоящее время. (Я попытаюсь прояснить)
Например:
Если вы посмотрите на (очень общую) общую структуру решения, которые могли бы выглядеть примерно так далее.
- css
- bootstrap.css // all 3rd party css here
- libs
- angular.js // all 3rd party js libs here
- angular-ui-router.js
- controllers
- RootController.cs // This is your HomeController.
// It's effectively used to "deliver" the root view which is
// your core/base page for lack of a better term
- views
- RootView.cshtml // see code RootView.cshtml below,
// this defines your app "layout"
// as well as where you deliver your bundles,
// make use of server side auth, etc..
- webapi
- test1Api.cs // access to test1 data or serverside process
- test2Api.cs // etc..
- app
- pages
- home
- test1
- test1Ctrl.js
- test1View.html
- test1.css
- test2
- test2Ctrl.js
- test2View.html
- test2.css
- services
- someRandomSvc.js
- resourceSvc.js // this is where you consume your
// .NET back end API. E.G: test1Api & test2Api, etc..
- app.js
- app.routes.js
- etc...
RootView.cshtml получает построен на стороне сервера, что позволяет использовать .NET bundling, Asp.NET Auth и т.д .. Во всяком случае, вся эта страница будет выступать в качестве оболочки для Angular приложения, весь «передний конец приложения», таким образом, выполняется в контексте этой страницы.
RootView.cshtml
<head>
@Styles.Render("~/content/3rdPartyCSS")
@Styles.Render("~/content/appSpecificCSS")
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse glyphicons pull-right">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="test1">Test1</a></li>
<li><a ui-sref="test2">Test2</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div ng-view></div>
</div>
@Scripts.Render("~/bundles/3rdPartyJS")
@Scripts.Render("~/bundles/appSpecificJS")
</body>
Вам нужно будет только один ASP.Net MVC Route, как я уже сказал ранее, не будет навигации от него (для этого приложения по-крайней мере)
RootController.cs
namespace Tests.Controllers
{
public class RootController : Controller
{
public ActionResult RootView()
{
// as I've mentioned previously in another post,
// we're returning a partial to avoid the usage of _layout.cshtml
// as our RootView is acting as the layout in for the angular app.
// (it would introduce another level of not needed nesting)
return PartialView();
}
}
}
... но вы будете нуждаться множественным Angular маршруты.
app.routes.js
var app = angular.module('Tests');
app.config(['$stateprovider', function($stateprovider) {
$stateprovider
.state('home', { url: '', templateUrl: 'app/pages/home/homeView.html' }])
.state('test1', { url: '/test1', templateUrl: 'app/pages/test1/test1View.html'})
.state('test2', { url: '/test2', templateUrl: 'app/pages/test2/test2View.html'});
}]);
Вы бы тогда выставить другой стороне сервера логики или вызовы через WebAPI конечных точек, которые вам нужно будет потреблять через что-то вроде ngResource, который вы затем использовать в ваши контроллеры Angular.
testXView.html
<div ng-controller="testXCtrl as test">{{ test.something }}</div>
testXCtrl.JS
var app = angular.module('Test');
app.controller('testXCtrl',['resourceSvc', function(resourceSvc) {
resourceSvc.getSomeData().then(function(data) {
this.something = data; //.. or whatever floats your boat :P
})
}]);
Примечание.
- Используя эту конвенцию с угловым
.something(['service', function(service) { }]);, чтобы сделать код min safe. (Так что не бойтесь, когда вы это видите)
- В моем примере я использовал библиотеку маршрутизации под названием angular-ui-router, я предлагаю вам взглянуть на нее, если у вас есть свобода выбора на этом этапе ... но те же принципы будут применяться к решению
ngRoute.
см. Мой ответ ниже, пожалуйста, дайте мне знать, если это имеет смысл для вас. Если вы не поправитесь, у меня есть небольшая частная репозитория git, с которой я могу поделиться, но сначала мне нужно анонимизировать ее. –
читайте это http://stackoverflow.com/questions/20801780/angular-ng-include-cshtml-page – Pravin
для угловой маршрутизации + маршрутизация MVC см. Пример. https://angularjsaz.blogspot.in/2015/10/angularjs-routing-aspnet-mvc-example.html – Pravin