angular js路由不工作，没有任何js错误

angular js routing not working without any js errors

本文关键字：js 任何 错误 工作 路由 angular      更新时间：2023-09-26

我正在处理路由应用程序。在我有索引和控制器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'
    });
}]);

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

ng视图

在哪里

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

试试这个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>
相关文章：