0

I was following this tutorial from youtube and was trying to get the resolve method getposts into the contactController. I don't know why its not return any value.

Could someone tell me whats wrong i'm doing here. I had spent like an hour for this in stackoverflow, but no hopes :( 

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

app.config(['$routeProvider', function($routeProvider){
  $routeProvider
  .when('/', {
    templateUrl: './partials/home.html'
  })
  .when('/contact', {
    controller: "contactController",
    controllerAs: "contactCtrl",
    templateUrl: './partials/contact.html',
    resolve:{
      getposts: function($http) {
        return $http.get('https://jsonplaceholder.typicode.com/comments/1')
                    .then(function(response) {
                      // console.log(response.data) returns api data
                        return response.data;
        })
      } 
    }
  }).controller('contactController', ['$scope', '$http', function($scope, $http, getposts){

  vm = this;

  console.log(getposts); // not getting response.data from getposts

  vm.posts = getposts;

}])

// contact.html
<div>
  <div class="row">
    dfgdfg
    <div class="col-lg-6">
      {{ posts }}
    </div>
  </div>
</div>

Problem 1: If i remove the two lines 

controller: "contactController",
controllerAs:"contactCtrl"

and add ng-controller="contactController" in main div in contact.html i get an error 

Error: [$injector:unpr] Unknown provider: getpostsProvider <- getposts <- contactController

Problem 2: if those controller and controllerAs lines are added and ng-controller="contactController" removed from view then i need to add $scope to output posts to the view. If i do vm.posts = getposts; its not displaying json response in the view. Oh damn i'm confused.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
rahul
  • 841
  • 1
  • 8
  • 18
  • actually it is not duplicate. `resolve` is part of Angular's $routeProvider setup not something related to `Promise.resolve()` – skyboyer May 21 '18 at 19:42
  • @skyboyer Yes even i was trying to dig my head with promises, await and aysnc. That was not the issue, the right answer Pankaj Parkar has provided below. – rahul May 21 '18 at 19:46
  • 1
    Are you instantiating the controller somewhere else with the `ng-controller` directive? In that case the `$compile` service will not see the local injected by the router. – georgeawg May 21 '18 at 20:20
  • 1
    Avoid asking multiple distinct questions at once. The accepted answer answers the question of why the resolve method was not returning data to the controller. The second problem should be asked as a new question. – georgeawg May 21 '18 at 20:22
  • @georgeawg oops u felt my explanation as a further question, i just wanted to elaborate the anomaly little further. And yes i instantiating the ng-controller inside the contact.html which was the issue. – rahul May 21 '18 at 20:31

1 Answers1

3

Basically you missed to inject getPosts inside inline array annotation of controller DI array. 

controller('contactController', [
   '$scope', '$http', 'getposts', //<-- you missed to inject here
      function($scope, $http, getposts){
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • yes i have tried using 'getposts' in there, for some reason it was giving unknown provider getposts etc etc.. Now its working fine. – rahul May 21 '18 at 19:47
  • @rahul it could be if you make some typo in name. so Angular would try to find out what the service/factory/provider it is. – skyboyer May 21 '18 at 19:52
  • @skyboyer i have updated my question. – rahul May 21 '18 at 20:08