I was working with AngularJS from couple months. I came across some new features in AngularJS 1.2. I am going blog about this new features. AngularJS 1.2 introduces new “controller as” syntax. This syntax helps us to abstracts the use of $scope in controllers, simplifying the syntax of controllers, html markup.
Let’s have a look at the products controller, it has one private attribute called name.
var demoApp = angular.module("demoApp",[]);
demoApp.controller('ProductsController', function () {
this.name = "MacBook Pro 15-inch with Retina display";
});
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS Controller As</title>
</head>
<body>
<div ng-controller="ProductsController as product">
<h1>{{product.name}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js">
</script>
<script src="product.js"></script>
</body>
</html>
If we observe, I did not inject a $scope in controller. In html we are using new as syntax, for accessing name attribute in html ( {{product.name}} ). This new as syntax expose the private attributes and methods on our controller with out using $scope object.
Let’s have a look at one more example, we are adding one more controller in same application. That is accessories controller which a private array named accessories.
demoApp.controller('AccessoriesController', function () {
this.accessories = [
{
name:'Apple Thunderbolt to Gigabit Ethernet Adapter',
price:'29'
},
{
name:'Mini DisplayPort to VGA Adapter',
price:'29'
},
{
name:'Mini DisplayPort to Dual-Link DVI Adapter',
price:'99'
}
];
});
Modify the above html to display the accessories of a product.
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS Controller As</title>
</head>
<body>
<div ng-controller="ProductsController as product">
<h1>{{product.name}}</h1>
<h2>Accessories:</h2>
<div ng-controller="AccessoriesController as items">
<ul>
<li ng-repeat="accessory in items.accessories">
{{accessory.name}} - ${{accessory.price}}
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="product.js"></script>
<script src="accessories.js"></script>
</body>
</html>
If observe here also output is same, we are able to access the private array in accessories controller, but if we look at html accessories controller is nested inside the product controller. With as syntax it’s lot easier to keep track of what controller you are using in your template.
This we will really helps CoffeeScript, TypeScript developers where the code compile into JavaScript. We can still inject the $scope and use it normally.