Javascript 在angular singe page应用程序引导时创建登录微调器_Javascript_Angularjs

Javascript 在angular singe page应用程序引导时创建登录微调器

javascript angularjs

Javascript 在angular singe page应用程序引导时创建登录微调器,javascript,angularjs,Javascript,Angularjs,我使用angular创建了一个单页应用程序问题是它需要很长时间才能加载我想向用户展示一个微调器，指示应用程序正在加载问题是我想用ng if=“isappload” 我正在为angualr应用程序模型内的这个div选择一个变量我怎样才能管理它尝试使用$rootScope.isAppLoading，但这不会改变它的值代码如下谢谢这是我的small-talkz.model.js： var smallTalkzModel = angular.module('smallTalkzModel

我使用angular创建了一个单页应用程序

问题是它需要很长时间才能加载

我想向用户展示一个微调器，指示应用程序正在加载

问题是我想用

ng if=“isappload”

我正在为angualr应用程序模型内的这个div选择一个变量

我怎样才能管理它

尝试使用

$rootScope.isAppLoading

，但这不会改变它的值

代码如下

谢谢

这是我的small-talkz.model.js：

var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {

    $routeProvider
    .when('/', {
      templateUrl : 'components/login/loginView.html',
      controller  : 'loginController'
    }) 
    .when('/chat', {
      templateUrl : 'components/chat/chatView.html',
      controller  : 'chatController'
    });
  }).run(function ($rootScope) {

    // App is loading, so set isAppLoading to true and start a timer
    console.log($rootScope);
    $rootScope.isAppLoading = false;

  });;

这是我的index.html

 <!DOCTYPE html>
 <html>
 <head>

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

    <script src="small-talkz.model.js"></script>
 </head>
 <div ng-app="smallTalkzModel" ng-view>
 </div>

 <div class="fade-it" ng-if="isAppLoading">
        <h3>loading</h3>
        <div spinner></div>
 </div>
 </html>


加载

更新：我添加了以下代码：

 <div ng-app class="fade-it" ng-if="isAppLoading == false">

    <h3>loading --------> {{isAppLoading}} </h3>
    <div spinner></div>

 </div>


正在加载------->{isAppLoading}

结果是文本：加载------->{isappload}

我可以看到angular是不活跃的。。。{{isAppLoading}}未进行评估。

请注意，如果

或ng show
，则不能使用任何角度逻辑，如ng，因为angular尚未引导，并且在应用程序运行时会忽略该逻辑（这是一种遗漏）
你需要改变你的逻辑。在加载angular应用程序之前，您的ng if
将无法工作。因此，最好在默认情况下显示加载程序，并且仅当应用程序已初始化时才显示应用程序
我要做的是，在css中已经配置了加载程序的状态（因此，加载程序是可见的，但应用程序本身不可见）。然后，当angular引导我的应用程序时，它使用ng class
添加了一个类（我在那里设置了一个true条件，使它无论如何都计算为true）。该类更改了隐藏加载程序并显示实际应用程序的条件（现在已经加载了）
我是这样做的：
html
ofc您仍然可以使用一个变量来告诉应用程序何时已加载$rootScope.isAppFinishedLoading
，而不是html中的true

希望这有帮助：-）
您的html文件缺少标记。请尝试反转逻辑，仅当isAppLoading为true时显示app div。并且您可以使用css显示道具设置为none初始值感谢您的回答。。我更新了我的消息，angular似乎不在处理这个divtag@Matoy-我更新了我的答案。但你没听我说。当angular尚未完成加载时，您需要使用非angular的东西。因此，如果使用ng将不起作用。因此，您需要使用css，并且仅当您想要隐藏加载程序并显示应用程序本身时才使用angular。此外，fade it
元素中的所有内容都将在angular加载之前显示，因为h3
的内容是有效的常规html字符串。浏览器将在$compile函数处理该值并显示正确值之前渲染该值
<div ng-controller="mainController as main"
     class="main-app-container"
     ng-class="{'app-initiated': true}">
       <!-- APP CONTENT HERE -->
</div>
<div class="loading-logo"
     ng-class="{'app-initiated': true}">
     <div class="loading-spinner"></div>
</div>

.main-app-container {
  opacity: 0;
  transition: opacity 0.5s ease;

  // shows the app
  &.app-initiated {
    opacity: 1;
  }
}

.loading-logo {
  transition: all 500ms ease;
  transition-delay: 800ms;

  // hides the loader
  &.app-initiated {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}