Running AngularJS coded basic app on tomcat locally doesn't work properly

Question

I wrote a three file basic app that tries to use ui-router 3rd party module. If i take out routing from my code, the app works and controller does send value to the view. If i introduce the router code, the loading of ngApp fails and i could not understand the error message.

The main home.html view

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

The homeControllers.js definition

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() {
    };
  }]);

The 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'
    })
});

The error I see is...

 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)

I just can't figure out what my mistake is, after trying to correct everything that angular page says about that error.

Here is what the page shows... Web Page that shows as follows when app runs on tomcat 7 server

Radim Köhler · Accepted Answer · 2015-03-01 05:43:46Z

1

There is a working plunker with your scenario.

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

This is the adjusted route definition:

// 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'
  })

}]);

So the main changes are

array definition (when minification is in place)
the url definition. It should be there, it is not a must, but should be, at least on the root level.

Check it here

answered Mar 1, 2015 at 5:43

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ram Over a year ago

It Worked like a magic! Thanks a lot! I'll use the non-minified versions only keeping in mind what you said.

Collectives™ on Stack Overflow

Running AngularJS coded basic app on tomcat locally doesn't work properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related