2015-04-04 5 views
2

При нажатии пунктов меню навигации по сайту оно возвращается на главный локальный хост.Угловой 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> 

Вы Nav кнопка должна работать, как вы дали в вопросе URL как http://localhost:8888/devncode/ это совершенно не так, как вы зарегистрировать $routeProvider с маршрутом (/devncode) он должен быть http://localhost:8888/devncode & другой будут http://localhost:8888/about

Надеется, что это может помочь вам, спасибо

Смежные вопросы