如何在AngularJS上路由页面

How to route pages on AngularJS

本文关键字：路由 AngularJS      更新时间：2024-05-21

大家好，我刚开始学习Angular JS，在从页面加载内容时遇到了问题。我没有收到任何内容。这是我的索引和js代码：

index.html

<html ng-app="app">
<head>
    <title>My App</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Text 1</h1>
            <h2>Text 2</h1>
            <nav>
                <a href="#/">Home</a>
                <a href="#/exterior">Exterior</a>
                <a href="#/interior">Interior</a>
                <a href="#/gallery">Gallery</a>
                <a href="#/form">Form</a>
                <a href="#/live-preview">Live</a>
            </nav>
        </header>
        <div ng-view>
            <!-- Content here -->
        </div>
        <footer>
            2015
        </footer>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
</body>

app.js

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routes) {
  $route.when('/',{
    templateUrl : '/views/index.html'
  });
  $route.when('/exterior',{
    templateUrl : '/views/exterior.html'
  });
  $route.when('/interior',{
    templateUrl : '/views/interior.html'
  });
  $route.when('/gallery',{
    templateUrl : '/views/gallery.html'
  });
  $route.when('/form',{
    templateUrl : '/views/form.html'
  });
  $route.when('/live-preview',{
    templateUrl : '/views/live-preview.html'
  });
  $routes.otherwise({
    redirectTo : '/'
  });
}]);

我的所有页面都已创建为文件，内容如下

exterior.html

<div>
    <h2>Exterior</h2>
    <p>My content here</p>
</div>

问题在的下面几行

 <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>

在拥有angular.js和angular-route.js库之前，您已经包含了app.js。

将其包含在底部并再次检查

<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>

脚本中还有一个错误：您正在调用$route而不是$routes。

让我知道是否有用

如果你像这样构建.config，它能工作吗：

app.config( function($routeProvider) {
  $routeProvider
    .when('/', {
    templateUrl : '/views/index.html'
  })
    .when('/exterior', {
    templateUrl : '/views/exterior.html'
  })
    .when('/interior', {
    templateUrl : '/views/interior.html'
  })
    .when('/gallery', {
    templateUrl : '/views/gallery.html'
  })
    .when('/form', {
    templateUrl : '/views/form.html'
  })
    .when('/live-preview', {
    templateUrl : '/views/live-preview.html'
  })
  .otherwise({
    redirectTo : '/'
  });
});

angular.module（'moduleName'，['ngRoute']）；

检查相关性并在index.html 中添加源文件angular-route.js

相关文章：