2016-04-14 3 views
5

ngRoute私はAngularJSアプリケーション(myApp)のルーティングを行っていますが、問題があります:私のindex.htmlデザインを適用する方法がわかりませんすべてのサイドバーを含む)を私のlogin.htmlページに貼り付けます。このページは、ビューとして定義されている場合はデフォルトで適用されるようです。 login.htmlページのシンプルなデザインがほしいです:私のindex.htmlというデザインがなくても、2つのフィールドしか入力できません。これはmyAppのすべてのビューに適用されます。それで、私はそのような仕事を達成するために私のルーティングをする方法を知らない。どうもありがとうございました。ログインページ(index.htmlのないデザイン) - ngRoute(AngularJS)

< - これは私が( - "/ VIEW1" 1つのビューのみのため) - て、myAppで私のルーティングを行う方法のサンプルです>

app.jsのサンプル:

'use strict'; 
// Declare app level module which depends on views, and components 
angular.module('myApp', [ 
'ngRoute', 
'ngResource', 
'ui.bootstrap', 
'ngCookies', 
'myApp.view1', 
]) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 

各ビューには、ルーティングとコントローラを定義した.jsファイルが関連付けられています。例えば、ビューのための "/ VIEW1" - view1.js

'use strict'; 

angular.module('myApp.view1', ['ngRoute', 'ngResource']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
    templateUrl: 'view1.html', 
    controller: 'View1Ctrl' 
    }); 
}]) 

.controller('View1Ctrl', ['$scope', function($scope) { 
// something 
}]); 

そして、私のindex.htmlのサンプル:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <script src="view1.js"></script> 
    <-- MORE SCRIPTS ARE LOADED --> 
</head> 
<body class="hamburg" ng-controller="MasterCtrl"> 
    <-- SIDEBARS ARE DEFINED --> 
    <div id="content-wrapper"> 
    <div class="page-content"> 

    <!-- Main Content --> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="widget"> 
     <div class="widget-body"> 
      <div ng-view></div> 
     </div> 
     </div> 
    </div> 
    </div> 

    </div> 
</div> 
</body> 

+0

実際のベアボーンアプローチは、次のようなものになります。https://jsfiddle.net/u2um2yeq/ サービスを使用してユーザーを検証するなど、フィドルログインを安全にするためには、さらに多くのことが行われますまたはトークンを要求ごとに送信します。 – Rob

答えて

2

あなたが望むように見える2 ページレイアウト(ページがデザインやページテンプレート)、最初のものは、今index.htmlで使用されている、とあなたが欲しい秒1はちょうどに2つのフィールドがありlogin.htmlで使用します記入してください。したがって、angular-ui/ui-router(doc url:https://github.com/angular-ui/ui-router/wiki)がこの問題の解決策になる可能性があります。

その背景にあるui-routerには、非常に強力なツールui-viewがあります。このツールは、レイアウトやテンプレートとして見ることができます。だから、パスが/indexまたは/homeのようなログインページ以外のページにある場合は、ui-viewを使用し、/loginページで別のui-viewを使用します。ラフ例えば

: index.htmlページ:

<html> 
    <head></head> 
    <body> 
     <div ui-view="layout"></div> 
    </body> 
</html> 

私はあなただけのオリジナルindex.htmlに身体からすべてのものをラップし、新しいindex.htmlに入れるので、ヘッド部分を再利用すると仮定。ログインページlogin.htmlと同じです。

設定ファイル:

$stateProvider 
    .state('index', { 
     url: '/index', 
     views: { 
      layout: { 
       templateUrl: "/path/to/index.html" 
      } 
     }, 
     controller: 'indexController' 
    } 

    .state('login', { 
     url: '/login', 
     views: { 
      layout: { 
       templateUrl: "/path/to/login.html" 
      } 
     }, 
     controller: 'loginController' 
}) 

それでは、上記のコードはやるんが、あなたが$routeProviderでやったことと非常に似て、それはcontrollerurl使用を定義しているviewをロードします。

ご希望の場合はお手数ですがご質問ください。

+0

ありがとう、私はこれが最善の解決策だと思う。 ui-routerでルーティングを更新しました。現在は動作しています。どうもありがとうございました。 – Ariana

+0

非常にあなたを助けてうれしい:) –

+0

私は同様の問題を抱えていました。上記のコードを試しました。しかし、ヘッダーとフッターを含むマスターページのみが読み込まれています。コンテンツページが読み込まれていません。

は働いていません。@ Davidあなたは何か考えていますか? –

0

ルーティングは、角度SPA内のビューを注入するために使用されます。私があなたの質問から得ることは、ログインダイアログが必要なことです。 あなたのために見るかもしれないngDialogまたはuibDialog

+0

私は欲しかったのですが、ありがとうございました。 – Ariana

0

あなたの場合、新しいレイアウトをロードする必要があります。私は、ログインとアプリケーションのために、ほとんど異なるレイアウトがあることを理解しています。この操作は、ページを新しい場所にリダイレクトすることと同じです。ログイン用の新しい角型アプリとコントローラ。あなたは:

$window.location.href="new/layout/template"を使用することができます。

続きを読む@ Angular Dev Docs

2

あなたのログインページを別のアプリケーションとして作成し、成功したログインの場合はssionをlocalSotageに保存してから、メインのngAppにリダイレクトする必要があります。

メインのngAppで、セッションがlocalStorageに存在するかどうかを検証し、必要がない場合はloginAppにリダイレクトします。

私はそれはちょっとしたものと思っていますが、AngularJSを使って3年間で他の解決策を見つけられませんでした。ここでは、index.htmlを適用しないようにする必要があるので、これが必要であることを覚えておいてください。そうするための唯一の方法は別のngAppを使用することです。このような状況を考えると

+0

ありがとうございます。それは私の問題の良い解決策だと思われますが、私は最も簡単な解決策はおそらく私のルーティングを角度uiルータで更新することだと思います。 – Ariana

関連する問題