2016-06-29 5 views
0

StackOverflowを既に検索しましたが、私が探しているものに対して適切な解決策を見つけることができなかったので、再度質問します。私はいくつかのクールな写真などで "スプラッシュページ"で始まる特定のアプリケーションを作成しようとしていますが、特定の時間の後 - 例えば4秒 - それは次のページに移行します。これどうやってするの?私はtimeout()関数についていくつかのことを読んでいますが、実際には理解できませんでした。AngularJS - 特定の時間制限後にページ間を切り替える

時間切れになると、ui-srefまたはhrefをアクティブにして次のページに移動するようなタイミング機能が考えられます。ところで、私はちょっとAngularJSの初心者ですので、裁判をしないでください:) 私はいくつかのコードを投稿したい場合は、私はそうすることができますが、私は実際にどこから始めるべきか考えていません。両方のページのためのいくつかのテンプレート。

ありがとうございます。

答えて

1

スプラッシュページのコントローラに$ stateと$ timeoutを注入すると、機能を持つことができます。

function activate(){ 
    $timeout(function(){ 
    $state.go('page2') 
    },4000) 
} 
activate(); 

また、リダイレクトではなく、あなたがリダイレクトする必要がいけないが、私はあなたのアプリケーションの設計方法を知らないように、4秒後に消え、あなたのメインページのポップアップを持っていませんでした。

これは、私は時間が満了したとき、それは次のページに移動するためにUI-SREFまたはHREFを活性化すること、タイミング機能のいくつかの並べ替えのために考えているにも

+0

はい、私は設定したルートとコントローラを持っている...私は自分のコードにコードを統合しようとしたが、何をしていないようでした何か?これを行う別の方法がありますか?助けてくれてありがとうbtw – Freedom

+0

コントローラのコードスニペットを投稿してください – Jake

1

あなたが設定し、いくつかのルートを持っていると仮定しています。

これはまさに$timeout()です。関数とタイムアウト(ミリ秒単位)を渡すと、指定したミリ秒が経過するとその関数が実行されます。

ので、

$timeout(function() { 
    $state.go('page2'); 
}, 4000); 

は4秒(4000ms)のタイムアウト後(PAGE2に行く)関数を呼び出します。 $ timeout()の後のコード行はすぐに実行されます(つまり、タイムアウトを待たない)。

このコードは、スプラッシュページのコントローラの先頭に置くことができます。 $ stateと$ timeoutを必ず注入してください。

1

以下は、単純なベアボーンのアプリケーションです。 stateProviderではなくrouteProviderモジュールを使用しますが、同じ原則が適用されます。

私はlive Plunkerのデモをまとめました。 $ timeoutの使用方法の詳細については、hereをクリックしてください。

要部である:

app.controller('MainCtrl', function($scope, $timeout, $location) { 
    // Main controller 

    $scope.title = "First Page"; 

    var goToSecondPage = function() { 
    $location.path('/second'); 
    }; 

    $timeout(goToSecondPage, 5000); 
}); 

app.js

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

app.controller('MainCtrl', function($scope, $timeout, $location) { 
    // Main controller 

    $scope.title = "First Page"; 

    var goToSecondPage = function() { 
    $location.path('/second'); 
    }; 

    $timeout(goToSecondPage, 5000); 
}); 

app.controller('SecondCtrl', function($scope, $timeout, $location) { 
    // Second controller 

    $scope.title = "Second Page"; 

    var goToMainPage = function() { 
    $location.path('/'); 
    }; 

    $timeout(goToMainPage, 5000); 
}); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: "main.tpl.html", 
      controller: 'MainCtrl' 
     }) 
     .when('/second', { 
      templateUrl: "second.tpl.html", 
      controller: 'SecondCtrl' 
     }) 
     .otherwise({ redirectTo: '/' }); 
}]); 

index.htmlを

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <h1>My Angular App</h1> 
    <ng-view></ng-view> 
    </body> 

</html> 

main.tpl。HTML

<h2>{{title}}</h2> 

<p>You will be redirected to the second page in 5 seconds...</p> 

second.tpl.html

<h2>{{title}}</h2> 

<p>This is the second page.</p> 

<p>You will be redirected to the main page in 5 seconds...</p> 
関連する問題