AngularJS is not defined

Question

I'm starting to study in AngularJs at the beginning level. My project is used in the Spring Boot framework. I get an error message: "ReferenceError: angular is not defined". I have already created app.js which is a defined angular variable, but it is still an error.

app.js:

var app = angular.module('myapp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
    $scope.title = "Welcome";        
}]);

welcome.jsp:

<c:set var="contextPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html ng-app="myapp" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Create an account</title>
        <link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
        <script src="${contextPath}/resources/js/app.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
    </head>
    <body>
        <div class="container" ng-controller="mainController">
            <c:if test="${pageContext.request.userPrincipal.name != null}">
            <form id="logoutForm" method="POST" action="${contextPath}/logout">
                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
            </form>

            <h2> {{ title }} ${pageContext.request.userPrincipal.name} | 
                <a onclick="document.forms['logoutForm'].submit()">Logout</a></h2>
            </c:if> 
            {{ title }}         
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="${contextPath}/resources/js/bootstrap.min.js"></script>

    </body>
</html>

How can I resolve this issue?

Try to move App script below angular one in script declaration — Maksim Tikhonov, Jan 16 '20 at 15:18
Does this answer your question? [What is the cause for "angular is not defined"](https://stackoverflow.com/questions/18044519/what-is-the-cause-for-angular-is-not-defined) — benbotto, Jan 16 '20 at 15:23
Also be aware that bootstrap.js does not play well with angular.js — georgeawg, Jan 16 '20 at 16:44

score 1 · Answer 1 · answered Jan 16 '20 at 15:19

Move your script below

<c:set var="contextPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html ng-app="myapp" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Create an account</title>
        <link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
        
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>

        <!-- move it here -->
        
        <script src="${contextPath}/resources/js/app.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Thanks for explaining. I had to spend a lot of time with this problem. — Lukas Gužauskas, Jan 16 '20 at 15:29
Glad to help you :) It is important to place scripts in order you want to load them — Maksim Tikhonov, Jan 16 '20 at 15:32

score 1 · Answer 2 · answered Jan 16 '20 at 15:21

Add angular script before your app.js.

Since your app.js uses angular object, it must be already defined. angular scripts does that job, so it must be loaded before any angular code.

Try below

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<script src="${contextPath}/resources/js/app.js"></script>

Thanks for explaining. I had to spend a lot of time with this problem. — Lukas Gužauskas, Jan 16 '20 at 15:28

AngularJS is not defined

2 Answers2