Angular Routing in ASP.NET MVC combined

Question

I m having one index page and one child page. In my index page, I m trying to render my child. but somehow things not working as expected and Angular routing not working as expected

Here is my index page

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<body ng-app="AngularApp">


    <div> My message {{message1}} </div>

    <a href="FirstChild">First child</a>

    <div></div>



    <div ng-view></div>

</body>

@section scripts{

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Modules/AngularApp.js"></script>

}

Here is my angularApp.Js file where I have defined the routing

var myapp = angular.module('AngularApp', ['ngRoute']);

myapp.config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/',
    {
        templateUrl: '/Index',
        controller: 'IndexController'
    })

    .when('/FirstChild',
  {
      templateUrl: '/Angular/FirstChild',
      controller: 'ChildController'
  });

    $locationProvider.html5Mode(true).hashPrefix('!')

});

myapp.controller('IndexController', function ($scope) {
    alert('My Index');
    $scope.message1 = "My Index";
});

myapp.controller('ChildController', function ($scope) {
    alert('My Child Index');
    $scope.FirstMessage = 'My First Message';
});

Here is my ASP.NET MVC Action for rendering the partial view. My controller name in ASP.NET MVC is Angular

   public ActionResult FirstChild()
            {
                return PartialView("Firstchild");
            }

Problem 1:

When I run the application with Index as the start page, this is the URL, I m seeing in the browser, http://localhost:59367/Angular/Index but the corresponding controller in Angular side for index page is not triggered

Problem 2:

When I click the First child link in my index page, its taking me to a completely page rather than rendering the partial view inside the ng-view.

http://localhost:59367/Angular/FirstChild

I m pretty sure there is serious problem in Angular routing which I defined but couldn't figure it out:( Please help

Problem Summary: On further analysis, its been found that, once I click the "First child", ideally the URL should read like Angular/Index#/FirstChild but what happens here is, "ASP.NET MVC Action First Child is getting called and the URL is changing completely"

I think it may be caused by your templateUrl expecting an html, I think you should probably write something like: templateUrl: 'views//main.html'. Take a look at [http://stackoverflow.com/questions/24301092/angularjs-routeprovider](http://stackoverflow.com/questions/24301092/angularjs-routeprovider) just as example for your Routes. — AndreaM16, May 22 '15 at 19:49
@AndreaM16, I was referring this site http://www.wintellect.com/devcenter/dbaskin/angularjs-mvc-cookbook-simple-routing And also http://www.dotnetcurry.com/showarticle.aspx?ID=1054 where partialview method is used to render .cshtml file — TechQuery, May 22 '15 at 19:57

score -1 · Answer 1 · answered May 22 '15 at 20:20

Problem has been identified. The article which I followed has used the below part

 $locationProvider.html5Mode(true).hashPrefix('!')

in the app.js file. I have removed it due to some issues in my local. But while doing so, I didn't update the part in my index page for this line

<a href="FirstChild">First child</a>

It has to be

 <a href="#FirstChild">First child</a>

Now angular routing started working fine without any issues. :)

Updated Question:

I tried including the line in d code and I removed as # in my the href but it was not working.. Seems like angular routing has to be updated as well.

  $locationProvider.html5Mode(true).hashPrefix('!')

Can someone help me in updating it in the correct format.

Angular Routing in ASP.NET MVC combined

1 Answers1