angularjs - 在本地 tomcat 上运行 AngularJS 编码的基本应用程序无法正常工作-6ren

angularjs - 在本地 tomcat 上运行 AngularJS 编码的基本应用程序无法正常工作

转载作者：行者123 更新时间：2023-11-28 22:19:17

25

4

我编写了一个包含三个文件的基本应用程序，试图使用 ui-router 第 3 方模块。如果我从我的代码中取出路由，该应用程序可以正常工作并且 Controller 会向 View 发送值。如果我引入路由器代码，ngApp 加载失败，我无法理解错误消息。

home.html 主视图

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp" data-ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.14.min.js"></script>
<script src="homeControllers.js"></script>
<script src="homeRoutes.js"></script>
</head>
<body>
    <div>
    <nav class="navbar navbar-default navbar-static-top" data-ng-controller="navBarController">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">firstName lastName</a></li>
                    <li><a href="#"><img src='shutdown.png' /></a>
                    </li>
                </ul>
                <ul class="nav navbar-nav">
                    <li class="active"><a ui-sref="home">Home <span class="sr-only">(current)</span></a></li>
                    <li><a ui-sref="files">Files</a></li>
                    <li><a href="#">Exchange</a></li>
                    <li><a href="#">Mail <span class="badge">{{unreadMailCount}}</span></a></li>
                </ul>
                <ul id="taskBarUL" class="nav navbar-nav">
                    <li>
                        <ul id='taskul' class='horiz-ul-task-bar'></ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    </div>
    <div>
    <div id='main' ui-view></div>
    </div>
</body>
</html>

homeControllers.js 定义

var mod = angular.module('myControllers', []);
mod.controller('navBarController', ['$scope', function($scope) {
$scope.unreadMailCount = 5;
  }]);
  mod.controller('homeController', ['$scope', function($scope) {
    $scope.test = 5;
  }]);
  mod.controller('fileController', ['$scope', function($scope) {
    $scope.test = 5;
  }]);
  mod.controller('alertController', ['$scope', function($scope) {
    $scope.msg = [
      {text:'{{message}}'}
      ];

    $scope.info = function() {
    };

    $scope.warning = function() {
    };

    $scope.danger = function() {
    };
  }]);

homeRoutes.js

var myApp = angular.module('myApp', ['ui.router', 'myControllers']);
myApp.config('$stateProvider', function ($stateProvider) {
    $stateProvider.state('home', {
          templateUrl: 'pane-0.html'
    })
    .state('files', {
          templateUrl: 'pane-1.html'
    })
});

我看到的错误是...

 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=ionApp&p1=Error%3A…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A34%3A399)

在尝试更正 angular page 中关于该错误的所有内容后，我只是无法弄清楚我的错误是什么。

这是页面显示的内容... Web Page that shows as follows when app runs on tomcat 7 server

最佳答案

有a working plunker与你的场景。

Firstly, whenever you develop or test... do not use angular min.js version. This is only for production, once there are no errors

这是调整后的路由定义:

// the module def is ok
var myApp = angular
 .module('myApp', ['ui.router', 'myControllers']);

// here we use array notation for minification
myApp
 .config(['$stateProvider', '$urlRouterProvider',

  function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('');

  // both states are now provided with url
  $stateProvider
  .state('home', {
    url: "",
    templateUrl: 'tpl.pane-0.html'
  })
  .state('files', {
    url: "/files",
    templateUrl: 'tpl.pane-1.html'
  })

}]);

所以主要的变化是

数组定义(当缩小到位时)
url 定义。 它应该存在，它不是必须的，但至少在根级别应该存在。

查一下here

关于angularjs - 在本地 tomcat 上运行 AngularJS 编码的基本应用程序无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28788227/

25

4

0

文章推荐： python - Tkinter askcolor 返回错误的 RGB 值？

文章推荐： python - Python中的正则表达式来匹配具有特殊字符的单词

文章推荐： python - Keras Tensorflow 二元交叉熵损失大于 1

