$ routeProvider и angularJS?

У меня есть простое веб-приложение, которое я пытаюсь обновить с помощью провайдера маршрутов. Он отлично работает, когда нажимает на список li на странице, но когда я обновляю страницу, это просто дает мне 404, похоже, что он пытается получить доступ к url вместо того, чтобы идти в корне и проходить в шаблоне ... Почему?

'use strict'; 

angular.module('newSiteApp') 
    .controller('MainCtrl', function ($scope, $location) {  
     $scope.menu = 
     [ {name: 'Main', url: 'main.html'} 
     , { name: 'contact', url: 'contact.html'} 
     , { name: 'Projects', url: 'projects.html'} ]; 

     $scope.ajaxpage = function ajaxload(){ 
     $scope.getmenuitem = this.menuitem.url; 
     var path = $location.path(); 
     $location.url('pages/'+this.menuitem.name); 
     } 

    }) 
    .config(function ($routeProvider, $locationProvider) { 
    console.log($routeProvider); 
    $routeProvider.when('/', { 
    templateUrl: '/views/main.html', 
    controller: BookCntl, 
    resolve: { 
     delay: function($q, $timeout) {  
     var delay = $q.defer(); 
     $timeout(delay.resolve, 1000); 
     return delay.promise; 
     } 
    } 
    }); 
    $routeProvider.when('/pages/Main', { 
    templateUrl: '/views/main.html', 
    controller: BookCntl, 
    resolve: { 
     delay: function($q, $timeout) {  
     var delay = $q.defer(); 
     $timeout(delay.resolve, 1000); 
     return delay.promise; 
     } 
    } 
    }); 
    $routeProvider.when('/pages/contact', { 
    templateUrl: '/views/contact.html', 
    controller: BookCntl, 
    resolve: { 
     delay: function($q, $timeout) { 

     var delay = $q.defer(); 
     $timeout(delay.resolve, 1000); 
     return delay.promise; 
     } 
    } 
    }); 
    $routeProvider.when('/pages/Projects', { 
    templateUrl: '/views/projects.html', 
    controller: BookCntl, 
    resolve: { 
     // I will cause a 1 second delay 
     delay: function($q, $timeout) { 

     var delay = $q.defer(); 
     $timeout(delay.resolve, 1000); 
     return delay.promise; 
     } 
    } 
    }); 
    // configure html5 to get links working on jsfiddle 
    $locationProvider.html5Mode(true); 
}); 

function BookCntl($scope, $routeParams) { 
    $scope.name = "BookCntl"; 
    $scope.params = $routeParams; 
}

HTML:

`<body ng-app="newSiteApp" ng-controller="MainCtrl"> 
    <div class="header"> 
    <ul> 
     <li ng-repeat="menuitem in menu" ng-click="ajaxpage()">{{menuitem.name}}</li> 
    </ul> 

    </div> 
    <!--[if lt IE 7]> 
     <p class="browsehappy">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 --> 
    <div class="slide-animate-container" > 
     <!-- <div class="slide-animate" ng-init="getmenuitem = page" ng-include="getmenuitem"></div>--> 
    </div> 
    <div ng-view></div> 
    <!--[if lt IE 9]> 
    <script src="bower_components/es5-shim/es5-shim.js"></script> 
    <script src="bower_components/json3/lib/json3.min.js"></script> 
    <![endif]--> 

    <!-- build:js scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 
     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <script src="scripts/controllers/main.js"></script> 
     <!-- endbuild --> 
    </body>`

источник

2014-02-04 vimes1984

Поскольку вы используете $locationProvider.html5Mode(true); вероятно, URL вы со ссылкой на "https://mysite/myrouting/page1" интерпретируется браузером как запрос сервера. Если вместо того, чтобы добавить # к URL страницы не будет "обновить", как это https://mysite/#/myrouting/page1

источник

2014-02-04 19:22:10 Dalorzo

это искалечил мой URL:/#% 2Fpages% 2FProjects \t $ location.url ('# страницы /' + this.menuitem.name); – vimes1984

смотрит ваш url/#% 2Fpages кодируется вместо/#/страниц и $ location.url («# страниц не хватает»/«... как этот $ location.url ('/ pages – Dalorzo

$ routeProvider и angularJS?

ответ

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