Configuring Angulasjs Routes with ASP.NET MVC

Question

Configuring Angulasjs Routes with ASP.NET MVC

Asked 7 years ago

Viewed 94 times

0

I’m having trouble routing Angularjs with Asp.net mvc.

I set up my routing in the app.js and when I click on my links the pages are not being redirected correctly, the only page that appears correctly is Home.html, but after I click on the links they do not work, changes the URL but is always cm 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 Angular JS 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 ";
    });
}());

Ahgular JS Book Controller

(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 page opened correctly

By clicking the Book Link - Changes the url but does not open the Book page.html

File structure

2 answers

Browser other questions tagged c# asp.net-mvc angularjs asp.net laravel-routes

You are not signed in. Login or sign up in order to post.

by Leandro Godoy Rosa • **2,744** points · Answer 1 · 2017-11-22T15:24:14+00:00

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

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

by Nicola Bogar • **1,149** points · Answer 2 · 2017-11-22T16:35:32+00:00

I managed to solve my problem as follows!

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>