Question

我无法路由到其他页面我不知道的问题请解决我的问题。
我正在使用 Eclipse Java EE IDE for Web Developers 版本：Mars.1发布（4.5.1）构建ID：20150924-1200

// also include ngRoute for all our routing needs
var myApp = angular.module('myApp', ['ngRoute']);

// configure our routes
myApp.config(function($routeProvider) {

  $routeProvider

  // route for the home page
    .when('#/', {

    templateUrl: 'home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('#/about', {
    templateUrl: 'about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('#/contact', {
    templateUrl: 'contact.html',
    controller: 'contactController'
  });
});

// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
  // create a message to display in our view

  $scope.username = 'ranjeet';
  $scope.password = 'singh';

  $scope.message = 'Everyone come and see how good I look!';
});



myApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

myApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us! JK. This is just a demo.';
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>

<body>
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">Angular Routing Example</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#/">home</a>
          </li>
          <li><a href="#/about"> About</a>
          </li>
          <li><a href="#/contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div id="main">

    <div ng-view></div>
  </div>


</body>

</html>

我的项目的文件结构： [ file structure of my project 1

Answer 1

$routeProvider.when()中的网址值不应包含#，如果适用，将在内部设置{默认情况下html5mode被角度路由器禁用，因此angular会使用哈希位置策略）

尝试更改：

$routeProvider

  // route for the home page
    .when('#/', {

    templateUrl: 'home.html',
    controller: 'mainController'
  })

要

$routeProvider

  // route for the home page
    .when('/', { //do remove # from all registered routes
       // ^^ no "#"
    templateUrl: 'home.html',
    controller: 'mainController'
  })

在eclipse中无法在angularjs中路由

1 个答案: