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

Properly retrieve username and useful values (site title, copyright, etc.)

本文关键字：标题 网站 用户 检索 有用      更新时间：2023-09-26

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

我正在尝试建立一个简单的页面，在地图上显示所有连接用户的列表（使用谷歌地图、地理位置和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请求密钥、站点信息和当前用户。

2-等待所有内容都加载完毕，然后使用适当的密钥（PubNub、谷歌地图）初始化应用程序

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

我是AngularJS的新手，如果我的方法完全荒谬，我不会感到惊讶，但我真的需要得到一些建议。

提前感谢您的帮助，

Ulysse

您不必等待AJAX查询结束才能启动有角度的应用程序。你可以使用$http承诺（详细信息）

在控制器中：

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

你也可以在一些变量上添加一个手表来等待修改：

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

或者观看列表/对象

$scope.$watchCollection('[var1,var2]', function () {
},true);
相关文章：