CODEWITHSUNDEEP
angularjsangularjs-routingasp.net-mvc-5
user1214916
user1214916

Reputation: 249

Angularjs routing

I am learning Angularjs and having problem with routing. I write up a very simple slim demo example which uses out of the box MVC5. The home page display fine but when I click on the About link it doesn't show the About page and AboutController break point is not hit. And got the following error in Console Error: [$compile:tpload] Failed to load template: templates/indexView.html (HTTP status: 404 Not Found).

If I swap the two route, then my About page is displayed but got the error when clicking Home link so I am sure the html can be loaded. What do I need to do in order to get the routing to work?

Below is the index.cshtml

@{
    ViewBag.Title = "Home Page";
    ViewBag.InitModule = "homeIndex";
}
@section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}

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

Below is the About.cshtml

@{
    ViewBag.Title = "About Page";
    ViewBag.InitModule = "homeIndex";
}
@section Scripts {
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/js/home-index.js"></script>
}

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

below is the home-index.js

// home-index.js
var module = angular.module("homeIndex", ["ngRoute"]);

var angularFormsApp = angular.module('homeIndex', ["ngRoute"]);

angularFormsApp.config(["$routeProvider", 
    function ($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl: "templates/indexView.html",
                controller: "HomeController"
            })
            .when("/About", {
                templateUrl: "templates/aboutView.html",
                controller: "AboutController"
            });
    }]);


angularFormsApp.controller("HomeController",
    ["$scope", 
    function ($scope) {
        var x = 1;

    }]);


angularFormsApp.controller("AboutController",
    ["$scope",
    function ($scope) {
        var x = 1;

    }]);

The var x=1 has no meaning just for me to set a break point.

Below is indexView.html

<h3>Arrived at Index Page</h3>
aboutView.html

<h3>About Page</h3>

I also have the below in the _Layout.cshtml html tag to hook in angular data-ng-app="@ViewBag.InitModule"

Upvotes: 0

Views: 1327

Answers (1)

Oliver Moolman
Oliver Moolman

Reputation: 488

The problem seems to be that MVC is handling the routing that you expect to be handled by Angular.

Have a look at this question for some more information about having Both AngularJS and MVC in the same project: Should I be using both AngularJS and ASP.NET MVC?

Here is a nice guide to getting started using the two together, it specifically touches on the routing as well: Getting started with AngularJS and ASP.NET MVC

I hope that helps, please let us know if you need more information, or if something is not clear.

Upvotes: 0

Related Questions