2016-11-25 4 views
0

チュートリアルの後でangularjsを学び、リンクから#を削除できることがわかりました。私はそれをしましたが、私の部分(templateUrlから)はもうページに入っていませんでした。 誰かが私が間違っている場所を教えてもらえますか?#私のangularjsページが削除されない

angular.module('myApp', ['ngRoute']) 
 
\t .controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) { 
 
    \t 
 
    \t $log.info($location.path()); 
 

 
    
 
\t }]) 
 
\t .controller('secondController', ['$scope', '$location', '$log', function($scope, $location, $log) { 
 
    \t 
 
    \t $log.info($location.path()); 
 

 
    
 
\t }]) 
 
\t .config(function($routeProvider, $locationProvider) { 
 
\t \t // $routeProvider lets us specify routes 
 
\t \t $routeProvider 
 
\t \t \t .when('/', { 
 
\t \t \t \t templateUrl: 'pages/main.html', 
 
\t \t \t \t controller: 'mainController' 
 
\t \t \t }) 
 
\t \t \t .when('/second', { 
 
\t \t \t \t templateUrl: 'pages/second.html', 
 
\t \t \t \t controller: 'secondController' 
 
\t \t \t }); 
 
\t \t $locationProvider.html5Mode(true); 
 
\t });
<!DOCTYPE html> 
 
<html lang="en-us" ng-app="myApp"> 
 
    <head> 
 
     <title>Learn and Understand AngularJS</title> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
 
     <meta charset="UTF-8"> 
 
     <base href="/"> 
 
     <!-- load bootstrap and fontawesome via CDN --> 
 
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
     <style> 
 
      html, body, input, select, textarea 
 
      { 
 
       font-size: 1.05em; 
 
      } 
 
     </style> 
 
     
 
     <!-- load angular via CDN --> 
 
     <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script> 
 
     <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script> 
 
     <script src="angularjs-learn-understand/ch05/app.js"></script> 
 
    </head> 
 
    <body> 
 

 
     <header> 
 
\t \t \t <nav class="navbar navbar-default"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <a class="navbar-brand" href="/">AngularJS</a> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
 
        <li><a href="#/second"><i></i> Second</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t </nav> 
 
\t \t </header> 
 

 
     <div class="container"> 
 

 
      <div ng-view></div> 
 
      
 
\t \t </div> 
 

 
    </body> 
 
</html>

main.htmlと:

<h1>This is Main.</h1> 

second.html

<h1>This is second.</h1> 

だから私のブラウザで私がmain.htmlとし、second.html得ることはありません私はホームとセカンドをクリックします。どうして?

答えて

2

UIルータgithubのドキュメントが言及:

をあなたはhtml5Modeが有効になっている場合は、#文字は、もはやあなたのURLで使用されません。 #記号は、サーバー側の構成を必要としないので便利です。 #がなければ、URLははるかに良く見えますが、サーバー側の書き換えも必要です。

html5Mode(ハッシュのないルート)でアプリにアクセスしようとすると、まず各リンクから「#」を削除する必要があります(この場合のリンクは次のとおりです:ホーム、Second)。

そう...

  • "#" はちょうどこの後 "/"
  • "#/秒" "/秒" になり

だろう、あなたはまた、必要があるだろうサーバー側のURL書き換えを有効にします。 this linkをチェックアウトし、ご使用のサーバーごとにサーバーを構成してください。

+0

ありがとう –

0

デフォルトルートを指定する$ routerProviderの末尾に.otherwise()を設定してください。

テンプレートmain.htmlsecond.htmlは正しく定義されていますか?場所は正しいですか?

+0

私はそれをしましたが、何も起こりません。私はなぜ私のリンクでボタンがクリックされたときにまだ##ホームとセカンドを取得するのか分からない:http:// localhost/angularjs-learn-understand/ch05 /#%2Fsecond ** –

関連する問題