个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 22:19:17 25 4
gpt4 key购买 nike

我编写了一个包含三个文件的基本应用程序，试图使用 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'
  })

}]);

所以主要的变化是

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

查一下here

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

25 4 0
文章推荐： python - 如何在不使用 if 语句的情况下随机调用三个函数之一？
文章推荐： python - Tkinter askcolor 返回错误的 RGB 值？
文章推荐： python - Python中的正则表达式来匹配具有特殊字符的单词
文章推荐： python - Keras Tensorflow 二元交叉熵损失大于 1
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com