Маршрутизация AngularJS и ASP.net MVC

Я изучаю angular, впервые пытаюсь использовать маршруты, но что-то с ним не так, это не работает:

Это мой основной вид (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', но он ведет меня на страницу индекса Home Controller вместо того, чтобы оставаться на той же странице и показывать частичные представления. хочу отобразить. Это код, который у меня есть в домашнем контроллере:

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"})
})

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


javascript angularjs asp.net-mvc angularjs-1.6
person AlexGH    schedule 23.01.2017    source источник
comment
Возможный дубликат префикса URL hash-bang (#!/) вместо простого решетка (#/)   -  person Mistalis    schedule 25.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

person darron614    schedule 23.01.2017

arrow_upward
0
arrow_downward

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

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

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

person souravb    schedule 23.01.2017