UI解決がコントローラに注入されていません（データが未定義です）

Question

私は同様の質問を見ましたが、私は何が欠けているのか分かりません。基本的には、サーバーからデータを取得するサービスがあり、UIルーターのresolveプロパティを使用してそのデータをコントローラに取得しようとしています。しかし、多くのチュートリアルや文書をたどった後、データを見つけるコントローラを得ることはできません。すべてが未定義として現れます。誰かが何が起こっているのか理解できるように助けてくれることを願っています。私のコードは以下の通りです。

myServices.factory('SoundCloudService', ['$http', '$log', '$sce', function($http, $log, $sce) { 
    function getPlayerHtml() { 
     return $http.get('/get-site-data').then(function(oEmbed) { 
      return $sce.trustAsHtml(oEmbed.data.player); 
     }); 
    }; 

    function getSiteAbout() { 
     return $http.get('/get-site-data').then(function(oEmbed) { 
      return $sce.trustAsHtml(oEmbed.data.about); 
     }); 
    } 

    function getAllTracks() { 
     return $http.get('/get-all-tracks').then(function(tracks) { 
      return JSON.parse(tracks.data); 
     }); 
    }; 

    function getAllPlaylists() { 
     return $http.get('/get-playlists').then(function(playlists) { 
      return JSON.parse(playlists.data); 
     }) 
    }; 

    function getPlaylist(pid) { 
     return $http.post('/get-playlist', pid, $http.defaults.headers.post).then(function(playlist) { 
      return playlist.data; 
     }); 
    }; 

    function getXMostTrendingFrom(x, playlist) { 
     var i, trending = []; 
     playlist.sort(function(a, b) { return b.playback_count - a.playback_count}); 
     for(i=0;i<x;i++) { 
      trending.push(all_tracks[i]); 
     } 
     return trending; 
    }; 

    return { 
     getAllTracks: getAllTracks, 
     getAllPlaylists: getAllPlaylists, 
     getPlayerHtml: getPlayerHtml, 
     getSiteAbout: getSiteAbout, 
     getXMostTrendingFrom: getXMostTrendingFrom, 
     getPlaylist: getPlaylist, 
    }; 
}]); 

app.js

myApp.config(['$stateProvider', '$urlRouterProvider', 'ngMetaProvider', 
    function($stateProvider, $urlRouterProvider, ngMetaProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('main', { 
       url: '', 
       template: '<ui-view/>', 
       abstract:true, 
       controller: 'MainController', 
       resolve: { 
        player: function(SoundCloudService) { return SoundCloudService.getPlayerHtml(); }, 
        about: function(SoundCloudService) { return SoundCloudService.getSiteAbout(); }, 
       } 
      }) 
      .state('main.home', { 
       url: '/', 
       templateUrl: '../static/partials/home.html', 
       controller: 'IndexController', 
      }) 
      .state('main.team', { 
       url: '/team', 
       templateUrl: '../static/partials/team.html', 
       controller: 'TeamController', 
      }) 
      .state('main.contact', { 
       url: '/contact', 
       templateUrl: '../static/partials/contact.html', 
       controller: 'ContactController', 
      }) 
      .state('main.resources', { 
       url: '/resources', 
       templateUrl: '../static/partials/resources.html', 
       controller: 'ResourcesController', 
      }) 
      .state('main.listen-to', { 
       url: '/listen-to', 
       templateUrl: '../static/partials/listen-to.html', 
       controller: 'ListenController', 
      }) 
      .state('main.listen-to.season', { 
       url: '/listen-to/:season', 
       templateUrl: '../static/partials/listen-to.season.html', 
       controller: 'ListenController', 
      }) 
      .state('main.listen-to.season.episode', { 
       url: '/listen-to/:season/:episode', 
       templateUrl: '../static/partials/listen-to.season.episode.html', 
       controller: 'ListenController', 
      }) 
      .state('main.read', { 
       url: '/read', 
       templateUrl: '../static/partials/read.html', 
       controller: 'ReadController', 
      }) 
      .state('main.read.post', { 
       url: '/read/:post', 
       templateUrl: '../static/partials/read.post.html', 
       controller: 'ReadController', 
      }) 
      } 
]); 

controller.js

myControllers.controller('MainController', ['$scope', '$log', 'PageTitleService', 
    function($scope, $log, PageTitleService, player) { 
     $log.log(player); /* This is always undefined */ 
    } 
]); 

services.js [UPDATE]

Pと以下の回答でハディによってointed、私は配列にplayerを配置し、コントローラは次のようになります。

Error: [$injector:unpr] http://errors.angularjs.org/1.3.2/ $injector/unpr?p0=playerProvider%20%3C-%20player at angular.js:38 at angular.js:3930 at Object.d [as get] (angular.js:4077) at angular.js:3935 at d (angular.js:4077) at Object.e [as invoke] (angular.js:4109) at F.instance (angular.js:8356) at angular.js:7608 at r (angular.js:347) at I (angular.js:7607)

：

​​

コンソールのみのようなエラーの後で、データを示してい

誰かが私を正しい方向に導いてくれることを願っています。

Answer 1

playerを配列に忘れました。この

myControllers.controller('MainController', ['$scope', '$log', 
'PageTitleService','player', 
    function($scope, $log, PageTitleService, player) { 
    $log.log(player); /* This is always undefined */ 
    } 
]); 

Answer 2

としてmyServicesとmyControllersへの変更は、あなたがて、myAppモジュールの依存関係として追加確保、両方のモジュールです。

// init myApp module 
angular.module('myApp', ['myServices', 'myControllers']); 

編集

いくつかのリード：

• According to the documentation、親状態を宣言しなければなりませんUI-ルータネストされたビュー、子ビュー（ステート名= main.xxx）を使用して、あなたので、 parent: "main"を追加する必要があります。または、子ビューは、main状態コントローラの解決プロパティを継承しません。

• siteDateがSoundCloudService（services.js：23）で非同期にロードされるため、同時にロードされているコントローラでsiteDateを使用できるかどうかを確認することはできません。 代わりに、約束を返すSoundCloudServiceにgetSiteDate()メソッドを追加します。 siteDataがキャッシュされ、約束によってすぐに返されます。例えば

：なぜsiteDataにSoundCloudServiceをマップしようとしている

/** 
* @name getSiteData 
* @description Scrap site data 
* @returns {promise} a promise 
*/ 
function getSiteData() { 
    var deferred = $q.defer(); 

    if(siteData) { 
     deferred.resolve(siteData); 
    } 
    else { 
     $http.get('/get-site-data').then(function(response) { 
      siteData = response.data; 
      deferred.resolve(siteData); 
     }, function(err) { 
      deferred.reject(err.message); 
     }); 
    } 

    return deferred.promise; 
} 

• ？あなたは、単にそれを使用するコントローラでSoundCloudServiceを注入する必要があります。たとえば

：

skodenControllers.controller('MainController', ['$scope', '$log', '$sce', 'PageTitleService', 'SoundCloudService', 
    function($scope, $log, $sce, PageTitleService, SoundCloudService) { 

    // Note: getSiteData() could use a cache inside the service 
    SoundCloudService.getSiteData().then(function(siteData) { 
     ... 
    }); 
    }