使用 AngularJS 显示特定时间的页面答案

【问题标题】：Show a page for a specific time using AngularJS使用 AngularJS 显示特定时间的页面
【发布时间】：2014-08-12 04:38:00
【问题描述】：

我正在使用 AngularJS 和 Ionic 框架。我想创建一个启动画面但不使用cloak。显示启动屏幕 10 秒后，我的应用程序应该转到另一个页面。第二页使用 Ionic 进行设计，即我使用 ion-nav-view、ion-side-menus 等。

我不知道怎么写。我搜索但找不到任何东西！请告诉我如何写这篇文章或给我发一份教程。

【问题讨论】：

使用$timeout 10 秒，然后使用$location.url() 或$location.url() 导航到您希望的其他位置
感谢您的回复。能不能写一段我能看懂的代码？

标签： angularjs splash-screen ionic-framework

【解决方案1】：

你必须在你的控制器中注入$location或者什么

$timeout(function() {
       //will be directed to / after 3 seconds.
       $location.path('/');
    }, 3000);

【讨论】：

这是正确的答案，但我应该将 $location 和 $timeout 设置为我的控制器。谢谢:)

【解决方案2】：

我写了这个，但 3 秒后没有改变我的页面。我要模拟闪屏！

js：

.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
  url: '/welcome',
  //If in a folder, template/welcome.html    
  templateUrl: 'welcome.html',
  controller: 'WelcomeController'
})
 .state('splash', {
    url: '/splash',
    //If in a folder, template/login.html
    templateUrl: 'splash.html',
    controller: 'LoginController '
})


$urlRouterProvider.otherwise("/splash");
})
 .controller('splashControlller', function ($scope) {
    $timeout(function () {
    //will be directed to / after 3 seconds.
    $location.path('/welcome');
}, 3000);
})

html:

  <body>
    <div>

      <ion-nav-view animation="slide-left-right"></ion-nav-view>
    </div>
      <script id="welcome.html" type="text/ng-template">
        <ion-view>
          <br /><br />
          <h1>Welcome</h1>
        </ion-view>
      </script>

      <script id="splash.html" type="text/ng-template">
          <ion-view ng-controller="splashController">
          <div class="kit-splash" >
                    <img class="jouyaSplashImg" alt="" src="Content/images/jouyaSplashImg.png"/>
                    <span class="splashVersion"></span>
                 </div>
        </ion-view>
          </script>
          </body>

【讨论】：

controller: 'LoginController ' 应该是controller: 'splashControlller'