すべてのルートでhttpを呼び出す正しい方法AngularJs

Question

私は本当にAngularJsで新しく、別の$httpリクエストで複数のルートを作成しようとしています。私の問題は、ルートが変更され、ページの内容が後で表示されるときに始まります。 私は何らかの方法でそれを理解し、私はそれが正しい方法ではないと考えます。 より良い方法があるかどうか誰かが私に教えてくれることを願っています。

注： AngularJsバージョン：1.6 | UIのルータを使用して

main.js

var asTwl = angular.module('asTwl', ['ui.router']); asTwl.controller('generals', function($scope, $http, $timeout){ $scope.pageLoader = false; $scope.getPageData = function(path, postData, obj){ $scope.pageLoader = true; $http({ method: 'post', url: path, data: postData, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(function(response) { if (response.data) { $scope.data[obj] = JSON.parse(response.data); $timeout(function(){ $scope.pageLoader = false; }, 100) } }) .catch(function(e) { new Error('Error: ', e); throw e; }) } }); asTwl.controller('homePage', function($scope, $http){ var postData = { //data... } $scope.getPageData('path', postData, 'home') }) asTwl.controller('singlePage', function($scope, $http, $stateParams){ var postData = $stateParams; $scope.getPageData('path', postData, 'page') }) asTwl.controller('categoryPage', function($scope, $http, $stateParams){ var postData = $stateParams; $scope.getPageData('path', postData, 'category') }) asTwl.config(function($stateProvider, $urlRouterProvider, $locationProvider){ $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', templateUrl : 'templates/pages/home.html', controller : 'homePage' }) .state('info', { url: '/info/:id', templateUrl : 'templates/pages/info.html', controller : 'singlePage' }) .state('category', { url: '/category/:type/:id', templateUrl : 'templates/pages/category.html', controller : 'categoryPage' }) }); 

ありがとうございました！

Answer 1

あなたは最初のデータで遊ん用サーバー/ APIとの通信を担当するサービスを作成する必要があります。そのメソッドgetPageDataを含めると、それは約束オブジェクトを返します。

app.service('myService', function($http){ 
    var self = this; 
    self.getPageData = function(path, postData){ 
     return $http.post(path,postData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }); 
     .catch(function(e) { 
      new Error('Error: ', e); 
      throw e; 
    }); 
}); 

サービスは、簡単にあなたのAjaxの約束が解決されるまで待機しますui-routerの状態のresolveオプションを利用することができます。

.state('info', { 
    url: '/info/:id', 
    templateUrl : 'templates/pages/info.html', 
    controller : 'singlePage', 
    resolve: { 
     getData: function(myService) { 
      return myService.getPageData('path', {}, 'info') 
     } 
    } 
}) 

Answer 2

まず、サービスへの$httpの呼び出しをラップします。次に、使用しようresolvehttps://github.com/angular-ui/ui-router/wiki#resolve

編集[OK]を、一例は、（サービスにラップなし）ここで

：で

asTwl.controller('homePage', function($scope, routeData){ 
     $scope.someData = routeData; 
}) 

Answer 3

：

$stateProvider 
.state('home', { 
    url: '/', 
    templateUrl : 'templates/pages/home.html', 
    controller : 'homePage', 
    resolve: { 
     routeData: function($http){ 
     return $http({ 
     method: 'post', 
     url: 'path', 
     data: postData /* your POST data - i don't know what is it for your code*/, 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded'    } 
     }) 
    } 
    } 
}) 
.state('info', { 
    url: '/info/:id', 
    templateUrl : 'templates/pages/info.html', 
    controller : 'singlePage' 
}) 
.state('category', { 
    url: '/category/:type/:id', 
    templateUrl : 'templates/pages/category.html', 
    controller : 'categoryPage' 
}) 

とコントローラにあなたのルートは次のように変更する必要があります。

.state('category', { 
    resolve: { 
     data : ($stateParams, dataService) => dataService.getData('path', $stateParams, 'category') 
    }, 
    url: '/category/:type/:id', 
    templateUrl : 'templates/pages/category.html', 
    controller : 'categoryPage' 
}) 

そしてgetData方法は、サービスにリファクタリングする必要があります（dataService）