tomcat - tomcat 安全领域是否有 tomcat 匿名角色或用户？
我希望在某些环境中使用用户名和密码保护某个角色，但在其他环境中甚至不需要提示。如果我在 tomcat web.xml 中有一个 auth-constraint，我可以创建一个具有“匿名”访问权限的角色
tomcat - 使用 Tomcat 管理器监控 Tomcat
我正在使用 Tomcat jmxproxy 和状态来监视 Web 应用程序，但是 jmxproxy 页面中有很多无用的信息，并且其中没有任何信息，例如事件连接数。有谁知道如何过滤 jmxproxy 页
tomcat - 从 Tomcat 本身重新启动 Tomcat
是否可以通过执行 JSP 来重启 Tomcat6？这是因为我想通过使用网络服务器远程部署应用程序的更改。部署脚本是用 bash 编写的，它从 svn 中 check out 最新版本，然后将其打包
tomcat - Gradle tomcat 插件尝试启动 tomcat 两次
我有一个包含 2 个子项目(后端和 ui)的 gradle 项目。 Ui由gradle tomcatRunWar完美启动.后端有我们在生产地点的配置描述符/conf/Catalina/localhos
tomcat - XAMPP Tomcat 显示正在运行但并未运行。无法阻止 Tomcat
发现 XAMPP 控件认为 tomcat 正在运行但无法停止它的问题。在catalina下的tomcat logs目录下可以找到如下错误 “严重:无法联系 localhost:8005。Tomcat
tomcat - puppetlabs/tomcat 模块是否使设置 Tomcat 的上下文路径变得简单？
PuppetLabs 在 PuppetForge 上有一个模块，用于部署 Tomcat 及其配置。 https://forge.puppet.com/puppetlabs/tomcat Tomcat
tomcat - 如何将 Tomcat 配置为在 Tomcat 启动时不自动启动某些应用程序？
我有一个部署到 Tomcat 实例中的 Web 应用程序。我希望能够将 tomcat 配置为在 Tomcat 本身启动时不自动启动该应用程序。但是，我确实希望启动 Tomcat 管理器，以便我可以根据
tomcat - 如何在不重新安装 Tomcat 的情况下安装 Tomcat Manager？
操作系统:windows XP。我已经安装了 Tomcat 7.0.25，文件夹“manager”位于 webapps 文件夹中。我已阅读此处的文档:http://tomcat.apache.or
tomcat - 访问日志分析@Tomcat
我们在 server.xml 文件中启用了以下访问日志模式 pattern="%h %H %l %u %t "%r" %s %b location: %{location}o"。有人可以帮助理解模式
tomcat - Tomcat 如何将请求映射到特定应用程序
我最近开始使用 tomcat，我有一个关于 Tomcat 请求路由/映射的查询。假设我在 tomcat 服务器中部署了四个应用程序 A、B、C 和 D，当有请求到来时，tomcat 如何知道要调用哪
tomcat - 通过外部设备访问 Tomcat
我在我的计算机上使用 Tomcat，它可以通过端口 8080 访问。我想要的是我应该能够使用我的计算机的 IP 地址访问我的 Tomcat 服务器页面。我以前读过很多主题，但找不到一个可以帮助我的主题
tomcat - tomcat 上的架构错误
我有一个 tomcat 7 服务器和一个 postgreSQL 9.0 数据库。我用它来为地理网络元数据编辑器设置开发环境。一切都是根据 geonetwork 网站教程设置的。我在将服务器与数据库连接
tomcat - 带有虚拟IP的Apache tomcat
我的服务器有物理 ip 和虚拟 ip 由网络管理员设置。在我安装的服务器内部 Apache tomcat 7.0.29并创建一个网络应用程序。当我运行 wget http://:8080/xxx或
tomcat - 使用单个 psi(tomcat) 探针来监控跨不同 tomcat 实例的多个实例
我有多个应用程序在不同的端口上运行(tomcat 实例) 都有相同的CATALINA_HOME 目前我必须在所有实例中部署和安装psi 探针，并在不同的窗口中分别监控每个端口。我如何在一个单一的探测
tomcat - 将 tomcat 控制台重定向到文件，每次 Tomcat 启动时都应该创建一个新文件
based on this question 我尝试将 Tomcat 控制台输出重定向到一个文本文件，它对我的 Web 应用程序工作正常，但问题是，每次 Tomcat 启动时它都会被覆盖。我需要创
tomcat - Tomcat 中已部署应用程序的内存
我需要阐明我的问题。问题是:有什么方法可以影响 Tomcat 为特定部署的应用程序分配多少堆内存？更多详细信息 - 我如何为已部署的应用程序设置特定的 Java 选项(考虑我想为每个应用程序设置特殊的
tomcat - tomcat 7中的类加载
应用服务器内部的类加载机制是开发人员常见的困惑来源；这就是为什么我想问一个关于 tomcat 7 服务器中这个机制的问题:我有一个网络应用程序 sample.war，它依赖于 jgroups 库，放
tomcat - 将嵌入式 tomcat 5 迁移到 tomcat 7
尝试将嵌入式 Tomcat 5 迁移到嵌入式 Tomcat 7。在启动过程中获取 NPE。我扩展了 Embedded 类并按照正确的顺序执行所有建议的初始化。 NPE 发生在这里: Caused b
tomcat - 使用指定的根目录和主页运行 Tomcat
我可以使用随附的 start.sh 文件启动 tomcat，但是是否有任何参数可以用来执行以下操作: 在指定的根目录启动 Tomcat 服务强制 Tomcat 在浏览器中拉出指定的主页谢谢最佳答
tomcat - tomcat 中的集群组中没有事件成员
我在两台 diff 机器 tomcat 服务器上做一个简单的集群配置。每次我启动 tomcat 时，我都会收到一个错误，就像集群组中没有事件成员一样。我正在附加集群配置

首页

博学

6Ren·AI

商城

angularjs - 在本地 tomcat 上运行 AngularJS 编码的基本应用程序无法正常工作