Question

所以我通过StackOverflow在线搜索了多个结果，并且找不到我想要的答案。我正在尝试将我的主UI页面与我的AngularJS控制器放在一起。我想要完成的是一种同步调用，它将在主UI页面实际完全加载之前加载来自多个查询以及数据驱动节点的所有用户数据。其中一些查询需要2-3秒，我需要在用户开始播放/查看UI之前完成这些查询。

基本上我想做的是以下内容： 1）人导航到主页 2）加载用户数据 3）用户数据驱动数据驱动的UI设计 4）使用ng-bind值填写UI 5）UI现在完成加载以供用户查看

注意我对加载屏幕很好，不是真的有

小例子： http://plnkr.co/edit/9W8wZX8PhrSzv7KE8IEt

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">

  <head>

  </head>

  <body>
    <p><u>Username:</u></p>
    <p ng-bind="username"></p>
    <p><u>Completed in Order:</u></p>
    <p ng-repeat="order in list">{{order}}</p>
    <p><u>Projects:</u></p>
    <p ng-repeat="data in datas">{{data}}</p>
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script src="script.js"></script>

  </body>

</html>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, myService) {

  $scope.list = [];

  console.log('1 - Started Loading myCtrl');
  $scope.list.push('1 - Started Loading myCtrl')

  myService.getProjects().then(function(response){
      //console.log(response);
      $scope.datas = response.Result;
      $scope.list.push('2 - getProjects Complete');
  });

  myService.getUsername().then(function(response){
      //console.log(response);
      $scope.username = response.Result;
      $scope.list.push('3 - getUsername Complete');
  });

  //I don't want this to run until all the data is loaded
  $scope.list.push('4 - Finished Loading myCtrl');

});

app.factory('myService', function($http) {
  return{
    getProjects : getProjects,
    getUsername : getUsername
  }

  function getProjects(){
        return $http.get('project.txt')
            .then(getProjectsComplete)
            .catch(getProjectsFailed);

  function getProjectsComplete(response) {
      return response.data;
  }

  function getProjectsFailed(error) {
  console.log('XHR Failed for getProjectsFailed.' + error.data);
    }    
}
  function getUsername(){
        return $http.get('username.txt')
            .then(getUsernameComplete)
            .catch(getUsernameFailed);

        function getUsernameComplete(response) {
            return response.data;
        }

        function getUsernameFailed(error) {
            console.log('XHR Failed for getUsernameFailed.' + error.data);
        }    
  }  
});

我的示例文件：project.txt

{
   "Completed": true,
   "Status": true,
   "ExceptionType": "",
   "ExceptionMessage": "",
   "StartTime": "2016-12-16T14:19:17.7066714-05:00",
   "EndTime": "2016-12-16T14:19:20.7486909-05:00",
   "Result":    [
      "Project1",
      "Project2",
      "Project3",
      "Project4"
   ]
}

示例文件：username.txt

{
   "Completed": true,
   "Status": true,
   "ExceptionType": "",
   "ExceptionMessage": "",
   "StartTime": "2016-12-16T14:30:53.354957-05:00",
   "EndTime": "2016-12-16T14:30:53.354957-05:00",
   "Result": "IamBillyBob"
}

UI显示如下：

用户名： IamBillyBob

按顺序完成：

1 - 开始加载myCtrl
4 - 已完成加载myCtrl
3 - getUsername完成
2 - getProjects Complete

项目：

PROJECT1
Project2
项目3
Project4

我希望它更改为此并且始终在100％的时间内按此顺序加载：

按顺序完成：

1 - 开始加载myCtrl
2 - getProjects Complete
3 - getUsername完成
4 - 已完成加载myCtrl

AngularJS帮助 - 用户/数据驱动的UI在完成控制器

0 个答案: