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

Posted 2023-03-06

技术标签:

【中文标题】基本的 AngularJs 无法路由到不同的页面【英文标题】：Basic AngularJs not able to route to different page 【发布时间】：2015-02-14 19:12:37 【问题描述】：

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

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

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

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

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

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

【问题讨论】：

请将添加到您的 index.html 已经开启。但是没有效果？谢谢在哪里？我看不到，为什么你两次包含 ng-route.js？向下滚动到 index.html 的底部。我只是按照教程所说的进行。好的，你能显示控制台错误吗？ 【参考方案1】：

以下内容应该适合您。您需要创建 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.';
);

【讨论】：

奇怪的是......似乎不再起作用了。链接现在无法点击。奇怪的是......似乎不再起作用了。链接现在无法点击，页面不断崩溃。真的很奇怪，因为你的建议一开始就奏效了！代码已更新。不要忘记添加新的部分 main.html 谢谢，但我有。恐怕页面仍然崩溃并且链接不可点击。【参考方案2】：

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

可能的错误可能是：

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

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

【讨论】：

您好，非常感谢。如何查看错误消息？我正在通过 SSH 连接到 Ubuntu 服务器。我所有的编辑都是在 ssh 上的 pico 上完成的。我不知道您使用的是哪个浏览器。转到您的页面，如果您使用的是 Firefox，请按 CMD+ALT+K，如果您使用的是 chrome，则取决于您的操作系统。在 Windows 上按 CTRL+SHIFT+J，在 MAC 上按 CMD+ALT+J。 Web 控制台显示不同的内容，例如日志消息和错误。这个FF Wiki Page 更详细地解释了它。这里是错误。 SyntaxError: 语法错误 angular.min.js:1 TypeError: angular is undefined angular-route.js:24 GET advice.local/script.js [HTTP/1.1 404 Not Found 2ms] TypeError: e is undefined angular-route.min.js:10未声明 HTML 文档的字符编码。如果文档包含 US-ASCII 范围之外的字符，则文档将在某些浏览器配置中呈现乱码。页面的字符编码必须在文档或传输协议中声明。 ...您的 js 文件夹中有 angular 或 angular-route js 模块吗？尝试将文件/文件夹结构的转储添加到问题中您似乎没有在 angular-route.js 之前包含 angular.js。你的 index.html 的头部有这三行吗？

&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt; &lt;script src="script.js"&gt;&lt;/script&gt;

以上是关于基本的 AngularJs 无法路由到不同的页面的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS - 登录后路由到不同 ng-app 模块的另一个页面

angularjs配置路由后无法跳转

AngularJS路由

AngularJS 路由精分

AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

angularjs ui-router 路由简介