Question

我正在尝试从我的个人网站的网址中删除“＃”。

这

http://frankcalpitojr.com/#/about

要

http://frankcalpitojr.com/about

我试过这个AngularJS routing without the hash '#'

但是发生的事情是网址将更改更改为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提前致谢！

Answer 1

你应该使用

$locationProvider.html5Mode(true)

正如您所尝试的那样，但您也应该删除＆＃39;＃＆＃39;来自HTML文件中的锚点，使其看起来像

＆＃13;

<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>

＆＃13;

希望这有帮助。

在AngularJs

1 个答案: