CODEWITHSUNDEEP
angularjs
GPGVM
GPGVM

Reputation: 5619

Hyperlinks with Angular Route / MVC Area not working

I have a bit of a complicated MVC project that we are adding some Angular capability to. I am very new to Angular and have watch three Angular courses on Pluralsight now. They have been very helpful but I am missing some piece of understanding.

I understand that I need to have just one ng-app (unless I want to bootstrap and I don't think I want to). So this app has defined my config and a custom directive. The custom directive is working nicely but when I click on a link in that directive it does not go anywhere....well perhaps it does but not where I am expecting. Fiddler shows nothing unusual like 404 or 500 errors.

(function ()
{
  "use-strict";


   angular.module("appMainNav", ["ngRoute"])
   .config(function ($routeProvider) {

    $routeProvider.when("/MySearch", {
        controller: "routingController"
    });

    $routeProvider.otherwise({ redirectTo: "/" });

})

})();

My routingController:

(function () {

  "use strict";

  angular.module("appMainNav")
  .controller("routingController", routingController);

function routingController($http) {

    var vm = this;

    alert("Routed");
}
})();

My HTML link as rendered:

<a href="#/MySearch">Search</a>

I don't get a page not found...the url just appends the #/MySearch. No console errors etc.

I was expecting to get a javascript alert...?

TIA

Edit

Should have added sooner. Here is markup:

_Layout page:

<body>
   <div ng-app="appMainNav" ng-controller="routingController" class="container">
      @RenderBody()
    </div>
</body>

RenderBody is Index.cshtml:

<div class="row">
<div>
    Header Stuff
</div>
</div>

<div class="row">

<div class="col-md-2">
    <dashboard-main-nav></dashboard-main-nav>
</div>

<div  class="col-md-3">
    <div></div>
</div>

<div class="col-md-8">
    <div></div>
</div>

</div>

<div class="row">
<div>
    Footer Stuff
</div>
</div>

The custom directive angular code was left out of the snips above however that is where the link is generated.

Upvotes: 0

Views: 37

Answers (1)

frishi
frishi

Reputation: 882

You need to assign an event handler to a click event on the anchor tag:

<a href="#/MySearch" ng-click="foo()">Search</a>

where foo is a function defined on the controller's scope:

function routingController($http, $scope) {

    var vm = this;
    $scope.foo = function(){
      alert("I am so tired");
    }

    alert("Routed");
}

Try that and it should work.

Upvotes: 1

Related Questions