角度ルーティングを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>
あなたは、このリンクをクリックした後にデモ用plunkerに行くことができます。 http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview –