Question

我正在研究路由应用程序。我有索引和控制器js的代码，请告诉我我哪里出错了。

我的angular-js代码

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <title>HelloWorld</title>

  <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>
  <div class="container">
  <div class="page-header">
    <h1>Hello World Sample Program</h1>
  </div>
    <p><a href="#/page">Go to page</a></p>
    <p><a href="#/page1">Go to page1</a></p>
    <p><a href="#/page2">Go to page2</a></p>
    <p><a href="#/page3">Go to page3</a></p>


  <div>
    <form class="form-horizontal" role="form">
      <div class="form-group">
          <label class="col-md-2 control-label">Type Your Name</label>
          <div class="col-md-4">
               <input type="text" ng-model="name"  class="form-control"/>
               <span>Hello {{ name }}</span>
          </div>
      </div>
    </form>
  </div>
  </div>
  <script src="js/angular.min.js"></script>
  <script src="js/ui-bootstrap-tpls-2.0.0.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

我的js代码

'use strict';

    var helloApp = angular.module( "helloApp", ['ui.bootstrap','ngRoute'] ).
    config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'HelloCtrl',
      templateUrl: 'views/page.html'
    })
    .when('/page', {
      controller: 'HelloCtrl',
      templateUrl: 'views/page.html'
    })
    .when('/page1', {
      controller: 'HelloCtrl',
      templateUrl: 'views/page1.html'
    })
    .when('/page2', {
      controller: 'HelloCtrl',
      templateUrl: 'views/page2.html'
    })
    .when('/page3', {
      controller: 'HelloCtrl',
      templateUrl: 'views/page3.html'
    }).otherwise({
      redirectTo: '/page'
    });
}]);

Answer 1

你的

<div ng-view></div>显示路由位置。

Answer 2

您需要将<div ng-view></div>添加到您的html文件

中

ng-view

Answer 3

试试这个html

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <title>HelloWorld</title>

  <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>
  <div class="container">
  <div class="page-header">
    <h1>Hello World Sample Program</h1>
  </div>
    <p><a href="#/page">Go to page</a></p>
    <p><a href="#/page1">Go to page1</a></p>
    <p><a href="#/page2">Go to page2</a></p>
    <p><a href="#/page3">Go to page3</a></p>


  <div>
    <form class="form-horizontal" role="form">
      <div class="form-group">
          <label class="col-md-2 control-label">Type Your Name</label>
          <div class="col-md-4">
               <input type="text" ng-model="name"  class="form-control"/>
               <span>Hello {{ name }}</span>
          </div>
      </div>
    </form>
    <div class="col-md-2" ng-view></div>
  </div>
  </div>
  <script src="js/angular.min.js"></script>
  <script src="js/ui-bootstrap-tpls-2.0.0.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

角度js路由不工作没有任何js错误

3 个答案: