Menu
Was going through a basic training of AngularJS however get stuck in the first place, with expressions are not evaluating with ng-controller dependency.
index.html
<html ng-app="store">
<head>
<title>Angular JS</title>
<link rel="Stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>{{"Hello"}}</h1>
<div ng-controller="StoreController as stores">
<h1> {{stores.products.name}} </h1>
<h2> {{stores.products.price}} </h2>
<p> {{stores.products.description}} </p>
</div>
</body>
</html>
app.js
(function () {
var app = angular.module("store", []);
app.controller = ('StoreController', function () {
this.products = gem;
});
var gem =
{
name:'New Product',
price:'2.95',
description: 'This is something you would need to buy!!'
}
})();
HTML Output
Hello
{{stores.products.name}}
{{stores.products.price}}
{{stores.products.description}}
Please help me what mistake I have done.
227
You have an = sign in your controller that is incorrect.
(function () {
var app = angular.module("store", []);
////NOT app.controller = ('StoreController'.....
app.controller('StoreController', function () {
this.products = gem;
});
var gem =
{
name:'New Product',
price:'2.95',
description: 'This is something you would need to buy!!'
}
})();
It is more typical and I would say best practice to set any data on $scope. Then you don't have to use the alias for your controller and reference products simply. You would have to inject $scope into your controller. The code would look like:
index.html
<html ng-app="store">
<head>
<title>Angular JS</title>
<link rel="Stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>{{"Hello"}}</h1>
<div ng-controller="StoreController">
<h1> {{products.name}} </h1>
<h2> {{products.price}} </h2>
<p> {{products.description}} </p>
</div>
</body>
</html>
app.js
(function () {
var app = angular.module("store", []);
app.controller('StoreController', ['$scope', function($scope) {
$scope.products = gem;
}]);
var gem =
{
name:'New Product',
price:'2.95',
description: 'This is something you would need to buy!!'
}
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
