Call mvc url.action from angular controller - angularjs

Question

I have this tabset:
<tabset justified="true" class="tabsetnowrap">
<tab ng-repeat="tab in tabshomepage track by $index" heading="{{tab.title}}" ng-click="homePageNavigate(tab.type)" active="tab.active" disabled="tab.disabled">
</tab>
It is created in a angular controller:
$scope.tabshomepage = [];
$scope.tabshomepage.push(
{ title: 'Hjem', type: 'HOM', order: 1, active: true, disabled: false, color: 'black' },
{ title: 'Dirty', type: 'DIR', order: 2, active: false, disabled: false, color: 'purple' },
{ title: 'Dating', type: 'DAT', order: 3, active: false, disabled: false, color: 'green' },
{ title: 'Bloggers', type: 'SOC', order: 4, active: false, disabled: false, color: 'lblue' },
{ title: 'Konto', type: 'ACO', order: 5, active: false, disabled: false, color: 'black' },
{ title: 'Om os', type: 'ABU', order: 6, active: false, disabled: false, color: 'black' },
{ title: 'Kontakt og FAQ', type: 'COF', order: 7, active: false, disabled: false, color: 'black' }
);
When a click is done on a tab, then the homePageNavigate function is performed.
$scope.homePageNavigate = function (type) {
if(type == 'DIR'){
//Perform a #Url.Action("Index", "Dirty", null)"
}
etc...
};
In that functin I want to call a mvc method: #Url.Action("Index", "Dirty", null)", and return a view("index")
What is best way to solve this problem?
Any workarounds? Or a simple solution to this?

Answer 1

I've done something similar before by performing a bit of configuration in angular, through razor, on page load:
<script>
(function () {
angular.module('App').value('paths', {
home: '#Url.Action("Index", "Dirty", null)'
// more paths here
});
})();
</script>
Then you can inject and use paths anywhere within your angular app.
eg. Inside a controller called 'myCtrl`
angular.module('App').controller('myCtrl', ['paths', function(paths) {
// you can use paths.home here
}]);

Answer 2

It's quite simple to invoke ASP.Net MVC Controller action method using AngularJS as follows
In Javascript I wrote
var app = angular.module('MyApp', []);
angular.module('MyApp', [])
.controller('MyController', ['$scope', '$http', function ($scope,
$http) {
$scope.search = function () {
$http({
method: "GET",
url: "/home/GetData"
}).then(function mySuccess(response) {
$scope.name = response.data;
}, function myError(response) {
$scope.name = response.statusText;
});
}
}]);
In HTML part, I wrote
<button ng-click="search()">Get Data</button>
In Controller Action, I wrote return Json("You caught AngularJS", JsonRequestBehavior.AllowGet);