0

I hope you may help me. I'm quite new with Angular so I'm maybe making some stupid error but, when a give a value to ng-app, it doesn't work AngularJs. I make here an example: This is my home.html that doesn't work (when I say "doesn't work" I mean that I see printed "{{name}}" instead of its value).

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
        method: 'POST',
        url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
        data: {"nome":$scope.name}
    }
    var app=angular.module('noteApp', [])
    app.controller('noteCtrl', function ($scope, $http){
        $scope.addNote = function () {
            $http(req).success(function(data, status, headers, config) {
                $scope.nome = data;
            }).error(function(data, status, headers, config) {

            });
        }
    })
</script>
</head>
<body ng-app="noteApp">
    <div ng-controller="noteCtrl">
        <form>
            <div>
            Insert your name: <input type="text" name="name" data-ng-model="name"><br>
            </div>
        </form>
        <p>Hola {{name}}</p>
    </div>
</body>
</html>

but if I change it like this

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
        method: 'POST',
        url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
        data: {"nome":$scope.name}
    }
    var app=angular.module('noteApp', [])
    app.controller('noteCtrl', function ($scope, $http){
        $scope.addNote = function () {
            $http(req).success(function(data, status, headers, config) {
                $scope.nome = data;
            }).error(function(data, status, headers, config) {

            });
        }
    })
</script>
</head>
<body ng-app>
    <div>
        <form>
            <div>
            Insert your name: <input type="text" name="name" data-ng-model="name"><br>
            </div>
        </form>
        <p>Hola {{name}}</p>
    </div>
</body>
</html>

it goes perfectly as it should. Any suggestion?

3 Answers3

0

You are setting the req variable using $scope.name but at that point scope is not defined. If you open the console you will see an error about. Try this:

http://plnkr.co/edit/LqZNX8BYnCnbUD29YRfi?p=preview

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
        method: 'POST',
        url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
    }
    var app=angular.module('noteApp', [])
    app.controller('noteCtrl', function ($scope, $http){
        $scope.addNote = function () {
            req.data={"nome":$scope.name}; 
            $http(req).success(function(data, status, headers, config) {
                $scope.name = data;
            }).error(function(data, status, headers, config) {

            });
        }
    })
</script>
</head>
<body ng-app="noteApp">
    <div ng-controller="noteCtrl">
        <form>
            <div>
            Insert your name: <input type="text" name="name" data-ng-model="name"><br>
            </div>
        </form>
        <p>Hola {{name}}</p>
    </div>
</body>
</html>

the wrong variable name ("nome" instead of "name") is unrelated to your issue but it still need to be corrected

valepu
  • 3,136
  • 7
  • 36
  • 67
  • Here it goes! Thank you soooo much! –  Feb 09 '16 at 09:49
  • You are welcome. remember to accept the answer if it helped you – valepu Feb 09 '16 at 09:50
  • Oh no, wait... It was a fake, sorry. I just retry on my browser and it doesn't go –  Feb 09 '16 at 10:04
  • This solves your error: http://plnkr.co/edit/LqZNX8BYnCnbUD29YRfi?p=preview you might have other problems in your code but that might need another question – valepu Feb 09 '16 at 10:07
  • This one seems to work, but if I write the script in an external js file, it doesn't work anymore –  Feb 09 '16 at 10:36
  • You should look on the internet how to use your browser's javascript console. This way you will be able to see the errors in your javascript code. – valepu Feb 09 '16 at 10:41
0

In your view you are using {{ name }} but inside of your controller you are putting the data inside of $scope.nome.

Just change $scope.nome > $scope.name

Peter
  • 1,240
  • 2
  • 13
  • 22
0

You are missing a " ; " after "var app=angular.module('noteApp', [])" so noteApp is not getting initialized.

0309gunner
  • 31
  • 6