我正在尝试从个人网站的网址中删除“#”。
从
http://frankcalpitojr.com/#/about
至
http://frankcalpitojr.com/about
我尝试这样做AngularJS routing without the hash '#'
但是发生的是url将更改变为http://frankcalpitojr.com/#%2Fabout,我尝试了其他方法,例如将requirebase设置为false并将base添加到索引文件的开头。
这是我的代码
app.js
var AngularTemplateApp = angular.module('AngularTemplateApp', [
'ngRoute',
'appTest'
]);
AngularTemplateApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl',
activetab: 'home'
}).
when('/page', {
templateUrl: 'partials/page.html',
controller: 'PageCtrl',
activetab: 'page'
}).
when('/page/:pageId', {
templateUrl: 'partials/page-details.html',
controller: 'PageDetailsCtrl',
activetab: 'page'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl',
activetab: 'about'
}).
when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactCtrl',
activetab: 'contact'
}).
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'SampleListCtrl',
activetab: 'phones'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'SampleDetailCtrl',
activetab: 'phones'
}).
otherwise({
redirectTo: '/'
});
// $locationProvider.html5Mode(true);
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
controller.js
var appTest = angular.module('appTest', ['ui.bootstrap.tpls']);
appTest.controller('HomeCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.pages = [
{ id:'1', title:'Home', pageRoute:'', activeNav:'home' },
{ id:'2', title:'About', pageRoute:'about', activeNav:'about'},
{ id:'3', title:'Contact', pageRoute:'contact', activeNav:'contact'}
];
$scope.projects = [{"id":1, "name":"Test 1","date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
{"id":2, "name":"Test 2", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
{"id":3, "name":"Test 3", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
{"id":4 , "name":"Test 4", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."}];
}]);
appTest.controller('PageCtrl', ['$scope', '$http',
function ($scope, $http) {
}]);
appTest.controller('PageDetailsCtrl', ['$scope', '$http',
function ($scope, $http) {
}]);
appTest.controller('AboutCtrl', ['$scope', '$http',
function ($scope, $http) {
}]);
appTest.controller('ContactCtrl', ['$scope', '$http',
function ($scope, $http) {
}]);
appTest.controller('SampleListCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.phones = [
{ 'phoneId': '1',
'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'phoneId': '2',
'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'phoneId': '3',
'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
$scope.orderProp = 'age';
}]);
appTest.controller('SampleDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
我的index.html和menu.html
<!doctype html>
<html lang="en">
<head>
<title> App Template </title>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
<!-- <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> -->
<script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/controllers.js"></script>
<link rel="stylesheet" href="assets/css/main.css"/>
<!-- <base href="/"> -->
</head>
<body ng-app="AngularTemplateApp">
<div ng-include src="'partials/menu.html'"></div>
<div class="view-animate-container">
<div id="main-view" ng-view class="view-animate">
</div>
</div>
</body>
</html>
<div id="menu">
<div class="container">
<div ng-controller="HomeCtrl" class="pull-right">
<ul class="nav nav-pills">
<li role="presentation">
<a href="#/"> Home </a>
</li>
<li role="presentation">
<a href="#/about"> About </a>
</li>
<li role="presentation">
<a href="#/contact"> Contact </a>
</li>
</ul>
</div>
</div>
</div>
我正在尝试学习angularjs,因此我将其加载到我的测试站点以查看其是否有效。您可以查看here提前谢谢!
最佳答案
你应该用
$locationProvider.html5Mode(true)
就像您尝试过的一样,但是您还应该从HTML文件的锚点中删除“#”,以便它看起来像
<div id="menu">
<div class="container">
<div ng-controller="HomeCtrl" class="pull-right">
<ul class="nav nav-pills">
<li role="presentation">
<a href="/"> Home </a>
</li>
<li role="presentation">
<a href="/about"> About </a>
</li>
<li role="presentation">
<a href="/contact"> Contact </a>
</li>
</ul>
</div>
</div>
</div>
希望这可以帮助。
关于javascript - 在AngularJs中从网址中删除#的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33317499/