CODEWITHSUNDEEP
angularjs
Vimal
Vimal

Reputation: 2857

Controller is not executing in AngularJs

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.

Upvotes: 1

Views: 65

Answers (4)

Carlos Verdes
Carlos Verdes

Reputation: 3147

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>

Upvotes: 1

Reena
Reena

Reputation: 1119

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!

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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

Upvotes: 2

JuniorCompressor
JuniorCompressor

Reputation: 20005

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

Upvotes: 4

Related Questions