$ locationProvider.html5Mode(true)throws TypeError:无法在AngularJS中读取未定义的属性'replace'

时间:2015-07-08 17:13:44

标签: javascript angularjs html5

尝试使用 $ locationProvider.html5Mode(true); 时,我收到“TypeError:无法读取属性'替换'未定义的”。当我发表评论时,我没有收到错误,但是我在URL中有“#”字符,我试图摆脱它。我看到人们报告了一些与ui.router类似的问题,我没有使用。无论如何,我无法从这些帖子中找到解决方案。任何帮助,将不胜感激。谢谢!

parserconfig.html

<!DOCTYPE html>
<html ng-app='parserconfigApp'>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>

    <base href="file:///home/myusername/projects/parser_ui/">
    <title>Parser Config</title>
</head>

<body>
<div ng-controller='ParserConfigController as parserConfig'>

    <h1>Record Types</h1>

    <table style="font-size: medium; width: 50%; table-layout: fixed" ng-repeat='recordType in recordTypes'>
        <tr>
            <td><a>{{recordType}}</a></td>
            <td><button ng-click="remove($index)">Remove</button><td>
        </tr>
    </table>

    <a href="/addRecordType">Add</a>

</div>

<div ng-view></div>

    <script type="text/javascript" src="parserconfigApp.js"></script>
</body>
</html>

parserconfigApp.js

'use strict';

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

app.controller('ParserConfigController', ['$scope', '$location', function($scope, $location) {
    $scope.recordTypes = recordTypes;

    $scope.remove = function(index) {
        $scope.recordTypes.splice(index, 1);
    }    

    $scope.changeView = function(view) {
        alert($location.path())
        $location.path(view);
        alert($location.path())        
    }
}]);

app.controller('AddRecordTypeController', ['$scope', function($scope) {

}]);

app.config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/addRecordType', {
                templateUrl: 'partials/partial1.html',
                controller: 'AddRecordTypeController'
            })
            .otherwise({
                redirectTo: '/addRecordType'
            });

            // use the HTML5 History API
            $locationProvider.html5Mode(true);
});

var recordTypes = [
'Boot Record',
'Card Uptime Record',
'Stack Trace'
];

0 个答案:

没有答案