角度jsの未加工のページ

私はAngularJsで行われた単一のページアプリケーションを作成しました。角度jsの未加工のページ

：私は（Herokuのサーバ上で）自分のアプリケーションのメインページに移動したときに

は、分割のための第二私はそうのように、ブラウザの左上側には生の状態にあるすべての画像とテキストを参照してくださいアプリケーションがそのように正しくアップロードされていることを後

：

これはので、私はアプリがロードされるまでロードのスピナーを載せていきたいと思いますかなり醜いです。

- ここに私の質問です - 何がこの遅延と要素の生の提示を引き起こしているのですか：1.ページコントローラ？または2. $ routeProviderによるアプリケーション全体の読み込み？私は、これがすべてのデータが前もってロードされるべきであることを意味する単一のページのアプリケーションであることを思い出させています。

私はルートプロバイダの私の実行の内部で変数を使用して、アプリケーションの状態を制御しようとしましたが、それは助けにはならなかったので、私は求めています：ので、私の考えはオプション1が正しいことである

$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 = true; 

    });;

。問題を引き起こす原因は、routeProviderが提示しようとしているページの制御者であり、routeProviderの読み込み時間自体ではありません。

本当ですか？私は、問題を説明することができた

希望...

おかげ

出典

2016-08-04 Matoy

これは何が起こっているか知りたいだけですか？ – Weedoze

isFinishedLoadingの私のvaribleを配置する場所を知りたい - 私が置いた例のようなルートプロバイダの内部か、ロードしようとしているページのコントローラの内部 – Matoy

コントローラの中 – Weedoze

あなたは、ページがロードされるまでローダーを示し、ロード中に他のコンテンツを非表示にすることができます。

はhead

body.loading > * { 
    display: none; 
} 

body.loading > .loader { 
    display: block !important; 
} 

body > .loader { 
    display: none !important; 
}

で、このCSSを入れて、デフォルトでbodyタグに

<body class="loading" ..> 
    <div class="loader">Loader Goes Here</div> 
    <!-- Rest of your HTML content goes here --> 
</body>

をクラスを追加し、その後、$rootScopeの状態変化イベントに耳を傾けることができます。このようなもの。

app.run(function ($rootScope) { 

    $rootScope.$on('$stateChangeSuccess', function() { 
     $('body').removeClass('loading'); 
    }); 

    $rootScope.$on('$stateChangeStart', function() { 
     $('body').addClass('loading'); 
    }); 
});

出典

2016-08-04 14:15:54

角度jsの未加工のページ

答えて

関連する問題