AngularJS route resolve when calling controller using ng-include

Question

Please see my plunkr here

https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview

In my app.js I have two controllers and a routeprovider with a resolve for TestController

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


app.controller('DefaultController', ['$scope', function($scope){
  $scope.welcome = "Hello World";  
}]);

app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
  $scope.text = "TestController loaded!"  
}]);

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
  $routeProvider.
    when('/test1',{
      templateUrl: 'test1.html',
      controller: 'TestController',
      resolve: {
        context: function(){return 'test';}
      }
    })
}])

In my html, I have an ng-include which should also load test.html in the default view

 <body ng-controller="DefaultController">
    <h1>{{welcome}}</h1>

    <div ng-include="'test.html'" ng-controller='TestController'></div>


  </body>

I cannot take the resolve out of the routeProvider as I still need it to when the user goes to '../test'

Is there any way I can resolve contextProvider from the ng-include?

or is there better ways to do this?

Any help would be greatly appreciated.

Your question is quite confusing. What is the state /test since you defined /test in the router config. If both are different, then when does it invokes? — Shashank Agrawal
– Shashank Agrawal, Commented Apr 12, 2016 at 5:46
sorry I meant the state /test in the router config is for when the user navigates to for example myUrl.com/#/test. — aliaz
– aliaz, Commented Apr 12, 2016 at 5:52
so essentially there I want to ways to get to this page. One is through the route config and the other one as a partial view on another page. I hope I am making this clear. I'm so bad at explaining something. — aliaz
– aliaz, Commented Apr 12, 2016 at 5:54

Shashank Agrawal · Accepted Answer · 2016-04-12 05:56:40Z

2

Create a factory/service and use that:

app.factory('fooResolver', function() {
    return {
        resolveMe: function() {
            return 'test';
        }
    }
});

Now, use this in your router config:

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
  $routeProvider.
    when('/test1',{
      templateUrl: 'test1.html',
      controller: 'TestController',
      resolve: {
        context: function(fooResolver) {
             return fooResolver.resolveMe();
        }
      }
    })
}])

And do the same in your controller:

app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
  $scope.text = "TestController loaded!"
  var context = fooResolver.resolveMe();
}]);

answered Apr 12, 2016 at 5:56

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

Collectives™ on Stack Overflow

AngularJS route resolve when calling controller using ng-include

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related