Question

晚上，

我目前正在使用AngularJS和CodeIgniter练习单页应用程序，当我点击导航时，所有路由看起来都很完美。这是我刷新（f5）页面之前的样子。

这是刷新页面后的样子。

HTML页面脚本

<!DOCTYPE html>
<html lang="en" ng-app="pracApp">
<head>
<base href="/prac/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Test</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/materialize.min.css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/style.css" media="screen, projection">
</head>

<body ng-controller="homeController">
<!-- <div ng-controller="navigation" ng-include="navigation()"></div> -->
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="<?php echo base_url(); ?>">Home</a></li>
            <li><a href="<?php echo base_url(); ?>about">About</a></li>
            <li><a href="<?php echo base_url(); ?>contact">Contact</a></li>
        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Home</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

<div class="container">
    <div ng-view></div>
</div>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/angular/angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/angular/angular-loader.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/materialize.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/app/app.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/app/controller.js"></script>

<script type="text/javascript">
var base_url = '<?php echo base_url(); ?>',
    site_url = '<?php echo site_url(); ?>'
</script>
</body>
</html>

这是我的app.js脚本

var pracApp = angular.module('pracApp', ['ngRoute']);

pracApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : base_url + 'home',
            controller  : 'homeController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : base_url + 'about',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : base_url + 'contact',
            controller  : 'contactController'
        })

        .otherwise({
            redirectTo: '/home'
        });


});


// pracApp.controller('navigation', function($scope) {
//  $scope.navigation = function() {
//      return base_url + 'partials/navigation';
//  };
// });

pracApp.controller('homeController', function($scope) {
// $scope.message = "This is home controller";
});

pracApp.controller('aboutController', function($scope) {
// $scope.message = "This is about controller";
});

pracApp.controller('contactController', function($scope) {
// $scope.message = "This is contact controller";
});

我需要的是如何防止错误（根据图像2）。

AngularJS＆amp; CodeIgniter路由刷新页面错误

0 个答案: