基本 AngularJs 无法路由到不同的页面

Basic AngularJs not able to route to different page

本文关键字：AngularJs 路由基本更新时间：2023-09-26

编程并不陌生。但我是 angularjs 的新手。所以这可能是一个愚蠢的问题。

我一直在关注教程...但由于某种原因，页面路由不起作用。

我在顶部有一个导航栏，主页，关于，联系人等。典型的东西。

我希望能够单击"关于"并被路由到同一页面上的关于.html文件。

什么都没有出现！索引.html位于部件文件中。请注意，我是角度的新手，我已经按照说明进行操作。我的服务器工作正常。导航栏看起来不错，但链接不正确。

这是索引.html的代码。谢谢

<!-- define angular app -->
<html ng-app="financeApp">
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"       />
  <!-- SPELLS -->
  <script src="js/angular.min.js"></script>
  <script src="js/angular-route.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="script.js"></script>

</head>

 <!-- HEADER AND NAVBAR -->
    <header>
    <div class="wrap">
        <!-- logo -->
        <a href="#!"><img class="logo" src="img/logo.png" /></a>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"></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>
        </div>
        </nav>
    </header>








<!-- define angular controller -->
<div class="main" ng-controller="mainController">




<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">

    <div ng-view>        </div>
    <!-- angular templating -->
    <!-- this is where content will be injected -->
</div>
</body>
</html>

这是脚本的代码.js

 // create the module and name it financeApp
    // also include ngRoute for all our routing needs
 var financeApp = angular.module('financeApp', ['ngRoute']);
 // configure our routes
 financeApp.config(function($routeProvider) {
    $routeProvider
        // route for the home page
        .when('#', {
            templateUrl : 'partials/index.html',
            controller  : 'mainController'
        })
        // route for the about page
        .when('#about', {
            templateUrl : 'partials/about.html',
            controller  : 'aboutController'
        })
        // route for the contact page
        .when('#contact', {
            templateUrl : 'partials/contact.html',
            controller  : 'contactController'
        });
 });
 // create the controller and inject Angular's $scope
 financeApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
 });
 financeApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
 });
financeApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

以下内容应该适合您。您需要创建 partials/main.html

索引

.HTML

<!DOCTYPE HTML>
<html ng-app="financeApp">
  <head>
    <meta charset="utf-8">
    <!-- CSS -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  </head>
  <!-- HEADER AND NAVBAR -->
  <header>
    <div class="wrap">
      <!-- logo -->
      <!-- <a href="#!"><img class="logo" src="img/logo.png" /></a> -->
      <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#/"></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>
        </div>
      </nav>
    </div>
  </header>
  <body>
    <div class="main" ng-controller="mainController">
      <!-- MAIN CONTENT AND INJECTED VIEWS -->
      <div id="main">
          <div ng-view></div>
          <!-- angular templating -->
          <!-- this is where content will be injected -->
      </div>
    </div>
    <!-- App JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

脚本

.JS

  var financeApp = angular.module('financeApp', ['ngRoute']);
 // configure our routes
 financeApp.config(function($routeProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'partials/main.html',
            controller  : 'mainController'
        })
        // route for the about page
        .when('/about', {
            templateUrl : 'partials/about.html',
            controller  : 'aboutController'
        })
        // route for the contact page
        .when('/contact', {
            templateUrl : 'partials/contact.html',
            controller  : 'contactController'
        })
        .otherwise({
            redirectTo: '/'
      })
 });
 // create the controller and inject Angular's $scope
 financeApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
 });
 financeApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
 });
financeApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

我想你遵循了本教程，至少它解释了你需要的一切。

可能的错误可能是：

文件夹名称错误 ->再次检查模板 URL 是否与您的文件系统匹配
模板文件中的错误

如果您从控制台向我们提供一些错误消息，我们可以为您提供更好的帮助。