$ routeProvider和angularJS？

Question

好吧，我有一個簡單的網絡應用程序，我正在嘗試使用路由提供程序進行更新，單擊頁面上的列表時工作正常，但是當我刷新頁面時，它只給我一個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：

`<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 ”的URL被瀏覽器解釋為服務器請求。 如果您改為將#添加到網址，該頁面將不會像這樣“刷新” 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