AngularJSでビューとUIを変更

私は2つのビューを取得し、それらの間で切り替えたい。 AngularJSでビューとUIを変更

私の最初のビュー（index.ejs）

は次のようになり、彼らがログインする前に、すべてのユーザーのためのダッシュボードで

<!DOCTYPE html> 
<html lang="en" ng-app="app" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <title>app.com</title> 
    <link type="text/css" rel="stylesheet" href="../css/style.css"> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
</head> 
<body> 
    <div ng-view></div> 
    <script src="../lib/angular/angular.js"></script> 
    <script src="../lib/angular-route/angular-route.js"></script> 
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script> 
    <script src="../lib/angular-resource/angular-resource.js"></script> 
    <script src="../js/app.js"></script> 
    <script src="../js/controllers/indexCtrl.js"></script> 
    <script src="../js/services/Api.js"></script> 
</body> 
</html>

はパスポートと認証した後、私はに切り替えたい：（OnePager：登録とに関する情報について）この（home.ejs）：

<!DOCTYPE html> 
<html lang="en" ng-app="app" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <title>app.com</title> 
    <link type="text/css" rel="stylesheet" href="../css/style.css"> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script> 
     <script> 
      var socket = io(); 
     </script> 
</head> 
<body> 
<SOME OTHER HTML INCLUDED SIDEBARS & TOP BARS> 
    <div ng-view></div> 
    <script src="../lib/angular/angular.js"></script> 
    <script src="../lib/angular-route/angular-route.js"></script> 
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script> 
    <script src="../lib/angular-resource/angular-resource.js"></script> 
    <script src="../js/app.js"></script> 
    <script src="../js/controllers/homeCtrl.js"></script> 
    <script src="../js/services/Api.js"></script> 
</body> 
</html>

だから私の側 - とトップバーには、SPAのような静的な滞在する必要があり、ちょうどルートをナビゲートによりNG-ビューを変更します。

これを行うにはどのような方法が最適ですか？

おかげで、すべてのChzn

出典

2017-05-04 chzn

まず、あなたは彼らがタグngのアプリで定義されているすべてのアプリケーションで利用可能な滞在のインデックスに入れているため一度home.ejsにすべてのスクリプトを宣言する必要はありません。さて、あなたの質問自体のあなただけの別のファイルにHTMLコードを作成して、インデックスファイルにその参照を追加し、NG-アプリのJSスクリプトで次の文を入れて何ができるか：

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

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/home', { templateUrl: home.html, controller:homeController }); 
    $routeProvider.otherwise({ redirectTo: '/' }); 
}]); 

app.controller('mainController', ['$scope', $location, function($scope, $routeProvider){ 
    $location.path("/home"); 
}])

mainControllerをインデックス内のng-controllerタグの中に置くだけで済むと思います。

私が役に立ったら教えてください。

出典

2017-05-04 22:56:15

最初の大きなおかげで、高速な応答です。しかし、私は実際にこれすべてを知っています。ルート・プロバイダーの使用方法、および部分ファイルを別々のファイルから表示する方法について説明します。しかし、私の主な質問は、私がTwitch SPA [https://www.twitch.tv/]のような静的な側面とトップバーを得る方法です。私は静的なトップとサイドバーなしでインデックスファイルをロードしたい。それは呪い[リンク]（http://www.curse.com/）でこれのように見えます。認証後、静的なトップとサイドバーをロードし、最初のリンクのtwitchアプリケーションと同様に、routeeprovider経由でng-viewを変更します。 – chzn

よく分かりました。私が探しているのは、ネストされたビュー（子ビュー）です。角度のある人からui-routerを使って簡単に行うことができます。これはここに見つけることができますhttps://github.com/angular-ui/ui-router

出典

2017-05-05 01:56:29 chzn

AngularJSでビューとUIを変更

答えて

関連する問題