如何在具有某些ui视图的状态下管理工厂单个请求数据(How to manage factory single request data in a state with some ui views)

作为AngularJS的新手，我正在尝试理解如何管理单个$http.get请求的单个JSON ，该请求将由2个不同的ui-view中的2个不同控制器使用。

这个想法是在第一个ui-view显示用户的数据，在第二个ui-view中显示故事的数据。

现在我的工厂做2 $http请求，因为它被两个控制器调用了两次。

现在我拥有的是它所遵循的内容：

homeFactory.js

home.js

app.js

的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>

我怎么能达到我的需要呢？

谢谢你的建议。

UPDATE

我在主控制器上应用的解决方案是通过resolve指令请求数据，并将控制器设置为每个视图，如下所示：

$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视图。

Being pretty new at AngularJS, I'm trying to understand how to manage a single JSON that is comming from a single $http.get request which is gonna be used by 2 different controllers in 2 diferent ui-view.

The idea is to show the data of the user in the first ui-view and the data of the story in the second one.

Right now my factory do 2 $http requests, due to it's called twice by the two controllers.

Right now what I have is what it follows:

homeFactory.js

home.js

app.js

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>

How could I achieve what I need?

Thanks in advice.

UPDATE

The solution I applied is on the main controller is to request the data via resolve directive and asign a controller to each view as it follows:

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

Then you don't need to declare ng-controller to the html view.

最满意答案

您可以使用ui-router的resolve来进行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 }]);

You can use ui-router's resolve to make the api call and inject the resolved data into the controller.

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" } } });

Controller:

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

更多推荐

app,function,$http,ui-view,controller,电脑培训,计算机培训,IT培训"/> <meta na