Rhs Rhs - 29 days ago 15
AngularJS Question

Angular Route with .NET MVC

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

Answer

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>
Comments