2015-04-04 66 views
2

当点击站点导航菜单项时,它会返回到本地主机。Angular JS,使用漂亮的URL不工作的路由

来自:http://localhost:8888/devncode/

到:http://localhost:8888/about/

谐音也不会加载。我究竟做错了什么?

 <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <title></title> 

     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 

     <link rel="stylesheet" href="css/main.css"> 
     <!-- Latest compiled and minified CSS --> 
     <script src="js/vendor/modernizr-2.8.3.min.js"></script> 
      <base href="/"> 
    </head> 
    <body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 

     <!-- Add your site or application content here --> 
     <section id="sidebar" class="animated slideInLeft" ng-controller="menuCtrl"> 

      <a href="#/" class="logo"> 

       <object type="image/svg+xml" data="img/logo.svg" width="70" style="margin-left: 11px;"></object> 
       <h1>devncode</h1> 
      </a> 

      <ul class="site-nav"> 
       <li ng-class="menuClass('home')" ><a href="/" class="hvr-underline-from-left">›&nbsp;&nbsp;Home</a></li> 
       <li ng-class="menuClass('about')" ><a href="/about">›&nbsp;&nbsp;About Me</a></li> 
       <li ng-class="menuClass('portfolio')" ><a href="/portfolio" class="hvr-underline-from-left">›&nbsp;&nbsp;Portfolio</a></li> 
       <li ng-class="menuClass('resume')" ><a href="/resume" class="hvr-underline-from-left">›&nbsp;&nbsp;Resume</a></li> 
       <li ng-class="menuClass('contact')" ><a href="/contact" class="hvr-underline-from-left">›&nbsp;&nbsp;Contact</a></li> 
      </ul> 


      <ul class="social"> 
       <li> 
        <a href=""> 
         <object type="image/svg+xml" data="img/github.svg" width="30" ></object> 
        </a> 
       </li> 
       <li> 
        <a href=""> 
         <object type="image/svg+xml" data="img/linkedin.svg" width="30" ></object> 
        </a> 
       </li> 
      </ul>  
     </section> 


     <div ng-view="" id="container"> 

     </div> 


     <script src="js/vendor/angular.min.js"></script> 
     <script src="js/vendor/jquery-1.11.2.min.js"></script> 
     <script src="js/vendor/velocity.min.js"></script> 
     <script src="js/vendor/nprogress.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/controllers/homecontroller.js"></script> 
     <script src="js/controllers/aboutcontroller.js"></script> 
     <script src="js/controllers/portfoliocontroller.js"></script> 
     <script src="js/controllers/menucontroller.js"></script> 
     <script src="js/controllers/loadercontroller.js"></script> 


    </body> 
</html> 


//Define an angular module for our app 
angular.module('devncode', []) 
app.config(function($routeProvider, $locationProvider) { 


    $routeProvider 
     .when('/', { 
      templateUrl : 'partials/index.html', 
      controller : 'homeController' 
     }) 
     .when('/about', { 
      templateUrl : 'partials/about.html', 
      controller : 'aboutController' 
     }) 
     .when('/portfolio', { 
      templateUrl : 'partials/portfolio.html', 
      controller : 'portfolioController' 
     }) 
     .when('/resume', { 
      templateUrl : 'partials/resume.html', 
      controller : 'loaderController' 
     }) 
     .when('/contact', { 
      templateUrl : 'partials/contact.html', 
      controller : 'loaderController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 

}); 

回答

1

第一件事,你的网站导航菜单按钮,不应该指定href属性中的任何链接,在这里你提到它作为href="#/"被重定向应用程序主页。您的href应该是空白

HTML

<a href="" class="logo"> 
    <object type="image/svg+xml" data="img/logo.svg" width="70" style="margin-left: 11px;"></object> 
    <h1>devncode</h1> 
</a> 

您的导航按钮应该工作,因为你有问题的URL给喜欢http://localhost:8888/devncode/这是完全错误的,因为你的路由(/devncode)注册$routeProvider它应该是http://localhost:8888/devncode &另一种是http://localhost:8888/about

希望这可以帮助你,谢谢