Search code examples
javaangularjsdependency-injectiondeclarationangularjs-routing

angular start (ReferenceError: angular is not defined)

I am trying build frontend in my aplication ( java-ee ) using angularJS. I can't inject angular application to my jsp file. I have always this error: ReferenceError: angular is not defined. I knew that it is easy error but I can't find solution. Below there are my code:

index.jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>

    <head>
        <script src="<c:url value="/resources/angular-app/registration/registration.module.js" />"></script>
        <script src="<c:url value="/resources/angular-app/registration/RegistrationCtrl.js" />"></script>

        <script src="<c:url value="/resources/angular-app/bower_components/jquery/dist/jquery.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular/angular.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-animate/angular-animate.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-route/angular-route.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-resource/angular-resource.js" />"></script>
    </head>

    <body ng-app="frontendApp">
        <div ng-view></></div>
    </body>

</html>

app.js:

'use strict';
/**
 * 
 */

angular.module('frontendApp', ['ngRoute', 'registrationControllers'])
    .config([ '$routeProvider', function ($routeProvider){
    $routeProvider
    .when('/rest',{
        templateUrl: 'resources/angular-app/registration/registration.html',
        controller: 'RegistrationCtrl'
    });
}]);

controller:

'use strict';
/**
 * 
 */

var registrationControllers = angular.module('frontendApp', []);

registrationControllers.controller('RegistrationCtrl',['$scope', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  }]);
Solution

  • Change script references like below.

            <script src="<c:url value="/resources/angular-app/bower_components/jquery/dist/jquery.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular/angular.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-animate/angular-animate.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-route/angular-route.js" />"></script>
        <script src="<c:url value="/resources/angular-app/bower_components/angular-resource/angular-resource.js" />"></script>

        <script src="<c:url value="/resources/angular-app/registration/registration.module.js" />"></script>
        <script src="<c:url value="/resources/angular-app/registration/RegistrationCtrl.js" />"></script>

    You were overriding your frontendApp inside the controller.js That was clearing your whole frontendApp. You should always declared module once with dependency and then reuse it by that module name only.

    'use strict';

var frontendApp = angular.module('frontendApp', ['ngRoute'])
    .config([ '$routeProvider', function ($routeProvider){
    $routeProvider
    .when('/rest',{
        templateUrl: 'resources/angular-app/registration/registration.html',
        controller: 'RegistrationCtrl'
    });
}]);

    Controller

    'use strict';

frontendApp.controller('RegistrationCtrl',['$scope', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  }]);