1

angularJS를 사용하여 내 응용 프로그램 (java-ee)에서 프론트 엔드를 빌드하려고합니다. 내 JSP 파일에 각도 응용 프로그램을 삽입 할 수 없습니다. 항상이 오류가 있습니다 : ReferenceError: angular is not defined. 나는 그것이 쉬운 오류라는 것을 알고 있었지만 해결책을 찾지 못했습니다.각도 시작 (ReferenceError : 각도가 정의되지 않음)

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

답변

0

변경 스크립트 참조.

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

당신은 무시하고 당신의 전체 frontendApp을 삭제 한 controller.js 내부 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' 
    ]; 
    }]); 
+0

좋아요,하지만 registration.module.js가 RegistrationCtrl을 어떻게 볼 수 있는지 이해하지 못합니다 ... – user2590727

+0

controller.js 전에 registration.module.js를로드해야합니다. 왜 'frontendApp' 변수가 정의 되는지요? 먼저 다른 자바 스크립트 파일을 사용할 수 있습니다. –

+0

도움이 필요 하신가요? 주문 링크를 변경했는데 오류가 발생했지만 여전히 registration.html을로드하지 않습니다. 왜 그걸 알았 니? Sory가 내 영어 및 각양 지식 : P : – user2590727

1

다시 ARRANG 스크립트

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

할 수 제어 장치???

관련 문제