Angular js ngroute 不适用于静态 HTML 文件答案

【问题标题】：Angular js ngroute is not working for a static HTML filesAngular js ngroute 不适用于静态 HTML 文件
【发布时间】：2023-03-27 04:19:02
【问题描述】：

我有 6 个 html 文件，其中使用 angular js 配置 ngroute，每个 html 文件都有图像 jquery 滑块，我使用 node express web 服务器作为服务器，如果我启动我的服务器，它在 3000 端口上运行我打开我的浏览器并加载 localhost:3000 我能够获取 index.html 文件及其内容如果我导航到其他菜单链接我无法获取该 html 文件的内容但它仅加载预加载器，我发布我的下面的 HTML 和 Angular js 代码请纠正我的任何错误

HTML

<div class="navbar-collapse pull-right nav-main-collapse collapse" ng-app="sam">
  <nav class="nav-main">
   <!--NOTE

    For a regular link, remove "dropdown" class from LI tag and "dropdown-toggle" class from the href.
    Direct Link Example:
    <li> <a href="#">HOME</a> </li>
    -->
    <ul id="topMain" class="nav nav-pills nav-main">
      <li class="active"><!-- HOME --> 
        <a  href="#index"> Home </a> </li>
      <li class="active"><!-- Instruction to Authors --> 
        <a  href="#author"> Instructions to Authors </a> </li>
      <li class="active"><!-- Manuscript Submission --> 
        <a  href="#manuscript">Manuscript Submission </a> </li>
      <li class="active"><!-- Contents --> 
        <a  href="#contents"> Contents </a> </li>
      <li class="active"><!-- Editorial Board --> 
        <a  href="#editorial"> Editorial Policy </a> </li>
      <li class="active"><!-- Contact Us --> 
        <a  href="#contact"> Contact Us </a> </li>
    </ul>
    <div ng-view></div>
  </nav>
</div>

script.js（角度 js 文件）

var app = angular.module('sam', ['ngRoute']);

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


       when('/index', {
        templateUrl: 'index.html'
      }).
       when('/author', {
        templateUrl: 'author.html'
      }).
      when('/contact', {
        templateUrl: 'contact.html'
      }). 
      when('/contents', {
        templateUrl: 'contents.html'
      }). 
      when('/editorial', {
        templateUrl: 'editorial.html'
      }).
       when('/manuscript', {
        templateUrl: 'manuscript.html'
      });

});

【问题讨论】：

标签： html angularjs node.js ngroute angularjs-ng-route

【解决方案1】：

您应该链接到#/author 而不是#author

【讨论】：

是的，我已将 #/ 添加到链接标签，它只是加载预加载器而不是内容

【解决方案2】：

请确保您已在 index.html 中包含 angular-route.js

<script src="bower_components/angular-route/angular-route.js"></script>

您可以点击给定的链接以确保您的代码this link

【讨论】：

其实是从cdn得到的我觉得不是问题，问题是我不知道在 node express web 服务器中路由我的项目中的文件夹
请将您的路由器代码放在这里，或者您可以通过添加节点快递代码来更新您的问题
var express = require('express'); var app = express(); var path = require('path'); app.use(express.static(__dirname + '/')); app.get(/^\/((?:[^\/]+\/?)+)\//, function(req, res) { res.send(req.params[0].split('/ ')); }); app.listen(3000,function(){ console.log("它在 3000 端口启动"); });