angular start (ReferenceError: angular is not defined)

Question

我正在尝试使用 angularJS 在我的应用程序 (java-ee) 中构建前端。我无法将 angular 应用程序注入我的 jsp 文件。我总是有这个错误：ReferenceError: angular is not defined。我知道这很容易出错，但我找不到解决方案。下面是我的代码：

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

控制器：

'use strict';
/**
 * 
 */

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

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

Answer 1

像下面这样更改脚本引用。

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

您在 controller.js 中覆盖了您的 frontendApp 那是在清除你的整个 frontendApp。您应该始终使用依赖项声明一次模块，然后仅通过该模块名称重用它。

'use strict';

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

控制器

'use strict';

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

Answer 2

重新安排您的脚本

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

成为

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

为什么要在控制器中定义另一个模块？？？

angular start (ReferenceError: angular is not defined)

angular start (ReferenceError: angular is not defined)

java

angularjs

dependency-injection

declaration

angularjs-routing