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. [https://docs.angularjs.org/guide/controller] — katmanco, Mar 18 '15 at 13:22
duplicate of http://stackoverflow.com/questions/28727919/angularjs-uncaught-error-injectormodulerr/28728380#28728380 — Pankaj Parkar, Mar 18 '15 at 13:23

score 4 · Accepted Answer · answered Mar 18 '15 at 13:23

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

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. http://jsfiddle.net/9809ypgx/ — deitch, Mar 18 '15 at 22:02

score 2 · Answer 2 · answered Mar 18 '15 at 13:24

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 '15 at 13:24

valverde93

1,698
1
11
17

score 2 · Answer 3 · answered Mar 18 '15 at 13:24

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) { ...

A simple AngularJS script is not working

3 Answers3