AngularJS Routing и 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", но он выводит меня на страницу индекса Home Controller вместо того, чтобы оставаться на той же странице и отображать частичные просмотры Я хочу показать. Вот код, который я имею в 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"})
})

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

Источник

2 ответа

Решение

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

Источник

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

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

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

Источник
Другие вопросы по тегам