ngroute

私はベンは、簡単な例でngrouteをしようとしている

を使用して、私のブートストラップのナビゲーションバーでルーティングを行うことができませんでしたが、所望の結果を得ることができない。私は、以下のngroute

<li> 
       <a href="#Components"> 
        <i class="fa fa-recycle"></i> 
        <span class="menu-text">Reusable Components</span> 
        <span class="selected"></span> 
       </a> 
      </li>

と別の水平ナビゲーションバーのようなナビゲーションバーにルーティングしようとしましたこれらについては、この

<ul class="nav nav-pills"> 
       <li class="active"><a data-toggle="pill" href="#/home">Plan</a></li> 
       <li><a data-toggle="pill" href="#/about">Test</a></li> 
       <li><a data-toggle="pill" href="menu2">Track</a></li> 
       <li><a data-toggle="pill" href="menu3">Organise</a></li> 
      </ul>

のように私はこの

var app = angular.module('app', ['ngRoute']); 

app.controller('MainCtrl', function ($scope) { 
$scope.test = 'Hello World'; 
}); 

app.controller('pageCtrl', function ($scope) { 
$scope.test = 'Some page'; 
}); 

app.config(function ($routeProvider, $locationProvider) { 
$routeProvider 
.when('/Views/home', { 
    templateUrl: 'home.html', 
    controller: 'MainCtrl' 
}) 
    .when('/Views/home', { 
     templateUrl: 'home.html', 
     controller: 'MainCtrl' 
    }) 
.when('/Views/Components', { 
    templateUrl: 'components.html', 
    controller: 'pageCtrl' 
}) 
.otherwise({ 
    redirectTo: '/index' 
}); 
$locationProvider.html5Mode(true); 
});

ようrouting.jsファイルを作成しましたしかし、ルーティングを完了することができません...誰も私を助けることができます。

出典

2017-01-19 kdm123

をチェックアウトすることができますが、あなたは ''のhref = "/ビュー/コンポーネント" を試したことがありますか？ html5modeを使用している場合は、インデックスにベースを指定する必要があります。 '' –

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Routing</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="//code.angularjs.org/snapshot/angular.js"></script> 
    <script src="//code.angularjs.org/snapshot/angular-route.js"></script> 
    <script src="app.js"></script> 
    <base href="/" /> 
</head> 
<body ng-app="app"> 
    <ul class="nav nav-pills"> 
    <li class="active"><a data-toggle="pill" href="home">Plan</a></li> 
    <li><a data-toggle="pill" href="about">Test</a></li> 
    <li><a data-toggle="pill" href="menu2">Track</a></li> 
    <li><a data-toggle="pill" href="menu3">Organise</a></li> 
    </ul> 
    <div ng-view></div> 
</body> 
</html>

あなたはこのplnkrにhttp://plnkr.co/edit/lHOsNpgAbJ2ahiyXE4ok?p=preview

出典

2017-01-20 02:21:20 wahyder

： - これらのリンクをホバリングすると、localhost：7777/indexが表示されます。 html＃/ homeとその新しいページへのルーティングではありません。 – kdm123

答えて

関連する問題