Question

我正在研究平均机器教程，并且在使用ng-view将页面注入主布局时遇到了障碍。我在app.routes.js中配置了路由，在app.js中定义了控制器，并为每个页面创建了html文件。 app.js和app.routes.js都已加载到index.html文件中。 mainController工作正常，只是不是辅助控制器。请参阅下面的代码。对我做错了什么的想法？

公共/视图/ index.html中

<html>
<head>
  <meta charset="utf-8">
  <title>My Routing App!</title>

  <!-- set the base path for angular routing -->
  <base href="/">

  <!-- CSS -->
  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <style>
    body { padding-top:50px; }
  </style>

  <!-- JS -->
  <!-- load angular and angular-route via CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>

<!-- load our custom angular app files -->
  <script src="js/app.js"></script>
  <script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">

  <!-- HEADER AND NAVBAR -->
  <header>
    <nav class="navbar navbar-default">
      <div class ="navbar-header">
        <a class="navbar-brand" href="/">Angular Routing Example</a>
      </div>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="/about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- MAIN CONTENT AND INJECTED VIEWS -->
  <main>

    <!-- angular templating will go here -->
    <!-- this is where content will be injected -->

    <div ng-view></div>

  </main>

</body>
</html>

公共/ JS / app.js

angular.module('routerApp', ['routerRoutes'])

// create the controllers
// this will be the controller for the ENTIRE site
.controller('mainController', function() {

  var vm = this;

  // create a bigMessage variable to display in our views
  vm.bigMessage = 'A smooth sea never made a skilled sailor.';
})

// home page specific controller
.controller('homeController', function() {

  var vm = this;

  vm.message = 'This is the home page!';
})

// about page controller
.controller('aboutController', function() {

  var vm = this;

  vm.message = 'Look! I am an about page.';
})

// contact page controller
.controller('contactController', function() {

  var vm = this;

  vm.message = 'Contact us! JK. This is just a demo.';
});

公共/ JS / app.routes.js

// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])

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

  // route for the home page
  .when('/', {
    templateURL: 'views/pages/home.html',
    controller: 'homeController',
    controllerAs: 'home'
  })

  // route for the about page
  .when('/about', {
    templateURL: 'views/pages/about.html',
    controller: 'aboutController',
    controllerAs: 'about'
  })

  // route for the contact page
  .when('/contact', {
    templateURL: 'views/pages/contact.html',
    controller: 'contactController',
    controllerAs: 'contact'
  });

  // set our app to have pretty URLS
  $locationProvider.html5Mode(true);
});

公共/视图/页/ home.html的

<div class="jumbotron text-center">
  <h1>Home Page</h1>

  <p>{{ home.message }}</p>
</div>

公共/视图/页/ about.html

<div class="jumbotron text-center">
  <h1>About Page</h1>

  <p>{{ about.message }}</p>
</div>

公共/视图/页/ contact.html

<div class="jumbotron text-center">
  <h1>Contact Page</h1>

  <p>{{ contact.message }}</p>
</div>

Answer 1

您确定您的templateURL属性具有正确的值吗？尝试使用public/views/pages/home.html或在浏览器中浏览应用程序时显示的任何完整网址。

请参阅$ routeProvider上的文档：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider。

Angular ng-view无法正常工作

1 个答案: