AngularJS data-ng-controller doesn't work

Question

I could not figure out why the following code doesn't work at all. Frankly, It looks alright to me. Is there any idea?

<!DOCTYPE html>
<html data-ng-app="">
    <head>
        <title>Using AngularJS to create a simple Controller</title>
    </head>
    <body>
        <div data-ng-controller="simpleController">
            <ul>
                <li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
            </ul>
        </div>
        
        <script
                type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">
        </script>
        <script>
            function simpleController($scope) {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            }
        </script>
    </body>
</html>

Michael Coleman · Accepted Answer · 2014-11-30 08:57:48Z

8

It is to do with the version of angular you are using.

Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did. Then this ability was removed from angular. There are still alot of tutorials around that reference this older style however.

See this demo - http://jsbin.com/fowamutoli/1/edit

I have replaced with angular legacy and your code runs.

So in the future you need to declare an angular module and register your controller against it. i.e.

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


 <script>

        var app = angular.module('app', []).  
            controller('simpleController', function ($scope) {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            });
  </script>

edited Nov 30, 2014 at 8:57

answered Nov 30, 2014 at 8:44

Michael Coleman

3,4183 gold badges21 silver badges19 bronze badges

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

2 Comments

Michael Coleman Over a year ago

Was this answer useful to you? - if it helped, you can accept it - that way others will be able to learn from your question

newbie Over a year ago

Hi Michael, it's exactly the version issue. Many thanks for your help

Shayan Ahmad · Accepted Answer · 2014-11-30 08:38:04Z

3

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

try replacing your data-ng-app to ng-app="myApp", see if it works. :) with the following snippet.

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

myApp.controller('simpleController', ['$scope', function($scope) {
  $scope.customers = [
                { Name: "Dave Jones",  City: "Phoenix" }
                , { Name: "Jamie Riley", City: "Atlanta" }
                , { Name: "Heedy Walhin", City: "Chandler" }
                , { Name: "Thomas Winter", City: "Seattle" }
            ];
}]);

answered Nov 30, 2014 at 8:38

Shayan Ahmad

1,18311 silver badges17 bronze badges

Comments

Ivan Sivak · Accepted Answer · 2014-11-30 08:49:58Z

Try this instead:

<!DOCTYPE html>
<html ng-app="MyApp">
    <head>
        <title>Using AngularJS to create a simple Controller</title>
    </head>
    <body>
        <div ng-controller="simpleController">
            <ul>
                <li ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
            </ul>
        </div>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
        <script>
            var myApp = angular.module( "MyApp", [] );
            myApp.controller("simpleController", function( $scope )
            {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            });
        </script>
    </body>
</html>

http://jsfiddle.net/rv7r7nv7/

Collectives™ on Stack Overflow

AngularJS data-ng-controller doesn't work

3 Answers 3

It is to do with the version of angular you are using.

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

It is to do with the version of angular you are using.

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related