Khan Khan - 13 days ago 8
AngularJS Question

Areas Routing in MVC 4 with angularjs

Let me define my setup here. I have some areas like 1. AreaA 2. AreaB 3. AreaC and 4. AreaGeneral. in AreaGeneral I have one controller as home and GetData(paras) and it returns some data either in partial or full page form to angularjs. If I am using these two controller inside the AreaGeneral then its ok. but I want to provide the same controllers inside other Areas like in A, B, and AreaC, but there area and route are different. and more importantly when a user navigates to particular area say AreaB to access GetData(paras) controller then the url should be like .../AreaB/GetData instead of .../AreaGeneral/GetData and the route should work in other areas as well. Can someone guide me how to do this, Thanks.

Answer

I used angular services in different MVC areas for that I used following way

if your project structure should be like following

  >ProjectName
  >Areas
       >AreaGeneral >controllername >GetData(function)
       >AreaA 
       >AreaB 
       >AreaC 

if your services like

 app.service("yourService", ["$http",function ($http) {
    this.GetData= function () {       
    var c = $http({
        method: "post", 
        url:"../AreaGeneral/controllername/GetData",
        data: "{}",
         dataType: "json"
         });
    return c
} }])

if you are using inside AreaGeneral then url "../AreaGeneral/controllername/GetData" ok for that

but when use different area like AreaA

"../AreaGeneral/controllername/GetData" its search inside the AreaA so that you donot get result

Solution work for me like called function adding extra ../ as per root directory structure this way

"../../../AreaGeneral/controllername/GetData"

then every time call getdata function it checks from root directory so this way you can use Getdata function in any area

Hope this help you.