$ routeProvider和angularJS？

Question

Ok I have a simple web app that I'm trying to update with route provider it works fine when click on the li list on page but when i refresh the page it just give me a 404 it looks like it's trying to access the url instead of going to root and passing in the template... why? 好吧，我有一个简单的网络应用程序，我正在尝试使用路由提供程序进行更新，单击页面上的列表时工作正常，但是当我刷新页面时，它只给我一个404，看起来它正在尝试访问网址而不是去根和传递模板...为什么？

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

Since you are using $locationProvider.html5Mode(true); 因为你使用的是$locationProvider.html5Mode(true); probably the URL you referring to " https://mysite/myrouting/page1 " is interpreted by the browser as a server request. 可能是您引用“ https://mysite/myrouting/page1 ”的URL被浏览器解释为服务器请求。 If you instead add the # to the url the page will not "refresh" like this https://mysite/#/myrouting/page1 如果您改为将#添加到网址，该页面将不会像这样“刷新” https://mysite/#/myrouting/page1

$ routeProvider和angularJS？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-02-04 19:22:10

$ routeProvider和angularJS？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-04 19:22:10

解决方案1
2 已采纳 2014-02-04 19:22:10