我怎样才能删除#!来自angularjs的网址?

时间:2017-08-23 13:15:29

标签: angularjs angular-ui-router

我想删除#!来自网址,我使用

$locationProvider.html5Mode(true);

为此而且它有效,但是当我刷新页面时,它无法找到页面并给出错误。

我应该为此做些什么?

的index.html

<!DOCTYPE html>
<html dir="ltr" lang="en" ng-app="myapp">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <base href="/">
</head>

    <body class="product-product-82 responsive full default layout_2">

    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
   <script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/config.js"></script>
<script type="text/javascript" src="controllers/productCtrl.js"></script>
<script type="text/javascript" src="controllers/menuCtrl.js"></script>
    <page-loader flag="isLoading"></page-loader>
    <div ui-view="layout"></div>

</body>

</html>

路由的配置文件

var app = angular.module('myapp');

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('productpagelayout', {
            abstract: true,
            views: {
                layout: {
                    templateUrl: 'template/layout/productpagelayout .html',
                },
                controller : 'productCtrl'
            }
        })
        .state('landing', {
            url: '/',
            templateUrl: 'template/landing/mainpages.html',
            controller: 'menuCtrl',
            parent: 'productpagelayout',
        })
        .state('home', {
            url: '/home',
            templateUrl: 'template/landing/landing.html',
            controller: 'menuCtrl',
            parent: 'productpagelayout',
        })
        .state('category2',{
            url: '/c/:name1/:name2',
            templateUrl: 'template/product/productsgridpage.html',
            controller: 'productCtrl',
            parent: 'productpagelayout'
        })
     $locationProvider.html5Mode(true);
}])

app.js

var app = angular.module('myapp', ['ui.router', 
  'rzModule', 
  'ngCookies', 
  'ui.bootstrap', 
  'ngSanitize',

]);

1 个答案:

答案 0 :(得分:0)

您可以尝试使用:

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);