Angularjs data-ng-controller

Question

This is a simple inline controller which isn't working. I am unable to find the bug. I have tested this with ng-init and printed out with ng-repeat, works fine. With ng-controller, it doesn't.

<html data-ng-app>
<head>
    <title></title>
</head>
<body data-ng-controller="SimpleController">
Name: 
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>

angular version should be less tha 1.2 for global controllers :-) — squiroid
– squiroid, Commented Mar 5, 2015 at 10:32
Oh...no I am using 1.3.x stable. Any alternative to make this code work with 1.3? — abhidoeslinux
– abhidoeslinux, Commented Mar 5, 2015 at 10:36
Yes you have to define your app name and register it using myApp.controller("SimpleController", SimpleController) after you've defined that function. — Omri Aharon
– Omri Aharon, Commented Mar 5, 2015 at 10:36
@OmriAharon: you need to define myApp to specify the controller method for it. — V31
– V31, Commented Mar 5, 2015 at 10:37

V31 · Accepted Answer · 2015-03-05 10:35:21Z

1

You need to have the app initiated in javascript using

angular.module

for the app name you specifying in data-ng-app

Working Fiddle

Javascript Code:

angular.module("myApp", [])
    .controller('SimpleController', function ($scope) {
    $scope.customers = [{
        name: 'John Doe',
        city: 'New York'
    }, {
        name: 'Jane Doe',
        city: 'Melbourne'
    }, {
        name: 'Jack Daniels',
        city: 'Atlanta'
    }];
});

answered Mar 5, 2015 at 10:35

V31

7,6643 gold badges28 silver badges44 bronze badges

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

4 Comments

V31 Over a year ago

it is when specifying it in html as angular will try to find the app in script and will error out.

V31 Over a year ago

coz you not specified the app name, however the OP has mentioned the app name in ng-app

Omri Aharon Over a year ago

<html data-ng-app> There is no app name specified.

V31 Over a year ago

aah the OP was using 1.2 the answer is for 1.3 gud observation @OmriAharon

Omri Aharon · Accepted Answer · 2015-03-05 10:45:21Z

1

Lots of chatter in the comments so I'll sum this in an answer.

As @squiroid correctly stated, the use of global controllers (meaning define a function and then just reference it) has been removed in recent Angular versions and in 1.3 specifically.

You have to define your module and register your controller to it, so in overall you need:

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

function SimpleController($scope){
    $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}

myApp.controller("SimpleController", SimpleController); //This is a must now

And in your view you need to refer to your module:

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

answered Mar 5, 2015 at 10:45

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Comments

mohamedrias · Accepted Answer · 2015-03-05 10:48:39Z

1

Your code works fine in angular 1.2 version.

but in case if you are using angular 1.3+ it will not.

With angular 1.3 you can no longer use global controller declaration on the global scope. You would need to define the controller using inline declaration.

In your HTML:

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

In js:

    angular.module('app', []).controller('SimpleController', function($scope){
        $scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
    });

or with your existing controller:

     angular.module('app', []).controller('SimpleController', SimpleController)

answered Mar 5, 2015 at 10:48

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Comments

sundayoyeniyi · Accepted Answer · 2015-03-05 10:46:01Z

V31,

You definitely need to bootstrap your module since you are using 1.3 because using controller as a global function like you've done has been deprecated in 1.3.

See a complete working example below. Try it out and see if it helps you.

<html data-ng-app="customersApp">
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
    <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
    var app = angular.module('customersApp', [])
    app.controller('SimpleController', ['$scope', function ($scope) {
        $scope.customers = [
    { name: 'John Doe', city: 'New York' },
    { name: 'Jane Doe', city: 'Melbourne' },
    { name: 'Jack Daniels', city: 'Atlanta' }
        ];
    }]);
  </script>
</body>
</html>

SO1

squiroid · Accepted Answer · 2015-03-05 10:46:35Z

For best practice in angular use module (I am not considering Angular 2.0 where module is dead):-

And for controllers use "controller as " and bind data on controller not on $scope.

<body data-ng-app="myApp" data-ng-controller="SimpleController as ctrl">Name:
    <br />
    <input type="text" data-ng-model="ctrl.name">
    <ul>
        <li ng-repeat="cust in ctrl.customers | filter:ctrl.name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
    </ul>
</body>

Ctrl:-

angular.module("myApp", [])
    .controller('SimpleController', function () {
    this.customers = [{
        name: 'John Doe',
        city: 'New York'
    }, {
        name: 'Jane Doe',
        city: 'Melbourne'
    }, {
        name: 'Jack Daniels',
        city: 'Atlanta'
    }];
});

Fiddle

Jorge Casariego · Accepted Answer · 2015-03-05 10:52:55Z

I did 2 examples using Angular 1.2.26 and 1.3.12

Example using 1.3.12

<!DOCTYPE html>
<html ng-app="test">
<head>
    <!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>

<body  ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        var app = angular.module('test', []);

        app.controller('SimpleController', function($scope){
             $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        });

    </script>
</body>
</html>

The main changes here were the use of module and controller inside script

Example using version 1.2.26

<!DOCTYPE html>
<html>
<head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app="" data-ng-controller="SimpleController">
    Name: 
    <br />
    <input type="text" data-ng-model="name">
    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
    </ul>

    <script>
        function SimpleController($scope){
            $scope.customers=[{name:'John Doe', city:'New York'},
                              {name:'Jane Doe', city:'Melbourne'},
                              {name:'Jack Daniels',city:'Atlanta'}];
        }
    </script>
</body>
</html>

here the only change I did was add ng-app="" in body

Collectives™ on Stack Overflow

Angularjs data-ng-controller

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related