angularjs ui-router永続的なページ要素

現在、私のアプリケーションは3つのレイアウト（マーケティングレイアウト、認証レイアウト&アプリケーションレイアウト）に分割されていますが、現在、angularjsとui-routerの周りに頭を抱えようとしています。私は現在、私のUI-ルータは私がこれを行うことができるように取り組んでもらうのに苦労しています、私は抽象化された親の状態を（正しい？）持つことができることを理解し、私は、親ビューなどを継承する子の状態を取得するためにstruggline午前angularjs ui-router永続的なページ要素

基本的に私がやりたいことは次のとおりです。この例では、サイトのアプリケーションセクションを使用します。

ユーザーはログに記録され、画面はヘッダー、サイドバー、メインコンテンツ領域に分割されます。ユーザーはサイトのアプリケーションセクション内に入りますが、ヘッダーとサイドバーはメインコンテキスト関連するコンテンツに更新されます。ここに私がこれまで持っていたものがあります。

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){ 

$urlRouterProvider.otherwise('/application/dashboard'); 

$stateProvider 
    .state('application', { 
     abstract : true, 
     views : { 
      '@' : { 
       templateUrl : 'templates/layout.html', 
       controller : 'applicationController' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/header.html' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/sidebar.html' 
      }, 
      '[email protected]' : { 
       templateUrl : 'templates/app/main.html' 
      } 
     } 
    }) 
    .state('application.dashboard', { 
     url : '/application/dashboard', 
     views : { 
      '@' : { 
       templateUrl : 'templates/schools/manage.html', 
       controller : '' 
      }, 
      '[email protected]' : { 
       templateUrl : '' 
      } 
     } 
    })

]]）;

https://plnkr.co/edit/6fJNjTFhoKqyN82P7NvL?p=preview

また、あなたが、私はmanage.htmlテンプレートを見ることができる見ることができますが、プレビューの上に、私はまた、header.htmlテンプレートからページヘッダが表示されるはず、とsidebar.htmlとして.. 。

なぜ私はそうではないのですか？私はそれが私が間違っていると思っています。

出典

2017-01-20 Udders

私はあなたが言っているものを理解していれば、あなたは基本的にヘッダー、サイドバーとMainContentのアプリの骨格をしたいです。変更する必要があるのはMainContentだけです。ヘッダーまたはサイドバーの内容は変更される可能性がありますが、永続的になります。

私は個人的には、ルータがこれとは何の関係もないはずだと思います。ルータはルーティングする必要があります。それをデータバスとアプリケーション状態マネージャにすることは、そうしてはならないことを緊密に結びつけているようです。そうは言って、私はそれについて移動する方法

とにかく、ここにあります。私のindex.htmlには、私のマークアップがあります：

<body ng-app="app"> 
    <div header-directive></div> 
    <div ng-view></div> 
    <div footer-directive></div> 
</body>

これはそれです。あなたが他の要素を持っていて応答性が必要な場合は、ブートストラップグリッドを使用してください（サイドバーなどのように）。あなたがそれについて心配する必要がなければ、良いオールのシンプルなHTMLテーブルは仕事を完璧にします。あなたは離れて行くことはありません、固定位置、高さ、などこの設定で

、あなたのヘッダーとフッターを行うためにCSSを使用することができ、およびルータはNG-ビューの内容を変更します。ルータという用語は意味がある唯一のものです：ここからそこへルーティングしてください。ここにルータの設定例があります：

.config(['$routeProvider', ... 

     function ($routeProvider, ...) { 

      $routeProvider. 

       when('/home', { 
        templateUrl: 'views/home.html', 
        controller: 'HomeController', 
        controllerAs: 'homeCtl' 
       }) 

       .when('/info', { 
        templateUrl: 'views/info.html', 
        controller: 'InfoController', 
        controllerAs: 'infoCtl' 
       }) 

       ....

3つのコンポーネント間の通信については、すべてのサービスを作成するだけです。この方法で、要素（またはそのすべて）のいずれかの指示を送信して、内容を変更したり、必要なものを隠したり表示したりすることができます。

角度は、時には大幅にシンプルなものをovercomplicateありません。これは間違いなくその一つです。角2のルータは複雑な巨獣です。

出典

2017-01-20 12:50:45

angularjs ui-router永続的なページ要素

答えて

関連する問題