A simple AngularJS script is not working

Question

I am following the tutorial : AngularJS in 60 min and I am failed to get working a simple script where the controller is declared on the same page as the view (Indeed it is very basic). But actually it is not working properly:

So my code is :

<!DOCTYPE html>
<html data-ng-app="">
<head>
    <title>AngularJS in 60 minutes</title>
    <script src="./js/angular.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" data-ng-controller="SimpleController">
    <h3>Instance of model and data binding</h3>
    Name : <input type="text" data-ng-model="city"> {{ city }}

    <h3>Instance of repeat directives</h3>
    <ul>
    <ol data-ng-repeat="person in people | filter:city | orderBy:'city'">{{ person.firstname}} {{ person.name | uppercase}} : {{ person.city}}</ol>
    </ul>
</div>
    <script>
        function SimpleController($scope) {
            $scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];

        }
    </script>
</body>

and the result is in the image enclosed.

enter image description here

Any suggestions is welcome.

Fred

hello fred if you use angular version greater than 1.2 you will fail , take a look at the link it is very beneficial. [docs.angularjs.org/guide/controller] — furkankatman
– furkankatman, Commented Mar 18, 2015 at 13:22

deitch · Accepted Answer · 2015-03-18 13:23:39Z

4

I suspect you are using Angular 1.3 or higher. As of 1.3, Angular no longer looks for controllers on window. Here is the migration link:

https://docs.angularjs.org/guide/migration

Instead, you should use the app.controller() syntax:

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

myApp.controller('SimpleController',function($scope) {
    $scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];
});

And change your html:

<html data-ng-app="myApp">

answered Mar 18, 2015 at 13:23

deitch

14.8k15 gold badges75 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deitch Over a year ago

Nah, it happens. Takes far too long to get up the Angular learning curve. FYI, I have a jsfiddle all set up with Angular I use for any of these issues. jsfiddle.net/9809ypgx

valverde93 · Accepted Answer · 2015-03-18 13:24:43Z

2

In your script you must define angular module and then controller:

angular.module('myApp', []).controller('SimpleController', ['$scope', function($scope) {
    // to do something....
}])

and in your HTML:

<html data-ng-app="myApp">
    ....
</html>

answered Mar 18, 2015 at 13:24

valverde93

1,6981 gold badge11 silver badges17 bronze badges

Comments

Michał Dudak · Accepted Answer · 2015-03-18 13:24:55Z

2

Since 1.3 you can't define your controller as a global function. You have to register in on a module. For this, you'll have to have a named module (data-ng-app='app'). Then, you'll be able to write

angular.module('app', []).controller("SimpleController", function($scope) { ...

answered Mar 18, 2015 at 13:24

Michał Dudak

5,0682 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

A simple AngularJS script is not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related