Как управлять фабричными данными одного запроса в состоянии с некоторыми представлениями пользовательского интерфейса

0

Будучи довольно новым в AngularJS, я пытаюсь понять, как управлять одним JSON который отправляется из одного запроса $http.get который будет использоваться двумя разными контроллерами в двух разных ui-view.

Идея состоит в том, чтобы показать данные пользователя в первом ui-view и данных истории во втором.

Прямо сейчас моя фабрика делает 2 $http запросы, из-за которых она дважды называется двумя контроллерами.

Сейчас у меня есть то, что следует:

homeFactory.js

var homeFactory = angular.module('home.factory', []);

homeFactory.factory('homeData', [ '$http', '$q', function ($http, $q) {

  var endpoints = null;

  return {
    getStories: function(url) {
      return endpoints ?
      $q(function(resolve, reject) { resolve(endpoints); }) :
      $http.get(url + '/main/get', {
          transformRequest : angular.identity,
          headers : {'Content-Type' : undefined}
      }).then(function(data) { endpoints = data; return data; });
    }
  };
}]);

home.js

var home = angular.module('home', ['home.factory']);

home.controller('topbarCtrl', [ 'CONFIG', 'homeData', function(CONFIG, homeData) {
  var data = this;
  data.stories = {};

  homeData.getStories(CONFIG.API_URL).then(function(response) {               
    data.stories = response.data.stories;
  }, function(error) {
    console.log("Failed to load end-points list");                      
  });
}]);

home.controller('contentCtrl', [ 'CONFIG', 'homeData', function(CONFIG, homeData) {

  var data = this;
  data.stories = {};

  homeData.getStories(CONFIG.API_URL).then(function(response) {               
    data.stories = response.data.stories;
  }, function(error) {
    console.log("Failed to load end-points list");                      
  });    
}]);

app.js

(function () {    
   var app = angular.module('init', [
      'home', 'ui.router'
   ]);

   app.run([
      '$rootScope',
      '$state',
      '$stateParams',
      function ($rootScope, $state, $stateParams) {
         $rootScope.$state = $state;
         $rootScope.$stateParams = $stateParams;
      }
   ]);

   app.constant('CONFIG', {
      'API_URL': 'https://xxxxxxxxx/',
      'S3_PATH': 'http://resources.xxxxxxxxx.com',
      'CLOUDFRONT': 'http://resources.xxxxxxxxx.com'
   });

   app.config([
      '$stateProvider',
      '$urlRouterProvider',
      '$locationProvider',
      '$sceDelegateProvider',
      function ($stateProvider, $urlRouterProvider, $locationProvider, $sceDelegateProvider) {
         $sceDelegateProvider.resourceUrlWhitelist([
            'self',
            'http://resources.xxxxxxxxx.com/**'
         ]);

         $urlRouterProvider
            .when('/logout', '/')
            .otherwise('login');

         $stateProvider
            .state('home', {
               url: "/home",
               views: {
                  'header': { templateUrl: "app/Home/_topbar.html" },
                  'content': { templateUrl: "app/Home/_home.html" },
                  'footer': { templateUrl: "app/Home/_navbar.html" }
             }
          });
       }
    ]);
 }());

index.html

<!DOCTYPE html>

<html lang="en" ng-app='init'>

<head>
  <meta charset="utf-8">
  <script src="js/angular.min.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="app/app.js"></script>
</head>
<body>
  <script src="app/Home/home.js"></script>
  <script src="app/Home/HomeFactory.js"></script>
  <div ui-view="main">
    <div ui-view="header"></div>
    <div class="wrapper" ui-view="content"></div>
    <nav ui-view="footer"></nav>
  </div>
  <script src="js/sha512.js"></script>
</body>
</html>

Как я могу достичь того, что мне нужно?

Спасибо, совет.

ОБНОВИТЬ

Решение, которое я применил, находится на главном контроллере, чтобы запросить данные через директиву разрешения и назначить контроллер для каждого вида, как это следует из:

$stateProvider
  .state('home', {
    url: "/home",
    resolve: {
      response: [ 'CONFIG', '$http', function(CONFIG, $http) {
        return $http.get(CONFIG.API_URL + '/home').then(function(response) {
          return response.data;
        });
      }]
    },
    views: {
      'header': { templateUrl: "app/Home/_topbar.html", controller: 'headerCtrl', controllerAs: 'my' },
      'content': { templateUrl: "app/Home/_home.html", controller: 'contentCtrl', controllerAs: 'my' },
      'footer': { templateUrl: "app/Home/_navbar.html", controller: 'footerCtrl', controllerAs: 'my' }
    }
  });

Тогда вам не нужно объявлять ng-controller для представления html.

  • 0
    Возможно и внешняя обертка выше тех 2 классов, home и homeFactory? Два класса будут запрашивать данные для оболочки, если оболочка уже выполнила запрос, то она вернет данные, в противном случае она отправит запрос ...
  • 0
    на самом деле то, что я искал, чтобы позвонить API перед просмотром
Теги:

1 ответ

1
Лучший ответ

Вы можете использовать resolve ui-router для вызова api и вставить разрешенные данные в контроллер.

app.js

$stateProvider
     .state('home', {
         url: "/home",
         resolve: {
             response: ['homeData', '$q', 'CONFIG', function(homeData, $q, CONFIG) {
                 var deferredData = $q.defer();
                 homeData.getStories(CONFIG.API_URL).then(function(response) {
                     return deferredData.resolve({
                         data: response.data
                     });
                 })
                 return deferredData.promise;
             }]
         }
         views: {
              'header': { templateUrl: "app/Home/_topbar.html" },
              'content': { templateUrl: "app/Home/_home.html" },
              'footer': { templateUrl: "app/Home/_navbar.html" }
         }
});

контроллер:

home.controller('topbarCtrl', ['response', function(response) {
    console.log(response.data) //this will contain the response data
}]);

home.controller('contentCtrl', ['response', function(response) {
    console.log(response.data) //this will contain the response data
}]);
Поделиться
  • 0
    добавив это разрешение в app.js , он не загружает HTML для каждого пользовательского ui-view . Значит ли это, что я продолжаю использовать factory ? поэтому я должен ввести зависимость в app.js ?
  • 0
    Вы получаете какую-либо ошибку?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню