Configuring AnglesJS Routes with ASP.NET MVC

Question

Configuring AnglesJS Routes with ASP.NET MVC

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm having trouble performing angular routing with asp.net mvc.

I configured my routing in the app.js and when I click on my links the pages are not being redirected correctly, only page that appears correctly is the Home.html, but after I click the links the same do not work, it changes the URL but it is always in the Home.html.

My Main Index

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="../Scripts/jquery-3.2.1.min.js"></script>

    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular.min.js"></script>

    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/angular-route.js"></script>

    <script src="../AngularJS/app/app.js"></script>

    <script src="../AngularJS/controller/homeController.js"></script>
    <script src="../AngularJS/controller/autorController.js"></script>
    <script src="../AngularJS/controller/editoraController.js"></script>
    <script src="../AngularJS/controller/livroController.js"></script>
</head>
<body ng-app="app">

    <a ng-href="#/Home"> Home </a> |
    <a ng-href="#/Autor"> Listar Autores </a> |
    <a ng-href="#/Editora"> Listar Editoras </a> |
    <a ng-href="#/Livro"> Listar Livros </a>

    <div ng-view="">
        
    </div>

</body>
</html>

Configuring the JS Angle app

(function () {
var app = angular.module("app", ["ngRoute"]);

app.config(function ($routeProvider) {

    $routeProvider
        .when("/", { controller: "homeController", templateUrl: "/AngularJS/view/Home/Home.html" })
        .when("/Livro", { controller: "livroController", templateUrl: "/AngularJS/view/Livro/Livro.html" })
        .when("/Autor", { controller: "autorController", templateUrl: "/AngularJS/view/Autor/Autor.html" })
        .when("/Editora", { controller: "editoraController", templateUrl: "/AngularJS/view/Editora/Editora.html" })
    .otherwise({ redirectTo: "/" });

});
}());

Controller Home AngularJS

(function () {
    angular.module("app").controller("homeController", function ($scope) {
        $scope.home = " Home ";
    });
}());

Controller Book Ahgular JS

(function () {
    angular.module("app").controller("livroController", function ($scope) {
        $scope.livro = "Primeiro Livro";
    });
}());

HtmlPage Home

<div ng-controller="homeController">

    Pagina Inicial - {{home}}

</div>

Html Page Book

<div ng-controller="livroController">  
    Livro Index - {{livro}}
 </div>

Home open properly

WhenclickingontheBookLink-ChangestheurlbutdoesnotopentheBook.htmlpage

Filestructure

angularjs c# asp.net asp.net-mvc rotas

asked by anonymous 22.11.2017 / 15:27

2 answers

Function that turns the date into Brazilian and American format? [duplicate] pick up folder path

score 0 · Answer 1

The problem is that the Views folder by default is special, the Web.config located inside it modifies the behavior of requests for files inside it and therefore it returns that it did not find the file.

If you are not going to use the ASP.Net MVC Controllers and Views in any way you can delete the Web.config that is inside this folder and it will work as any folder, and in this case I would say to remove the _ViewStart.cshtml and Shared folder as well, or the other alternative is to use a folder with a different name for your AngularJS templates.

score 0 · Answer 2

I was able to solve this problem in the following way!

Instead

de : <a ng-href="#/Home"> Home </a>
coloquei: <a ng-href="#!/Home"> Home </a>

<body ng-app="app">

    <a ng-href="#!/Home"> Home </a> |
    <a ng-href="#!/Autor"> Listar Autores </a> |
    <a ng-href="#!/Editora"> Listar Editoras </a> |
    <a ng-href="#!/Livro"> Listar Livros </a>

    <div ng-view="">

    </div>

</body>