正确检索用户名和有用的值（网站标题，版权等）

我有一个基于这个项目的简单的Web应用程序（ https://github.com/arthurkao/angular-drywall ），以NodeJS和AngularJS作为前端运行。

我正在设置一个简单的页面，显示地图上所有已连接用户的列表（使用Google地图，地理位置和PubNub）。

以下是我如何做到这一点：

angular.module('base').controller('TravelCtrl', function($rootScope, $scope, NgMap, security, $geolocation, PubNub){ $rootScope.extusers = []; //remote users $scope.initTravel = function() { //declare the init function PubNub.init({ subscribe_key: $rootScope.security.keys.psk, publish_key: $rootScope.security.keys.ppk, uuid: $rootScope.security.currentUser.username, ssl: true }); PubNub.ngSubscribe({ channel: "travel", state: { position: {}, } }); console.log("Loaded Travel"); $geolocation.getCurrentPosition({ timeout: 60000 }).then(function(position) { //when location is retreived $scope.position = position; PubNub.ngSubscribe({ channel: "travel", state: { position: { lat: Math.floor($scope.position.coords.latitude*1000)/1000, //decrease accuracy long: Math.floor($scope.position.coords.longitude*1000)/1000, }, } }); $rootScope.$on(PubNub.ngPrsEv("travel"), function(event, payload) { $scope.$apply(function() { $scope.extusers = PubNub.ngPresenceData("travel"); }); }); PubNub.ngHereNow({ channel: "travel" }); $scope.showInfo = function(evt, marker) { //show user window on map $scope.extuser = marker; $scope.showInfoWindow('infoWindow'); }; }); }; if ($rootScope.hasLoaded()) { //if username and keys are already loaded, then init module $scope.initTravel(); } else { //else, wait for username and keys to be loaded $rootScope.$on('info-loaded', function(event, args) { $scope.initTravel(); }); } } ); 

虽然它的工作，它似乎是非常多的，只有有时候加载。 偶尔，我得到这个：

结果截图

我真的不知道我做错了什么，因为我只是按照PubNub的AngularJS SDK上的教程。

我认为这与我如何初始化应用程序有关。

 angular.module('app').run(['$location', '$rootScope', 'security', function($location, $rootScope, security) { // Get the current user when the application starts // (in case they are still logged in from a previous session) $rootScope.hasLoaded = function() { return (security.keys && security.info && security.currentUser); //check if everything is loaded correctly }; $rootScope.checkLoading = function() { if ($rootScope.hasLoaded()) { $rootScope.$broadcast('info-loaded'); //broadcast event to "TravelCtrl" in order to init the module } }; security.requestKeys().then($rootScope.checkLoading); //request secret keys security.requestSiteInfo().then($rootScope.checkLoading); //then templating info (site title, copyright, etc.) security.requestCurrentUser().then($rootScope.checkLoading); //and finally, current user (name, id, etc.) $rootScope.security = security; // add a listener to $routeChangeSuccess $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.title = current.$$route && current.$$route.title? current.$$route.title: 'Default title'; }); }]); 

1-使用JSON API请求密钥，站点信息和当前用户。

等到所有东西都加载完毕后，用适当的键（PubNub，Google Maps）初始化应用程序，

– 我的问题是：如何在通过RESTful API检索有用信息之后实例化AngularJS应用程序？

我对AngularJS很新，如果我的方法是荒谬的，我不会感到惊讶，但我真的需要得到一些build议。

在此先感谢您的帮助，

雅典

Answer 1

您不必等待AJAX​​查询结束以启动angular度APP。 你可以使用$ http promise（ 详细介绍她 ）

在控制器中：

 // Simple GET request example: $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available // data is now accessible in the html $scope.data = response ; // you can call a function to add markers on your maps with the received data addMarkerOnMap(response); }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. }); 

你也可以在一些variables上添加一个监视器来等待它们的修改：

 // you should have $scope.yourVarName declared. $scope.$watch('yourVarName', function(newValue, oldValue) { console.log(newValue); }); 

或者看一个列表/对象

 $scope.$watchCollection('[var1,var2]', function () { },true);