Question

情景是，

我是AngularJS的新手并使用AngularFire制作AngularJS，我使用$routeProvider定义了我的路由再见，见下文

var appMainModule = angular.module('appMain', [ 'firebase','ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', { templateUrl: '/Templates/CustomerLogin.html', controller: 'HomeCtrl' });
    $routeProvider.when('/customer/home', { templateUrl: '/Templates/CustomerHome.html' , controller:'ForLogout'});
    $routeProvider.when('/customer/singup', { templateUrl: '/Templates/CustomerSinup.html', controller: 'RegisterCtrl' });
    $routeProvider.when('/dashboard/godash', { templateUrl: '/Templates/dashboard.html', controller: 'DashboardCtrl' });
    $routeProvider.when('/customer/list', { templateUrl: '/Templates/CustomerList.html', controller: 'customerListViewModel' });
    $routeProvider.when('/customer/detail', { templateUrl: '/Templates/CustomerDetail.html', controller: 'customerDetailViewModel' });
    $routeProvider.when('/customer/googlemap', { templateUrl: '/Templates/GoogleMap.html', controller: 'MapCtrl' });
   // $routeProvider.when('/customer/postdata', { templateUrl: '/Templates/CustomerPostData.html', controller: 'AddPostCtrl' });
    $routeProvider.when('/customer/getdata', { templateUrl: '/Templates/CustomerGetData.html', controller: 'GetCtrl', reloadOnSearch: false });
    $routeProvider.when('/victim/getdata', { templateUrl: '/Templates/RiskVictimDetail.html', controller: 'VictimGetCtrl' });
    $routeProvider.otherwise({ redirectTo: '/' });
    $locationProvider.html5Mode(true);
});

这是我的登录控制器

appMainModule.controller('HomeCtrl', ['$scope', '$location', 'CommonProp', '$firebaseAuth', function ($scope, $location,CommonProp, $firebaseAuth) {
    var firebaseObj = new Firebase("FireaseURL/");
    loginObj = $firebaseAuth(firebaseObj);
    $scope.user = {};
    var login = {};
    $scope.SignIn = function (e) {
        login.loading = true;
        e.preventDefault();
        var username = $scope.user.email;
        var password = $scope.user.password;
        loginObj.$authWithPassword({
            email: username,
            password: password
        })
            .then(function (user) {
                //Success callback
                // alert('Authentication successful');
                login.loading = false;
                $location.path('/dashboard/godash')
            }, function (error) {
                //Failure callback
                alert('Authentication failure');
            });
        }
    }])

我的问题是，当我通过浏览器刷新刷新我的登录页面时，它会成功刷新，但是在刷新任何页面后登录时它会给我错误

找不到页面

我的HTML：

<!DOCTYPE html>
<html data-ng-app="sampleApp">
<head>
    <title>My new Project</title>
    <meta charset="utf-8" />
    <!-- AngularJS -->
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
    <script src="Scripts/App.js"></script>
    <base href="/" />
</head>
<body ng-view>

</body>
</html>

Answer 1

如果您将$ location配置为使用html5Mode（history.pushState），则需要为具有<base href="">标记的应用程序指定基本URL，或将$locationProvider配置为不需要通过将requireBase:false的定义对象传递给$locationProvider.html5Mode()：

来生成基本标记

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

来自：https://docs.angularjs.org/error/$location/nobase

请务必检查所有相关链接，图像，脚本等.Angular要求您在主html文件（）的头部指定url base，除非html5Mode.requireBase在传递给$的html5Mode定义对象中设置为false locationProvider.html5Mode（）。这样，即使文档的初始URL不同，相对URL也将始终解析为此基本URL。

来自：https://code.angularjs.org/1.3.14/docs/guide/$location

简单示例：

的index.html

<!DOCTYPE html>
<html data-ng-app="appMain">
<head>
    <meta charset="utf-8" />
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
      <script src="script.js"></script>
    <base href="/" />
</head>
<body ng-view>

</body>
</html>

的script.js

var appMainModule = angular.module('appMain', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
      templateUrl: '/Templates/CustomerLogin.html',
      controller: 'HomeCtrl'
    });
    $routeProvider.when('/customer/home', {
      templateUrl: '/Templates/CustomerHome.html',
      controller: 'ForLogout'
    });
    $routeProvider.when('/dashboard/godash', {
      templateUrl: '/Templates/dashboard.html',
      controller: 'DashboardCtrl'
    });
    $routeProvider.otherwise({
      redirectTo: '/'
    });
    $locationProvider.html5Mode(true);
  });

appMainModule.controller('HomeCtrl', ['$scope', '$location', function($scope, $location) {
  $scope.godash = function(e) {
    $location.path('/dashboard/godash')
  }
}]);


appMainModule.controller('DashboardCtrl', ['$scope', '$location', function($scope, $location) {
  $scope.home = function(e) {
    $location.path('/customer/home')
  }
}]);

appMainModule.controller('ForLogout', ['$scope', '$location', function($scope, $location) {
  $scope.home = function(e) {
    $location.path('/')
  }
}]);

/Templates/CustomerLogin.html

<div>
<button ng-click="godash()">/dashboard/godash</button>
</div>

/Templates/CustomerHome.html

<div>
<button ng-click="home()">/</button>
</div>

/Templates/dashboard.html

<div>
<button ng-click="home()">/customer/home</button>
</div>

AngularFire浏览器刷新提供错误页面未找到

1 个答案: