2017-03-21 16 views
0

私は1つの状態を作り、別のページにナビゲートしようとしています。コンソールにエラーはありませんが、ナビゲーションは機能していません。hrefを使用したAngular ui-routerでのルーティングの問題

index.htmlを

<body ng-app="app"> 
    <a href='#/first-msg'>link</a> 
    <div ui-view></div> 

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> 
    <script src="application.js"></script> 
</body> 

application.js

var app = angular.module('app', ['ui.router']); 
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) { 
    $stateProvider.state('firstMessage', { 
     url: '/first-msg', 
     templateUrl: 'home.html', 
     controller: 'homeCtrl' 
    }); 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
}]); 
app.controller("homeCtrl", ['$scope', function($scope) { 
    $scope.message = "This is home"; 
}]); 

私はリンクをクリックしたとき、URLがui-routerを使用し

.../index.html#%2Ffirst-msg 

答えて

3

のようなものです、あなたはhrefを使用しないでください。代わりにui-srefを使用してください:

<a ui-sref="firstMessage">link</a> 

注意を私は状態名はなく、そのURLを使用しています。


JSFiddle demo

関連する問題