Angular Route with .NET MVC

Question

I am building an .NET MVC using AngularJS for the front end on Mono.

I have a simple HomeController with a simple return View() that loads the main page of my project.

My main Index.cshtml looks like:

<body ng-controller="AppController"> 
  <ul>
    <li><a href="/#/routeOne">Route One</a></li>
    <li><a href="/#/routeTwo">Route Two</a></li>            
    <li><a href="/#/routeThree">Route Three</a></li>
  </ul>
</body>

I have my javascript setup as such:

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

    app.config(function ($routeProvider) {
        $routeProvider.when('/routeOne', {
            templateUrl: 'RoutesDemo/One'
        })
        .when('/routeTwo', {
            template: 'RoutesDemo/two'
        })
        .when('/routeThree', {
            template: 'RoutesDemo/three'
        });
    });

        //var app = angular.module('app');
    app.controller('AppController', function ($scope) {
        $scope.test = 'Hello World';
    });
})();

So at this point my expected behavior is that if I click on the Route One link, the app should invoke the RoutesDemoController's One method, which renders some partial view :`One. It Worked!

but this doesn't happen.

Instead only the link changes but I don't see any activity in the browser or in the network tab.

Did I miss a step?

EDIT:

The main page I am viewing to hit Index.cshtml is localhost:8080

I am able to hit localhost:8080/RoutesDemo/One which does return my partial view.

When I click on my anchor link for Route One, my url is http://localhost:8080/#/routeOne

Try giving the html templates like templateUrl: 'RoutesDemo/One.html'. Are you expecting the Angular to call MVC routing ? — Sanish Joseph
– Sanish Joseph, Commented Nov 3, 2016 at 19:15
@SanishJoseph I tried renaming that template to .html. It still did not route me — Rhs
– Rhs, Commented Nov 3, 2016 at 19:17
Here is an Angular example, w3schools.com/angular/angular_routing.asp — Sanish Joseph
– Sanish Joseph, Commented Nov 3, 2016 at 19:19

Claies · Accepted Answer · 2016-11-03 19:49:49Z

2

You don't have an outlet for your route templates to be written to. Angular provides a special directive, ng-view, for this purpose. When a particular route is processed by the route provider, the .innerHtml of the ng-view element is dynamically replaced with the contents from the template or templateUrl property. https://docs.angularjs.org/api/ngRoute/directive/ngView

Change your index to look like this:

<body ng-controller="AppController"> 
  <ul>
    <li><a href="/#/routeOne">Route One</a></li>
    <li><a href="/#/routeTwo">Route Two</a></li>            
    <li><a href="/#/routeThree">Route Three</a></li>
  </ul>
  <ng-view />
</body>

answered Nov 3, 2016 at 19:49

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sanish Joseph Over a year ago

I think that's already present in the link he is following, <div ng-view></div> codeproject.com/Articles/806029/…

Claies Over a year ago

The question didn't suggest the OP was following a tutorial, they may have said that in the comments though; I am simply going by the code posted in the question body, which clearly does not show this component.

Sanish Joseph Over a year ago

Yes. That's true.

Rhs Over a year ago

That was the issue. Thanks!

Collectives™ on Stack Overflow

Angular Route with .NET MVC

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related