Javascript angular包括在url中应用基本标记以删除#后不工作_Javascript_Html_Angularjs

Javascript angular包括在url中应用基本标记以删除#后不工作

javascript html angularjs

Javascript angular包括在url中应用基本标记以删除#后不工作,javascript,html,angularjs,Javascript,Html,Angularjs,我一直在用Angularjs开发单页应用程序。当加载索引页时，我使用include将其他页面加载到索引页中。现在它工作了，但是在URL中它显示为，我想删除“#”。在头部标记“ng include”中应用基本标记后，我应用了该标记，但该标记不起作用。我尝试了其他网上的东西，但找不到任何解决办法。我正在使用xampp服务器 Thanks in Advance friends <body ng-app="mainApp" ng-controller="mainCtrl"> <

我一直在用Angularjs开发单页应用程序。当加载索引页时，我使用include将其他页面加载到索引页中。现在它工作了，但是在URL中它显示为，我想删除“#”。在头部标记“ng include”中应用基本标记后，我应用了该标记，但该标记不起作用。我尝试了其他网上的东西，但找不到任何解决办法。我正在使用xampp服务器

Thanks in Advance friends
<body ng-app="mainApp" ng-controller="mainCtrl">
    <header ng-include="'navigation.html'" ng-controller="headerCtrl">

    </header>
    <div class="container">
        <h3>{{Title}}</h3>
        <div ng-include="'leftNavigation.html'" ng-controller="leftDivCtrl">

        </div>

        <div ng-include="'rightPage.html'" ng-controller="rightDivCtrl">

        </div>
        <div class="clearfix"></div>
        <ng-view></ng-view>
    </div>
</body>

var app = angular.module("mainApp", ["ngRoute"])
    // Navigating external pages 
    .config(function($routeProvider, $locationProvider){
        $routeProvider

         // $routeProvider .when( '/', { redirectTo: '/home' })
        .when("/Home", {
            templateUrl: "partials/Home.html",
            controller:"homeCtrl",
        })
        .when("/Aboutus", {
            templateUrl: "partials/Aboutus.html",
            controller:"AboutusCtrl",
        })
        .when("/Courses", {
            templateUrl: "partials/Courses.html",
            controller:"CoursesCtrl",
        })
        .when("/Contactus", {
            templateUrl: "partials/Contactus.html",
            controller:"ContactusCtrl",
        })
        .otherwise({
            redirectTo:"Index.html"
        })
        //$locationProvider.hashPrefix('')
        $locationProvider.html5Mode({
            enabled:true,
            //requireBase:false
        })
    })
    .controller("homeCtrl", function($scope){
        $scope.msg = "Home Page";
    })
    .controller("AboutusCtrl", function($scope){
        $scope.msg = "Aboutus Page";
    })
    .controller("CoursesCtrl", function($scope){
        $scope.msg = "Courses Page";
    })
    .controller("ContactusCtrl", function($scope){
        $scope.msg = "Contactus Page";
    })

    app.controller("mainCtrl", ["$scope", function($scope){
        $scope.Title = "Single Page Application";
    }]);

    // loading external pages as includes, when index page loads
    app.controller("headerCtrl", ["$scope", function($scope){

    }]);
    app.controller("leftDivCtrl", ["$scope", function($scope){

    }]);
    app.controller("rightDivCtrl", ["$scope", function($scope){

    }]);

提前感谢朋友们
{{Title}}
var app=angular.module（“mainApp”、[“ngRoute”]）
//导航外部页面
.config（函数（$routeProvider，$locationProvider）{
$routeProvider
//$routeProvider.when（'/'，{重定向到：'/home'}）
.when（“/Home”{
templateUrl:“partials/Home.html”，
控制器：“homeCtrl”，
})
.when（“/Aboutus”{
templateUrl:“partials/Aboutus.html”，
控制器：“AboutusCtrl”，
})
.when（“/课程”{
templateUrl:“partials/Courses.html”，
控制员：“CoursesCtrl”，
})
.when（“/Contactus”{
templateUrl:“partials/Contactus.html”，
控制器：“ContactusCtrl”，
})
.否则({
重定向到：“Index.html”
})
//$locationProvider.hashPrefix（“”）
$locationProvider.html5模式({
启用：对，
//requireBase:错误
})
})
.controller（“homeCtrl”，函数（$scope）{
$scope.msg=“主页”；
})
.controller（“AboutusCtrl”，函数（$scope）{
$scope.msg=“关于页面”；
})
.controller（“CoursesCtrl”，功能（$scope）{
$scope.msg=“课程页面”；
})
.控制器（“ContactusCtrl”，功能（$scope）{
$scope.msg=“联系人页面”；
})
app.controller（“mainCtrl”、[“$scope”、函数（$scope）{
$scope.Title=“单页应用程序”；
}]);
//加载索引页时，按包含方式加载外部页
应用程序控制器（“headerCtrl”、[“$scope”、函数（$scope）{
}]);
app.controller（“leftDivCtrl”、[“$scope”、函数（$scope）{
}]);
app.controller（“rightDivCtrl”、[“$scope”、函数（$scope）{
}]);

听起来您需要定义

$locationProvider

来使用html5模式。因此，在配置阶段，只需添加以下行：

 $locationProvider.html5Mode(true);

在添加

$locationProvider.html5Mode（true）后，您可以创建fiddle链接吗您还需要配置服务器（基本上是.htaccess）来重写url。此链接可以帮助我在应用标记“ng includes”后将其添加到脚本中