NetBeans nie widzi zmiennej globalnej angular.

0

Witam. Postanowiłem trochę poznać angulara, ale mam pewien problem. Mianowicie stworzyłem sobie prostą javową web aplikację w Netbeans i chciałem podpiąć angulara. Mam następujący widok:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div ng-app="app">
            <div ng-controller="app.AplicationCtrl">
                {{say}}
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
        <script src="js/AngularController.js"></script>
    </body>
</html>

i kontroler do tego:

var app = angular.module('app', []);
app.controller('ApplicationCtrl', function ($scope) {
    $scope.say = "Hello";
});

Niestety powyższy kod nie działa. Środowisko podkreśla mi zmienną angular:

angular.module('app', []); 

i wyświetla komunikat

the global variable "angular" is not declared
Oczywiście po uruchomieniu aplikacji nic nie działa, tylko na stronie wyświetla się napis: {{say}}
Spotkał się ktoś z takim problemem? Jak temu zaradzić? We wszystkich tutorialach jakie przejrzałem takie podejście powinno działać, ale może coś przeoczyłem.

0

Zadeklaruj controller w poniższy sposób

<div data-ng-controller="AplicationCtrl">

Jeżeli używasz html5 powinieneś dodawać data-ng-...

0

@davyd ok, ale problem jest już w pliku javascript:

Mam taki plik AngularController.js i w nim:

var app = angular.module('app', []);
app.controller('ApplicationCtrl', function ($scope) {
    $scope.say = "Hello";
});

i już tutaj podkreśla mi zmienną angular z komunikatem:

the global variable "angular" is not declared

1

zrób oddzielny plik js z


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

a oddzielny z ctrl


app.controller('ApplicationCtrl', function ($scope) {
    $scope.say = "Hello";
});
0

Jeżeli tylko Angulara chcesz poćwiczyc na poziomie podstawowym to wystarczy Ci notepad++.

0

Wziąłem przerzuciłem to do eclipse i nadal nie działa nie wiem czemu. Mam tak jak doradziłeś:
Strone home:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="<c:url value="/resources/js/general.js" />"></script>
<script src="<c:url value="/resources/js/AngularController.js" />"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="app.AplicationCtrl">{{say}}</div>
    </div>
</body>
</html> 

i dwa pliki js:

general.js

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

i AngularController.js

app.controller('ApplicationCtrl', function($scope) {
    $scope.say = "Hello";
}); 

i niestety nie działa

Jednak jeśli wrzucę sobie na stronę html coś takiego:

<body>
    <div ng-app=""> 
        {{ 22 / 11 }}
    </div>
</body> 

to jest ok, angular działa. Problem jest z tymi zewnętrznymi plikami javascript. Skrypty powinno widzieć bo main.css widzi. Struktura wygląda tak jak w załączniku.

1

Test.zip - zrobiłem od poczatku projekt Maven ktory działa mozesz dalej go rozwijac. Uruchamiany na Tomcat7 w Eclipse.

0

Wielkie dzięki za pomoc i poświęcony czas. W ogóle coś namieszałem. Teraz udało mi się naprawić problem i w Eclipsie i w NetBeansie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0