web-dev-qa-db-ja.com

AngularJS UI-Router複数ページ

Angularは素晴らしいSPAですが、index.htmlに関連しない他のページが必要な場合は、UIビューが異なるUIルーターの状態によってどのように実現されますか？

たとえば、index.htmlがあります：

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body>
   <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>
...
</body>
</html>

app.js：

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

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

    $stateProvider
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('crm', {
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })
...

今、私はlogin.htmlが必要ですが、これはindex.htmlとは完全に異なります（インデックスのヘッダー、フッター、サイドバーは必要ありません）。州によって。 login.htmlを組み合わせる方法？

難しいことではないようですが、わかりません。

javascriptangularjssingle-page-applicationangular-ui-router
13
swolfish

予想通り、それほど難しくはありません plunker があります。

トリックは、特定のテンプレート内のすべてのビューに共通のものを移動することです。 common.htmlと抽象状態を作成します。つまり、index.htmlはクリーンなままです。

<body>

    <div ui-view=""></div>
</body>

そして、その前のコンテンツ（index.html）のコンテンツはcommon.htmlに移動されます。状態の定義は次のようになります。

$stateProvider
  .state('common', {
    templateUrl: 'tpl.common.html',
    abstract: true,
  })
  .state('dashboard', {
    url: '/dashboard',
    parent: 'common',
    ...
  })
  .state('crm', { 
    url: '/crm',
    parent: 'common',
    ...
  })
  .state('login', {
    url: '/login',
    templateUrl: 'tpl.login.html',
  });

$urlRouterProvider.otherwise('/crm');

おもしろい（私はそう思う）とは何ですかabstract state、rlなし =。つまり、すべての現在のロジックは残りますであり、要約だけがレイアウトテンプレートの役割を果たすことになります。

詳細はこちらをご覧ください： 例

14
Radim Köhler

以前にもこの問題がありました。興味があれば [〜＃〜] this [〜＃〜] を参照してください。そのリンクでは、ユーザーが認証されていない場合に備えて、returnUrlおよび401 http status codeも処理しました。

あなたの場合は、次のようにアプリケーションを設計することをお勧めします。

index.html：

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body data-ui-view>

</body>
...
</html>

main.html：

  <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>

login.html

（このビューのHTMLを含める）

App.js：

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

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

    $stateProvider
    .state('login',{
       url:"/login",
       templateUrl: '/app/login.html',
       controller: 'LoginCtrl'
     })
    .state('main',function(){
       url:"/",
       templateUrl: '/app/main.html',
       controller: 'MainCtrl',
       abstract: true //you could use abstract state or not depending on your design 
    })
    .state('main.dashboard', { //inherit from your main
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('main.crm', { //inherit from your main
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })

説明：

angular is SPA、your index.html should cover all views that you sure that it are least different to。this example、the loginis is a stateアプリケーション内でmainから分離されています。angularルーターで状態継承を利用することにより、さらに子を持つことができますこの場合、main内の状態はdashboardとcrmです。

4
Khanh TO