2016-12-10 54 views
0

好了,這是一個主題,我看到了很多在這裏,但沒有找到任何人,我得到了具體的問題(或我不把它理解爲這樣的..)角的ngRoute不工作正常

所以 - 我會開始說,我試圖運行我的SPA本地化(不是在某種服務器上)。 據我瞭解,我拒絕使用Chrome/Explorer,並轉移到Firefox:(

還有 - 最奇怪的事情不斷髮生 - 當我點擊鏈接,假設正確地更改地址,只在它的末尾添加了一個文字

我該怎麼做一個?當我點擊一個鏈接它應該來自:

文件:/// C:/Users/saartk/Desktop/Python/New/conFusion/app/index.html#/聯繫我們

到: 文件:/// C:/Users/saartk/Desktop/Python/New/conFusion/app/index.html#/菜單

相反,它變成了: 文件:/// C:/用戶/ saartk /桌面/ Python的/新/混亂/應用/ index.html的#!/ 聯繫我們#%2Fmenu 菜單部分被添加到默認,unyeilding ,聯繫我們......

我的代碼如下:

這是我的HTML文件(index.html的):(培訓相關的部分是導航欄)

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <title>Ristorante Con Fusion</title>  

    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

</head> 

<body ng-app="confusionApp"> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#/"><img src="images/logo.png" height="30" width="41"></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#/"> 
         <span class="glyphicon glyphicon-home" 
         aria-hidden="true"></span> Home</a></li> 
        <li><a href="#/aboutus"> 
         <span class="glyphicon glyphicon-info-sign" 
         aria-hidden="true"></span> About</a></li> 
        <li><a href="#/menu"> 
         <span class="glyphicon glyphicon-list-alt" 
         aria-hidden="true"></span> 
         Menu</a></li> 
        <li><a href="#/contactus"> 
        <i class="fa fa-envelope-o"></i> Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>   

    <header class="jumbotron"> 

     <div class="container"> 
      <div class="row row-header"> 
       <div class="col-xs-12 col-sm-8"> 
        <h1>Ristorante con Fusion</h1> 
        <p style="padding:40px;"></p> 
        <p>We take inspiration from the World's best cuisines, and create 
        a unique fusion experience. Our lipsmacking creations will 
        tickle your culinary senses!</p> 
       </div> 
       <div class="col-xs-12 col-sm-2"> 
       <p style="padding:20px;"></p> 
       <img src="images/logo.png" class="img-responsive"> 
       </div> 
       <div class="col-xs-12 col-sm-2"> 
       </div> 
      </div> 
     </div> 
    </header> 
    <div ng-view></div> 
    <footer class="row-footer"> 
     <div class="container"> 
      <div class="row">    
       <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1"> 
        <h5>Links</h5> 
        <ul class="list-unstyled"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Menu</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
       <div class="col-xs-6 col-sm-5"> 
        <h5>Our Address</h5> 
        <address> 
         121, Clear Water Bay Road<br> 
         Clear Water Bay, Kowloon<br> 
         HONG KONG<br> 
         <i class="fa fa-phone"></i>: +852 1234 5678<br> 
         <i class="fa fa-fax"></i>: +852 8765 4321<br> 
         <i class="fa fa-envelope"></i>: 
         <a href="mailto:[email protected]"> 
         [email protected]</a> 
        </address> 
       </div> 
       <div class="col-xs-12 col-sm-4"> 
        <div class="nav navbar-nav" style="padding: 40px 10px;"> 
         <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a> 
         <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a> 
         <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a> 
         <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a> 
         <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a> 
         <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a> 
        </div> 
       </div> 
       <div class="col-xs-12"> 
        <p style="padding:10px;"></p> 
        <p align="center">© Copyright 2015 Ristorante Con Fusion</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

<!-- build:js scripts/main.js --> 
    <script src="../bower_components/angular/angular.min.js"></script> 
    <script src="../bower_components/angular-route/angular-route.min.js"></script> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers.js"></script> 
    <script src="scripts/services.js"></script> 
<!-- endbuild --> 

</body> 

</html> 

這是ngRoute JS文件:

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

    app.config(function($routeProvider) { 
    $routeProvider 
     // route for the contactus page 
     .when('/contactus', { 
      templateUrl : 'contactus.html', 
      controller : 'ContactController' 
     }) 
     // route for the menu page 
     .when('/menu', { 
      templateUrl : 'menu.html', 
      controller : 'ctrlr' 
     }) 
     // route for the dish details page 
     .when('/menu/:id', { 
      templateUrl : 'dishdetail.html', 
      controller : 'dishControl' 
     }) 
     .otherwise('/contactus'); 
}); 

控制器:

'use strict' 
var app=angular.module('confusionApp'); 

    app.controller('ctrlr',['$scope','pizzaService',function($scope,pizzaService){ 
    $scope.hide=true; 
    $scope.toggle=function(){ 
     $scope.hide=!$scope.hide; 
    } 
    $scope.tab=""; 
    $scope.yosi=pizzaService.getDishes(); 
     $scope.select=function(setTab){ 
     $scope.tab=setTab; 

     }; 
     $scope.isSelected=function(checkTab){ 
     return ($scope.tab==checkTab); 
     };  
    }]); 
    app.controller('ContactController',['$scope',function($scope){ 
     $scope.feedback= {myChannel:"",firstName:"",lastName:"",agree:false,email:""}; 
     $scope.channels=[{value:"Tel.",label:"Tele"},{value:"Email",label:"Mail"}]; 
     $scope.notChosen=false; 

    }]); 
    app.controller('FeedbackController',['$scope',function($scope){ 
     $scope.validate=function(){ 
      console.log($scope.feedback); 
      if($scope.feedback.agree&&($scope.feedback.myChannel=="")){ 
       $scope.notChosen=true; 
       console.log('incorrect'); 
      } 
      else{ 
       $scope.feedback= {myChannel:"",firstName:"",lastName:"",agree:false,email:""}; 
       $scope.feedbackForm.$setPristine(); 
       $scope.notChosen=false; 
       console.log($scope.feedback); 
      } 
     } 
    }]); 




     app.controller('dishControl',['$scope','$routeParams','pizzaService',function($scope,pizzaService,$routeParams) { 

      $scope.dish=pizzaService.getDish(parseInt($routeParams.id,10)); 
      $scope.commentNew={ 
       rating:4, 
       comment:"", 
       author:"", 
       date:"" 
       };   
      $scope.isThis=function(num){ 
       if(num==$scope.commentNew.rating){ 
        return true; 
       } 
       else{ 
        return false; 
       } 
      }; 
      $scope.isCommentEmpty=function(){ 
       if($scope.commentNew.comment==""){ 
        return true; 
       } 
       else{ 
        return false; 
       } 
      }; 
      $scope.commentNow=function(){ 
       $scope.commentNew.date=Date(); 
       $scope.dish.comments.push($scope.commentNew); 
       $scope.commentNew={rating:4,comment:'',author:'',date:''}; 
       $scope.dishForm.$setPristine(); 
      }; 
     }]); 

和服務(數據):

'use strict' 
angular.module('confusionApp') 
.factory('pizzaService',function(){ 
    var object={}; 
    var dishes=[ 
         { 
          _id:0, 
          sort:'', 
          name:'Uthapizza', 
          image: 'images/uthapizza.png', 
          category: 'mains', 
          label:'Hot', 
          price:'4.99', 
          description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
          comments: [ 
           { 
            rating:5, 
            comment:"Imagine all the eatables, living in conFusion!", 
            author:"John Lemon", 
            date:"2012-10-16T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
            author:"Paul McVites", 
            date:"2014-09-05T17:57:28.556094Z" 
           }, 
           { 
            rating:3, 
            comment:"Eat it, just eat it!", 
            author:"Michael Jaikishan", 
            date:"2017-02-13T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Ultimate, Reaching for the stars!", 
            author:"Ringo Starry", 
            date:"2013-12-02T17:57:28.556094Z" 
           }, 
           { 
            rating:2, 
            comment:"It's your birthday, we're gonna party!", 
            author:"25 Cent", 
            date:"2011-12-02T17:57:28.556094Z" 
           } 

          ] 
         }, 
         { 
          _id:1, 
          sort:'', 
          name:'Zucchipakoda', 
          image: 'images/zucchipakoda.png', 
          category: 'appetizer', 
          label:'', 
          price:'1.99', 
          description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
          comments: [ 
           { 
            rating:5, 
            comment:"Imagine all the eatables, living in conFusion!", 
            author:"John Lemon", 
            date:"2012-10-16T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
            author:"Paul McVites", 
            date:"2014-09-05T17:57:28.556094Z" 
           }, 
           { 
            rating:3, 
            comment:"Eat it, just eat it!", 
            author:"Michael Jaikishan", 
            date:"2017-02-13T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Ultimate, Reaching for the stars!", 
            author:"Ringo Starry", 
            date:"2013-12-02T17:57:28.556094Z" 
           }, 
           { 
            rating:2, 
            comment:"It's your birthday, we're gonna party!", 
            author:"25 Cent", 
            date:"2011-12-02T17:57:28.556094Z" 
           } 

          ] 
         }, 
         { 
          _id:2, 
          sort:'', 
          name:'Vadonut', 
          image: 'images/vadonut.png', 
          category: 'appetizer', 
          label:'New', 
          price:'1.99', 
          description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
          comments: [ 
           { 
            rating:5, 
            comment:"Imagine all the eatables, living in conFusion!", 
            author:"John Lemon", 
            date:"2012-10-16T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
            author:"Paul McVites", 
            date:"2014-09-05T17:57:28.556094Z" 
           }, 
           { 
            rating:3, 
            comment:"Eat it, just eat it!", 
            author:"Michael Jaikishan", 
            date:"2017-02-13T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Ultimate, Reaching for the stars!", 
            author:"Ringo Starry", 
            date:"2013-12-02T17:57:28.556094Z" 
           }, 
           { 
            rating:2, 
            comment:"It's your birthday, we're gonna party!", 
            author:"25 Cent", 
            date:"2011-12-02T17:57:28.556094Z" 
           } 

          ] 
         }, 
         { 
          _id:3, 
          sort:'', 
          name:'ElaiCheese Cake', 
          image: 'images/elaicheesecake.png', 
          category: 'dessert', 
          label:'', 
          price:'2.99', 
          description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
          comments: [ 
           { 
            rating:5, 
            comment:"Imagine all the eatables, living in conFusion!", 
            author:"John Lemon", 
            date:"2012-10-16T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
            author:"Paul McVites", 
            date:"2014-09-05T17:57:28.556094Z" 
           }, 
           { 
            rating:3, 
            comment:"Eat it, just eat it!", 
            author:"Michael Jaikishan", 
            date:"2017-02-13T17:57:28.556094Z" 
           }, 
           { 
            rating:4, 
            comment:"Ultimate, Reaching for the stars!", 
            author:"Ringo Starry", 
            date:"2013-12-02T17:57:28.556094Z" 
           }, 
           { 
            rating:2, 
            comment:"It's your birthday, we're gonna party!", 
            author:"25 Cent", 
            date:"2011-12-02T17:57:28.556094Z" 
           } 

          ] 
         } 
         ]; 
    object.getDishes=function(){ 
     return dishes; 
    };     
    object.getDish=function(num){ 
     return dishes[num]; 
    }; 
    return object; 
}); 

所以......你們怎麼和女生認爲是什麼問題?

很多感謝提前!

+0

我有一個類似的問題,回來時,我與老角工作,但我似乎無法記住我是如何解決它。在你的hrefs中,而不是使用「#/ route」,如果你使用「/ route」,它的行爲如何? – Zeokav

+0

對不起作爲例子似乎在我結束時工作..let我知道你重新找什麼,我沒有得到它 - http://imgur.com/a/NZV3e http://imgur.com/a/fhzSK – swapnesh

+0

哥們,而不是直接從靜態文件服務,可以考慮使用像'HTTP-server'(NPM)或植酮的simpleHttpServer一個輕量級的靜態服務器。從瀏覽器中的靜態文件打開時,我也遇到過類似的問題。上述兩個程序都會通過一個端口運行你的項目(我認爲它是8080)。檢查出來,讓我知道這是否改變了一切。 – borislemke

回答

0

角不能處理你的鏈接參數的/(即:#/aboutus)。

嘗試改變你的鏈接從href="#/pagenamehref="#pagename

<a href="#aboutus"> 
<a href="#menu"> 
<a href="#contactus"> 
+0

嗯,可悲的是我已經嘗試過這些比喻的任何可能的配置..無論是在href中,甚至在模塊本身(採取ngRoute的部分)。 – Saar