Question

好的我有一个简单的网络应用程序，我正在尝试使用路由提供程序更新它在页面上的li列表时工作正常但是当我刷新页面时它只给我一个404它看起来像是试图访问url而不是root并传入模板... 为什么呢？

'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>`

Answer 1

由于您使用的是$locationProvider.html5Mode(true);，因此您引用“https://mysite/myrouting/page1”的网址可能被浏览器解释为服务器请求。如果您将#添加到网址，则该页面不会像这样“刷新”https://mysite/#/myrouting/page1

$ routeProvider和angularJS？

1 个答案: