0

ng-view と routeProvider を介して各ページを表示するメインの index.html を持つ webapp があります。

現在、まだログインしていないユーザー向けのエントリ ページを追加しています。このページには、ログインしていないユーザー向けのさまざまなセクションをスライドさせるための独自の ng-view を含めることもできます (ようこそ、サインイン、サインアップなど)。 ) と css スクリプトを使用した彼自身の頭 ecc...

webapp インデックスとエントリ ページ インデックスの両方が www.example.com をアドレス指定することをお勧めします (したがって、 www.example.com/welcome のようなものはありません)。

私はこれに似た構造について考えました：

  • webapp/
    • 主要/
    • ページ1/
    • ページ2/
    • ようこそ/
      • セクション1/
      • 第2節/
      • index.html
      • welcome.js (エントリーページのAngularモジュール)
    • .htaccess
    • index.html
    • webapp.js (webapp の routeProvider を含む角度モジュール)

現在、すべてがここで処理されるように、すべての偽のクエリを index.html に書き換える .htaccess があります。

したがって、特に：

1) webapp.js の routerProvider に、ユーザーがログインしていないときに /welcome/index.html に移動するように伝えるにはどうすればよいですか? (run メソッドを使用する必要がありますか? 簡単な例が役立ちます)

.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when(...)
    .when('/', {
        templateUrl : 'main/webapp-main.html'
    })
    .when(...)

2) Welcome/index.html 内のすべてが index.html ng-view 内に読み込まれないようにするにはどうすればよいですか? (おそらく ng-if を使用して ng-view を非表示にしますか? または、routerProvider でこの動作を制御する方法がありますか?)

3) これらすべてを達成するためのより良い、より簡単な方法はありますか?

ありがとう。

更新: 私の質問には根本的な問題があったと思います...すべてが読み込まれ、別のページに切り替えるとアプリのリロードが発生し、すべてのデータが失われるため、完全に別のページを使用することはできません。したがって、Web サイト全体で同じメイン テンプレートを使用する必要があると思います。
次に、次のように追加します。angularjs でさまざまなスタイル シートを動的にロードする方法はありますか?

4

1 に答える 1

1

この質問は古いですが、私は有効だと思いますし、誰かが考えていることを明確にすることができます.

まず最初に、AngularJS アプリに単一のページを使用することを想定しています。それ以外の場合は、リダイレクト リンクのようなことを行う必要があり、other-index.html でまったく異なる Angular アプリケーションをロードし、最初のアプリケーションで必要なすべてのスクリプトもロードします。 .

1）使用ui-routerは簡単で、非常に堅牢です。必要なのはコンテナだけです。ui-viewその後ui-router、対応するhtmlでコンテナを埋めます

2) ナビゲーションを防ぐには、次のようにする必要があります。

angular.module('myApp', [])
.run(function($rootScope, mySessionService){
  $rootScope.$on('$stateChangeStart',
      function(event, next, nextParams, prev, prevParams) {
        // The info of your currentUser could be obtain from a service
        // or localStorage or cookies anyway you are already doing it
        var authorized= checkAuthorization(next.authorazedRoles,             
                          mySessionService.getCurrentRol());
        if(!authorized) {
          $rootScope.$state.go('defaultState');
          // Or $rootScope.$emit('NOT_AUTHENTICATED');
          // and some service will have to implement a listener for this emit
          // $rootScope.$on('NOT_AUTHENTICATED', func..redirect to X State)
        }
      });
});
于 2015-04-26T15:31:15.220 に答える