2017-01-20 32 views
0

角度ルーティングをrouteProviderからstateProviderに移行しようとしていますが、ナビゲーションバーをクリックすると状態が表示されません。その要素にui-router$location変化に基づいて、テンプレートを置くAngular UI-Routerを使用して状態を取得するにはどうすればよいですか?

app.js

angular.module('sampleApp', ['ui.router', 'MainCtrl', 'NerdCtrl', 'NerdService']) 
    .config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home', { 
     url: '/home', 
     templateUrl: 'views/home.html', 
     controller: 'MainController' 
     }) 
     .state('nerd', { 
     url: '/nerd', 
     templateUrl: 'views/nerd.html', 
     controller: 'NerdController' 
     }); 
    }); 

main.htmlを

<body ng-app="sampleApp" ng-controller="NerdController"> 
<div class="container-fluid"> 
    <!-- HEADER --> 
    <nav class="navbar navbar-inverse"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" ui-href="home">Stencil: Node and Angular</a> 
     </div> 
     <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE --> 
     <ul class="nav navbar-nav"> 
      <li><a ui-sref="nerd">Nerds</a></li> 
     </ul> 
    </nav> 
    <!-- ANGULAR DYNAMIC CONTENT --> 
    <div ng-view></div> 
</div> 
<script src="libs/angular/angular.min.js"></script> 
    <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <!-- ANGULAR CUSTOM --> 
    <script src="js/controllers/MainCtrl.js"></script> 
    <script src="js/controllers/NerdCtrl.js"></script> 
    <script src="js/services/NerdService.js"></script> 
    <script src="js/appRoutes.js"></script> 
    <script src="js/app.js"></script> 
</body> 

答えて

2

利用ui-viewの代わりng-view、。

<div ui-view></div> 
2
  1. 体からng-controllerを削除します。 ui-routerを使用して、$stateProviderで定義した正しいテンプレートの正しいコントローラを注入します。
  2. Pankajと同様に、ng-viewui-viewに変更してください。
  3. 変更ui-href="home"ui-sref="home"
0

に、私はこの質問のためのソリューションを持っています。いくつかの時間前、私は同じことをやっていた:app.jsで

var app=angular.module('ppl_App',['ui.router','oc.lazyLoad','ngStorage','ngFileUpload']) 

は(app.jsで)UI-ルーティングコンテンツを提供します

angular.module('ppl_App').config(function($stateProvider,$urlRouterProvider){ 
$urlRouterProvider.otherwise('/login'); 

    $stateProvider 
    .state('root',{ 
     views: { 
      '@':{ 
       templateUrl:'index.html' 
        }, 
     '[email protected]':{ 
       templateUrl: 'app/views/common/header.html' 
          }, 
     '[email protected]':{ 
       templateUrl: 'app/views/common/content-left.html' 
          }, 
     '[email protected]':{ 
       templateUrl: 'app/views/common/contentright.html' 
         }, 
     '[email protected]':{ 
       templateUrl: 'app/views/common/footer.html' 
      } 
     }    
     }) 
    .state('root.login',{ 
      url:'/login', 
      views:{ 
       '[email protected]':{ 
         templateUrl:'app/views/login.html', 
         controller:'loginCtrl' 
              }, 
          }, 
        }) 


.state('root.register',{ 
    url:'/register', 
    views:{ 
      '[email protected]':{ 
      templateUrl:'app/views/register.html', 
      controller:'registerCtrl' 
       }, 
      },  
     }) 
    }); 

参照してください。スナップショットのビュー名(赤色の色):

See the view name in the snapshot (In red color shape)

これらのビューは、HTMLページで使用できます。 (私はindex.htmlの中で使用している)

<body ng-app="ppl_App"> 
    <div class="navbar navbar-inverse navbar-fixed-top" ui-view="navigation"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
       <a class="brand" href="">PPL</a> 
       <div class="pro_info pull-right"> 
        <div class="pro_icn"><img src="app/assests/images/pic_small.png"></div> 
        <div class="pro_txt">Me<b class="caret"></b></div> 
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
         <li><a tabindex="-1" href="#">My Profile</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="header header_fixed" ui-view="header"> 
     <!-- //header goes here --> 
    </div> 
    <div class="container"> 
      <div class="content_rgt" ui-view="content_right"> 
       <!-- //right content goes here --> 
      </div> 
      <div class="content_lft" ui-view="content_left"> 
       <!-- //left content goes here --> 
      </div> 
    </div> 
    <div class="clear"></div> 
    </div> 
    <div class="footr" ui-view="footer"> 
     <!-- //footer goes here --> 
    </div> 
    <script type="text/javascript" src="app/app.js"></script> 
</body> 

(赤色のボックスで)スナップショットにHTMLで使用する方法を参照してください:

See how to use in html in snapshot (In red color box):

あなたは、この特定にリダイレクトすることができます次のようにui-srefを使用して表示します。

<div class="addtnal_acnt"> 
    <a ui-sref="root.register">Create My Account Now !</a> 
</div> 


    <div class="addtnal_acnt"> 
     <br> 
      <a ui-sref="root.login"> Loging Again !</a> 
    </div> 

$ stateを使用してコントローラコード(.jsファイル)からリダイレクトすることができます。行く():

$state.go('root.login'); 

または

$state.go('root.register'); 
+0

あなたは、このリンクをクリックした後にデモ用plunkerに行くことができます。 http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview –

関連する問題