Question

我写了一个试图使用ui-router第三方模块的三文件基本应用程序。如果我从我的代码中取出路由，应用程序可以工作，控制器会向视图发送值。如果我介绍路由器代码，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)

在尝试纠正角度页面中有关该错误的所有内容之后，我无法弄清楚我的错误是什么。

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

Answer 1

您的方案有a working plunker。

首先，无论何时开发或测试......都不要使用有角度的 min.js 版本。这只适用于生产，一旦没有错误

这是调整后的路线定义：

// 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

在tomcat上本地运行AngularJS编码的基本应用程序并不能正常工作

1 个答案: