2017-04-04 1 views
0

ルーティング:AngularJS:だから私は角tutoを見ていたし、男は「ngRoute」を説明し、どのようにそれを使用するには、この例を使用していた

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

 
myApp.config(function ($routeProvider) { 
 
    $routeProvider 
 
     .when('/', { 
 
      templateUrl: 'pages/home.html', 
 
      controller: 'mainController' 
 

 

 
     }) 
 
     .when('/second', { 
 
      templateUrl: 'pages/second.html', 
 
      controller: 'secondController' 
 

 
     }) 
 

 
}); 
 

 

 
myApp.controller('mainController', ['$scope', '$route', function ($scope, $route) { 
 

 

 

 

 
}]) 
 
    .controller('secondController', ['$scope', '$route', function ($scope, $route) { 
 

 

 

 

 
}]);
<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <!-- Fixed navbar --> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Angular</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#/second">Second</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
     
 
     <div ng-view class="jumbotron"></div> 
 

 
    </div> <!-- /container --> 
 

 

 

 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script> 
 
    <script src="app.js"></script> 
 
</body> 
 

 

 

 
</html>

、それは彼のために働いていましたしかし、私にとっては、ホームリンクだけが働いていたが、<a href="#/second">Second</a><a href="#!/second">Second</a> に変更してもうまくいかなかったのはなぜですか?

+1

あなたが使用していたバージョンのためです。あなたが視聴したビデオは、角度1.4または1.5で表示される可能性があります。 ngRouteと一緒に行けない、ngRouteよりも柔軟なui-routerを試してください –

+0

はい、私の友人もそう言いました! ありがとうございます – damer

答えて

2

おそらくバージョン1.6を使用していますか? 。この1.6の角度のチームでは、デフォルトの$ locationハッシュ接頭辞を '!'に変更することに決めました。 。あなたは '(...

$ locationProvider.hashPrefixあなたが設定中にあなたのルートファイルから次のコードを持っていないことを確認することができます

https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6

+0

バージョンに関連していました:/ ありがとうございました。私はあなたの助けに感謝します – damer

+0

@damer喜んで助けてください。それはあなたのために役立つ場合は、私を受け入れることを忘れることはありません^^ – Akashii

1

で読むことができます! ');

+0

はい私はそれがなぜ使用している角度のバージョンに関連している理由だと思う – damer

関連する問題

 関連する問題