Controller is not executing in AngularJs

Question

I can't able to find out the issue for the following code. I never written controller in html file. I did this for a testing purpose.

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>

<body ng-controller="sampleController">
<div>
<h2>Adding a sample controller</h2>
    <ul>
        <li ng-repeat="cust in customers">
            {{cust.name}} - {{cust.city}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
    function sampleController($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    }
</script>
</body>
</html>

Thanks in advance.

Don't use global controller's if you are using angular new version above 1.2+ — squiroid
– squiroid, Commented Apr 9, 2015 at 10:40

JuniorCompressor · Accepted Answer · 2015-04-09 10:44:52Z

4

You should create an application and define your controller through that app:

<html ng-app="sampleApp">
...
<script type="text/javascript">
  var sampleApp = angular.module("sampleApp", []);
  sampleApp.controller("sampleController", function($scope) {
     $scope.customers = [
         {name:'Smith', city:'New York'},
         {name:'Alen', city:'Atlanta'},
         {name:'Dan', city:'California'},
         {name:'Thomas', city:'Phoenix'}
     ];
  });
</script>
...

answered Apr 9, 2015 at 10:44

JuniorCompressor

20.1k4 gold badges33 silver badges58 bronze badges

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

Comments

Naeem Shaikh · Accepted Answer · 2015-04-09 10:45:29Z

The support for global controls is removed from angular 1.3, if you are using version till 1.2, it should work, see this working Fiddle

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

  function sampleController($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    }

If you are using angular 1.3, global controller should not work, see this fiddle with angular 1.3

Use following code if you need to use angular version 1.3:

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

  myApp.controller('sampleController',function($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
    })

See this Fiddle

Carlos Verdes · Accepted Answer · 2015-04-09 10:48:52Z

It's better to declare the app and controller declaratively.

The next code works:

<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>

<body ng-controller="SampleController">
<div>
<h2>Adding a sample controller</h2>
    <ul>
        <li ng-repeat="cust in customers">
            {{cust.name}} - {{cust.city}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">

    var app= angular.module('MyApp',[]);
    app.controller('SampleController',  function ($scope) {
        $scope.customers = [
            {name:'Smith', city:'New York'},
            {name:'Alen', city:'Atlanta'},
            {name:'Dan', city:'California'},
            {name:'Thomas', city:'Phoenix'}
        ];
      }
    );
</script>

</body>
</html>

Reena · Accepted Answer · 2015-04-09 10:48:03Z

0

Both the answers posted can be used.

In both usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).

The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.

The former also does not name the function in the global scope, which is generally a good thing!

answered Apr 9, 2015 at 10:48

Reena

1,1199 silver badges17 bronze badges

Collectives™ on Stack Overflow

Controller is not executing in AngularJs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related