Question

大家好我刚刚开始学习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>

Answer 1

如果你像.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 : '/'
  });

});

Answer 2

问题出在以下几行

 <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。

让我知道它是否有用

Answer 3

angular.module（ 'MODULENAME'，[ 'ngRoute']）;

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

如何在AngularJS上路由页面

3 个答案: