I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src=".3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
Share Improve this question asked Mar 25, 2015 at 20:18 prdtutyprdtuty 5323 gold badges9 silver badges22 bronze badges 1- 1 ng-app="demoController" when angular.module('sampleController',[]); ? – GillesC Commented Mar 25, 2015 at 20:30
2 Answers
Reset to default 5You need to define your module in the right way
var app = angular.module('app',[]);
Then, use it in your HTML file
<html ng-app="app">
See it working on jsbin
Note that, the angular module's name is the one defined within the quotes
angular.module('app',[]);So, if you wrote
var xModule = angular.module('app2',[]);your module name isapp2notxModule
Here is the code I am using :
<meta name="robots" content="noindex">
<html data-ng-app="app">
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div data-ng-controller="sampleController">
<ul><li data-ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li></ul>
</div>
<script id="jsbin-javascript">var app = angular.module('app',[]);
app.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
</script>
</body></html>
And the output is :
Applying filters
{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}
Let me know what is missing here.