Introduction To AngularJS: Controller as Syntax - Day Twenty One

Jeetendra Gund
8y
5.8k
0
1

Article

In day 21 of AngularJS article series, we are going to learn the next key players/concept of AngularJS, and understand the concept of Controller as syntax of AngularJS. Before moving to the key players/concepts of AngularJS, please read my previous articles:

Controller as

AngularJS version 1.2 added a new feature that is nothing but ‘controller as’ syntax. It defines ‘named scope’. You can use this with the help of ng-controller directive. It defines properties on the functions (Controller), not the ‘$scope’.

Example - I created a controller name ‘AuthorCtrl as author’, here ‘author’ is nothing but my ‘named scope’.

code

The following example shows how to use this ‘controller as’ in application:

app.js

/*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
var app = angular.module('mainApp', []);
//Creating controller in general
app.controller('SimpleCtrl', function ($scope) {
$scope.name = 'Jeetendra Gund';
});
//Creating controller 'controller as'
app.controller('AuthorCtrl', function () {
this.authorList = ['Vithal Wadje', 'Pankaj Bajaj', 'Rupesh Kahane', 'Nitin Pandit', 'Jasminder Singh'];
});

The above app.js file we created two controllers, first ‘AuthorCtrl’ for the ‘controller as’ syntax and second ‘SimpleCtrl’ in general we created like.

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
<head>
<title>Welcome to C# Corner</title>
<script src="app/angular.min.js"></script>
<script src="app/mainApp.js"></script>
</head>
<body>
<h2>'Controller as' in AngularJS</h2>
<div ng-controller="SimpleCtrl">
<h2>By - {{name}}</h2>
</div>
<div ng-controller="AuthorCtrl as author">
<h3>Authors</h3>
<ul ng-repeat="auth in author.authorList">
<li>{{auth}}</li>
</ul>
</div>
</body>
</html>

The above html file we used two created controllers, first ‘SimpleCtrl’ used to display name and second ‘AuthorCtrl’ used to list of authors.

Output:

output

Great, Controller as syntax in AngularJS with example was created successfully!

Summary

I hope that beginners as well as students understand the concept of Controller as syntax in AngularJS with example. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all