Question

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

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

我的导航栏位于顶部，主页，关于，联系等。典型的东西。

我希望能够点击“about”并将其路由到同一页面上的about.html文件。

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

这是index.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>

这是script.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.';
});

Answer 1

我猜您遵循了this教程，至少它解释了您需要的一切。

可能的错误可能是：

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

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

Answer 2

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

<强> INDEX.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>

<强>的script.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.';
});

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

2 个答案: