从AngularJs Route中的URL中删除Hashbang

时间:2016-04-05 09:58:28

标签: angularjs single-page-application angularjs-routing

我是angularJs的新手。我只是尝试在angularJs中路由页面。它正在工作,但#'#'符号显示。所以我用过

$locationProvider and $locationProvider.html5Mode(true);

但它没有用。所以我正在给我的代码以寻求帮助来找到问题。我正在使用angularJs的CDN。

项目结构是:

enter image description here

app.Js文件

'use strict';

angular.module('myApp', ['myApp.controllers', 'ngRoute']);

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/view1', {
            controller: 'Controller1',
            templateUrl: 'partials/view1.html'
        })
        .when('/view2', {
            controller: 'Controller2',
            templateUrl: 'partials/view2.html'
        });

    $locationProvider.html5Mode(true); //activate HTML5 Mode
});

控制器是:

'use strict';

angular.module('myApp.controllers', [])
    .controller('Controller1', function ($scope) {
        $scope.message = "Hello, world";
    })
    .controller('Controller2', function ($scope) {
        $scope.now = new Date();
    });

Html Page是:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Routing</title>
    <link rel="stylesheet" href="app.css"/>
    <base href="/">
</head>
<body>
<ul class="menu">
    <li><a href="/view1">view1</a></li>
    <li><a href="/view2">view2</a></li>
</ul>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>    
<script src="app.js"></script>
<script src="controllers.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您的基地应该是您的项目文件夹路径。在你的情况下

<base href="/untitled1/">

此外,我希望您通过.htaccess

处理页面刷新重定向

有关此

的更多信息,请参阅this link