Question

使用Angular.js和PHP重新加载页面时，出现空白页面。第一次运行正常，但是当我重新加载页面时，它变成空白。我正在使用ui-router并制作html5 mode-enable。我在下面提供我的代码。

index.html：

<!DOCTYPE html>
<html lang="en" ng-app="cab">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Chinmaya Sahu">
    <title>...:::WELCOME TO Cab management App:::...</title>
    <link href="css/pace.css" rel="stylesheet">
    <link href="css/chosen.min.css" rel="stylesheet">
    <script src="js/pace.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
    <script src="js/angularjslatest.js" type="text/javascript"></script>
    <script src="js/angularuirouterlatest.js" type="text/javascript"></script>
    <script src="js/route.js" type="text/javascript"></script>
    <script src="js/angularcaps.js" type="text/javascript"></script>
    <script src="js/angular-messages.js" type="text/javascript"></script>
    <script src="js/angularuibootstrap.js" type="text/javascript"></script>
    <script src="js/ng-file-upload-shim.min.js"></script>
    <script src="js/ng-file-upload.min.js"></script>
    <script src="js/dirPagination.js"></script>
    <script src="js/angular-chosen.min.js"></script>



    <!-- GLOBAL STYLES - Include these on every page. -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- PAGE LEVEL PLUGIN STYLES -->
    <!-- THEME STYLES - Include these on every page. -->
    <link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
   <!-- <link href="css/style22.css" rel="stylesheet">-->
    <link href="css/style.css" rel="stylesheet">
   <!-- <link href="css/style1.css" rel="stylesheet">-->
    <link href="css/plugins.css" rel="stylesheet">
    <link href="css/chosen.css" rel="stylesheet">
    <link href="css/load.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.14.3.min.js" type="text/javascript"></script>

</head>

<body>


<div  ui-view>

</div>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script src="js/jquery.popupoverlay.js"></script>
    <script src="js/jquery.timepicker.min.js"></script>
    <!-- HISRC Retina Images -->

    <!-- THEME SCRIPTS -->
    <script src="js/chosen.jquery.js" type="text/javascript"></script>
    <script src="js/prism.js" type="text/javascript"></script>
    <script type="text/javascript" src="calendar/tcal.js"></script> 
    <script src="js/angular-datepicker.js"></script>
    <script src="js/CapsLock.js"></script>
    <script src="js/timetable.js"></script>
    <script src="controller/loginController.js"></script>
    <script src="controller/navigationController.js"></script>
    <script src="controller/dashboardController.js"></script>
    <script src="controller/settingsController.js"></script>
    <script src="controller/areaController.js"></script>
    <script src="controller/manageStateController.js"></script>
    <script src="controller/manageCityController.js"></script>
    <base href="/cab/admin/">
</body>
</html>

route.js：

var Admin=angular.module('cab',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap','ngFileUpload','angularUtils.directives.dirPagination','angular.chosen']);
Admin.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/',{
        url: '/',
        templateUrl: 'view/login.html',
        controller: 'loginController'
    })
    .state('app',{
        abstract:true,
        templateUrl:'view/navigation.html',
        controller:'navigationController'
    })
    .state('app.dashboard',{
        url:'/dashboard',
        templateUrl:'view/dashboard.html',
        controller:'dashboardController'
    })
    .state('app.settings',{
        url:'/settings',
        templateUrl:'view/settings.html',
        controller:'settingsController'
    })
    .state('app.settings.area',{
        url:'/area',
        templateUrl:'view/area.html',
        controller:'areaController'
    })
    .state('app.settings.area.manageState',{
        url:'/manageState',
        templateUrl:'view/manageState.html',
        controller:'manageStateController'
    })
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true
    });
})

上面是我创建html5Mode:true的路由页面。当我使用PHP进行服务器端编程时，我在设置.htaccess，如下所示。

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /cab/admin/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

我的问题是，如果我正在重新加载页面manage state，它将变成空白，但是第一次运行良好。

使用Angular.js和PHP重新加载页面时获取空白页面

0 个答案: