Question

我正在尝试使用angularJS在我的应用程序（java-ee）中构建前端。我无法将角度应用程序注入到我的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/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>

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

Answer 2

更改下面的脚本引用。

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

角度开始（ReferenceError：angular未定义）

2 个答案: