AngularJS ng-route如何解析http請求

Question

我有一個簡單的模板，帶有一個輸入和一個錨鏈接，當按下它時，會加載另一個模板。我想要第二個模板通過http請求獲取信息。

我正在使用ng-route默認重定向到搜索模板，並使用路徑/ search /：title中的結果模板，我試圖在加載結果模板之前使用解析來製作請求（code in plunker ）

我面臨的主要問題是，當我添加解析控制器停止初始化（我想它會在承諾返回後加載）。這意味着像搜索URL這樣的變量沒有被初始化，並且當我在控制器搜索函數上打印它們時，$ routeParams是空的。

我該怎麼做？

我也不確定解析的正確語法。第一次搜索範圍變量？

resolve: { 
    search: searchController.search 
} 

對於那些懶得檢查Plunker，這裏是相關的代碼：

路由

.config(['$routeProvider',function($routeProvider) { 
    $routeProvider. 
     when('/search', { 
     templateUrl: 'templates/search.html' 
     }). 
     when('/search/:title', { 
     templateUrl: 'templates/result.html', 
     controller: 'searchController', 
     resolve: { 
      search: searchController.search 
     } 
     }). 
     otherwise({ 
     redirectTo: '/search' 
     }); 
    }]); 

searchController

var searchController = search.controller('searchController', ["$http", "$scope", "$location", '$rootScope', '$routeParams', function($http, $scope, $location, $rootScope, $routeParams) { 
    console.log("Controller constructor"); 
    this.searchURL = 'http://www.myapifilms.com/imdb?title=%thetitle%&format=JSON'; 
    $scope.response = '<Response here>'; 
    this.title = ''; 
    this.defer = null; 
    console.log("PARAMS: " + JSON.stringify($routeParams)); 
    }]); 

    searchController.search = function searchMovie($q, $routeParams) { 
     searchController.defer = $q.defer; 

     var searchString = $routeParams.title; 
     url = searchController.searchURL.replace('%thetitle%', searchString); 
     console.log("URL: " + url); 
     searchController.searchRequest(url); 
    }; 

    searchController.searchRequest = function(url) { 
     $http.get(url).success(function(data) { 
      .... 
      searchController.defer.resolve(); 
      return searchController.defer.promise; 
     }) 
     .error(function(data, status, headers, config) { 
      ... 
      searchController.defer.resolve(); 
      return searchController.defer.promise; 
     }) 
    }; 

Answer 1

我想你應該創建一個服務與.factory並相應地編輯：

angular.module('myApp', ['ionic', 'ngRoute', 'starter', 'wc.Directives']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if (window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }) 
}) 

.factory("search", function($q, $http){ 
    return { 
     getMessage: function(){ 
      //return $q.when("Response"); 
      var promise = $http({ method: 'GET', url: 'your_url'}).success(function(data, status, headers, config) { 
       return data; 
      }); 
      return promise; 
     } 
    }; 
}) 

.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
    when('/search', { 
     templateUrl: 'search.html' 
    }). 
    when('/search/:title', { 
     templateUrl: 'result.html', 
     controller: 'searchController', 
     /*resolve: { 
     search: searchController.search 
     }*/ 
     resolve: { 
      search: function(search){ 
       return search.getMessage(); 
     } 
     } 
    }). 
    otherwise({ 
     redirectTo: '/search' 
    }); 
    } 
]); 

你plunker分叉：http://plnkr.co/edit/Ry4LAl?p=preview

我希望你得到你想要的東西，你是用來幫助別人完成後分享你回來plunker。