AngularJS ng-route 해결 방법에 대한 HTTP 요청 방법

Question

입력 및 앵커 링크가있는 간단한 템플리트가 있습니다.이 템플리트를 누르면 다른 템플리트가로드됩니다. 이 두 번째 템플릿에서 http 요청을 통해 정보를 가져 오려고합니다.

기본적으로 ng-route를 사용하여 검색 템플릿으로 리디렉션하고 경로/search/: title에서 결과 템플릿으로 리디렉션을 사용하고 결과 템플릿을로드하기 전에 resolve를 사용하여 요청을 작성하려고합니다 (code in plunker).)

내가 직면 한 주요 문제는 내가 컨트롤러를 초기화 할 때 (내가 약속이 반환 된 후에로드 할 것임) 초기화가 중단된다는 것입니다. 즉, 검색 URL과 같은 변수는 초기화되지 않고 $ searchParams는 컨트롤러 검색 기능에서 인쇄 할 때 비어 있습니다.

어떻게해야합니까?

해결 방법에 대한 올바른 구문에 대해 확신 할 수 없습니다. 첫 번째 검색이 범위 변수입니까? 난 당신이 서비스를 작성해야한다고 생각 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

라우팅

.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' 
     }); 
    }]); 

: Plunker에 확인 게으른 사람을위한

resolve: { 
    search: searchController.search 
} 

, 여기가 관련 코드 .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을 다시 공유, 당신은 당신이 원하는 걸 얻었 바랍니다.