Wie man Fabrik einzelne Anfrage Daten in einem Zustand mit einigen Ui Views

verwalten Ich bin ziemlich neu bei AngularJS, ich versuche zu verstehen, wie man eine einzige JSON, die von einer einzigen $http.get Anfrage kommt, die von 2 verwendet wird verschiedene Controller in 2 verschiedenen ui-view.Wie man Fabrik einzelne Anfrage Daten in einem Zustand mit einigen Ui Views

Die Idee ist, die Daten des Benutzers in der ersten ui-view und die Daten der Geschichte in der zweiten zu zeigen.

Im Moment tun meine Fabrik 2 $http Anfragen, aufgrund der es zweimal von den beiden Controllern aufgerufen wird.

Gerade jetzt, was ich habe ist, was es folgt:

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>

Wie kann ich erreichen, was ich brauche?

Danke in Beratung.

UPDATE

Die Lösung, die ich angelegt ist auf der Hauptcontroller ist, die Daten über resolve Richtlinie beantragen und einen Controller zu jeder Ansicht asign wie folgt:

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

Sie dann don‘ t müssen ng-controller zu der HTML-Ansicht erklären.

Quelle

2016-05-14 DevStarlight

Wahrscheinlich und externen Wrapper über diesen zwei Klassen, zu Hause und homeFactory? Zwei Klassen werden Daten an den Wrapper fragen, wenn Wrapper die Anfrage bereits erledigt hat, dann wird es Daten zurückgeben, sonst wird es die Anfrage senden ... –

Eigentlich wollte ich die API aufrufen, bevor die Ansichten – DevStarlight

Sie können Ui-Router's resolve verwenden, um den API-Aufruf zu machen und die aufgelösten Daten in den Controller zu injizieren.

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

Quelle

2016-05-14 13:01:59

diese Auflösung hinzufügen Zu der 'app.js' lädt es nicht den HTML-Code für jede' ui-view'. Bedeutet das, dass ich die Fabrik weiter benutze? also muss ich die Abhängigkeit in die 'app.js' injizieren? – DevStarlight

erhalten Sie einen Fehler? –

nicht einmal einen Fehler bekommen. Tatsächlich laden die 'ui-views 'keinen Inhalt. – DevStarlight

Wie man Fabrik einzelne Anfrage Daten in einem Zustand mit einigen Ui Views

Antwort

Verwandte Themen