Question

我正在学习如何在AngularJS中实现路由。其他一切工作正常，但是当我点击导航时，视图没有得到更新。

如何在应用程序中实现所需的功能？我希望导航能够将我们带到所需的页面，而无需刷新页面，这很明显。

这是代码。

的index.html

<!DOCTYPE html>
<html ng-app="routingApp">
  <head>
    <title>AngularJS routing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular-route.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="routingAppController">

    <!-- Header and Navigation -->
    <header>
      <nav class= "navbar navbar-default">
        <div class="container">

          <div class="navbar-header">
            <a class="navbar-brand" href="/">Angular Routing App</a>
          </div>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>

        </div>
      </nav>
    </header>

    <!-- Main Body where content will be injected -->
    <div id="main">
      <div ng-view></div>
    </div>

  </body>
  </html>

的script.js

(function(){
  'use strict';
  var app = angular.module('routingApp', ['ngRoute']);

  app.config(function($routeProvider){
    $routeProvider

      .when('/', {
        templateUrl : 'pages/home.html',
        controller : 'routingAppController'
      })

      .when('/about', {
        templateUrl : 'pages/about.html',
        controller : 'aboutController'
      })

      .when('/contact', {
        templateUrl : 'pages/contact.html',
        controller : 'contactController'
      });
  });

  app.controller('routingAppController', function($scope){
    $scope.message = "This will get updated for sure!";
  });

  app.controller('aboutController', function($scope){
    $scope.message = "This is the about page and it looks awesome!";
  });

  app.controller('contactController', function($scope){
    $scope.message = "This is the contact page!";
  });

})();

其中一个页面

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

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

AngularJS路由：视图没有得到更新

0 个答案: