angle-ui router - templateProviderからHTMLとコントローラにコンテンツを取得する

Question

stateはテンプレートに戻る前にロジックを行う必要がありますが、それはわかりましたが、私はついにtemplateProviderについて学びました。これを思いついた。

.state('home.read', { 
    url: '/read/{id:u}', 
    templateProvider: ($stateParams:ng.ui.IStateParamsService, $http:ng.IHttpService, $settings:ISettings) => { 
     return $http({ 
      url: String.format('{0}/api/articles/read/{1}', $settings.uri(), $stateParams['id']), 
      method: 'GET', 
      withCredentials: true 
     }).then((response) => { 
      return response.data; 
     }); 
    } 
}) 

これは、サーバーから必要なデータを取得し、資格情報などでフィルタリングします。それは私が戻ったものが私が必要とするものであることを保証する。

私は混乱しています。これをコントローラに手に入れて、適切な.htmlテンプレートをロードして使用するにはどうすればいいですか？

テンプレートは文字列として渡すには複雑すぎます。静的なHTMLファイルとして存在する必要があります。私はtemplateUrlを使用しようとしましたが、動作していないようです。たとえそれがあったとしても、コントローラにデータをどのように取得するのかはまだわかりません。具体的には、$scopeに接続する必要があるためです。

Answer 1

typescriptに詳しくないので、私はplain jsで解決策を提供します。設定段階で

：

.config(function($stateProvider, $urlRouterProvider){ 

$stateProvider 
    .state('read', { 
    url: '/read/:id' 
    controller: 'IndexController', 
    resolve: { 
    myResolvedData: function($stateParams, $settings, $http){ 
     return $http.get($settings.uri() + '/api/articles/read/' + $stateParams['id']); 
    } 
    } 
    }); 
}); 

IndexControllerで：

.controller('IndexController', function($scope, ... , myResolvedData){ 
//Bind resolved data to scope variable. template and controller will not load before 
//myResolvedData is resolved. 
$scope.data = { 
    fromServer: myResolvedData 
}; 
});