2017-01-23 4 views
1

Я учусь угловатым, я пытаюсь использовать маршруты в первый раз, но что-то не так с ним, это не работает:AngularJS маршрутизация и ASP.net MVC

Это мой основной вид (UsingDirectivesWithDataBinding .cshtml):

@{ 
    Layout = null; 
} 

<html> 
<head>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script> 
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script> 
    <title> 
     Using AngularJS Directives and Data Binding 
    </title> 
</head> 
<body> 

    <div data-ng-app="myApp" data-ng-controller="SimpleController">  
     <a href="#/view1"> View 1</a> 
     <a href="#/view2"> View 2</a> 
     <div data-ng-view=""></div> 
    </div> 

</body> 
</html> 

Как вы можете видеть, у меня есть две ссылки, которые называют этот маршрут: «#/view2» или это одно: «#/view1», но он принимает меня к странице индекс Домашнего контроллера вместо пребывания на той же странице и показать частичные представления, которые я хочу отобразить. Это код, который я имею в главном контроллере:

public ActionResult UsingDirectivesWithDataBinding() 
     { 
      return View(); 
     } 

     public PartialViewResult View1() 
     { 
      return PartialView(); 
     } 

     public PartialViewResult View2() 
     { 
      return PartialView(); 
     } 

Это мой файл Javascript (AngularFile.js):

var app = angular.module("myApp", ["ngRoute"]); 
app.controller("SimpleController", function ($scope) { 
    $scope.firstName = "John"; 
    $scope.lastname = "Doe"; 
    $scope.customers = [ 
     { name: "Dave Jones", city: "Phoenix" }, 
     { name: "Jamie Riley", city: "Atlanta" }, 
     { name: "Heedy Rowt", city: "Memphis" }, 
     { name: "Thomas Winter", city: "Seattle" } 
    ]; 
}); 

app.config(function ($routeProvider) { 
    $routeProvider.when("/view1", { 
     templateUrl: "/Home/View1", 
     controller: "SimpleController" 
    }) 
    .when("/view2", { 
     templateUrl: "/Home/View2", 
     controller: "SimpleController" 
    }) 
    .otherwise({redirectTo : "/view1"}) 
}) 

Почему не работает?

+0

Возможный дубликат [URL хэш-Взрыва (#! /) Префикс, а не простой хэш (# /)] (http://stackoverflow.com/questions/41226122/URL-хаш-бах-приставка-вместо-о-простой-хэш) – Mistalis

ответ

1

Угловой 1.6 использует новый hashPrefix, в ваших hrefs попытайтесь изменить #/view1 на #!/View1.

0

Я думаю, вы смешиваете маршрутизацию на стороне сервера (ASP.net) и маршрутизацию на стороне клиента (Angular.js). Не уверен, что вы пытаетесь отобразить представление из ASP.net и подавать его на угловой маршрутизатор. Если да, то, к сожалению, это не сработает. Угловой маршрутизатор не будет выполнять вызов сервера для получения представления. Представление должно быть легко доступно на стороне клиента в качестве шаблона (статические файлы HTML) и угловое отображение данных (после извлечения из API) в шаблон.

Так что в основном эта строка templateUrl: "/Home/View1" станет templateUrl: "/Home/View1.html" где View1.html - это статический файл (угловой шаблон).

Для получения дополнительной информации проверить это>AngularJs routing with Asp.Net Mvc