角度路线不起作用答案

【问题标题】：Angular Routes are not working角度路线不起作用
【发布时间】：2017-03-20 15:23:24
【问题描述】：

app.js 我正在尝试在这里设置路由，但它不起作用，我不知道为什么它不起作用，请查看这个问题。当我点击 page1 时，网址应该是/employees 但它的形状很奇怪 http://localhost:3000/#!#employees

var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider){
console.log('in the routes')
$routeProvider
    .when('/employees' ,{
        templateUrl: 'templates/index.html',
        controller: 'empController'
    })
    .when('/employees/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'empController'
    })
    .when('/employees/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'empController'
    })
    .when('/employees/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'empController'
    })
})

index.html

<body ng-app='myapp' ng-controller='empController'>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="">Home</a></li>
      <li><a href="#/employees">Page 1</a></li>
      <li><a href="#/employees/create">Page 2</a></li>
      <li><a href="#/employees/:id/edit">Page 3</a></li>
      <li><a href="#/employees/:id/show">Page 3</a></li>
    </ul>
  </div>
</nav>
<hr>

<div ng-view></div>

【问题讨论】：

您可以删除 !在本例所示的 url 中：stackoverflow.com/questions/41214312/….
URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6的可能重复

标签： javascript angularjs angularjs-directive angular-ui-router angular-routing

【解决方案1】：

试试这个方法，

var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
console.log('in the routes')
$routeProvider
    .when('/employees' ,{
        templateUrl: 'templates/index.html',
        controller: 'empController'
    })
    .when('/employees/create' ,{
        templateUrl: 'templates/create.html',
        controller: 'empController'
    })
    .when('/employees/:id/show' ,{
        templateUrl: 'templates/show.html',
        controller: 'empController'
    })
    .when('/employees/:id/edit' ,{
        templateUrl: 'templates/edit.html',
        controller: 'empController'
    })
})

【讨论】：

【解决方案2】：

您可以修改您的应用。像这样的js来处理它。

.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

【讨论】：