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:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15
  16. Introduction To AngularJS – Day 16
  17. Introduction to AngularJS – Day 17
  18. Introduction to AngularJS – Day 18
  19. Introduction to AngularJS – Day 19
  20. Introduction To AngularJS - Day 20

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

  1. /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
  2. var app = angular.module('mainApp', []);
  4. //Creating controller in general
  5. app.controller('SimpleCtrl', function ($scope) {
  6. $scope.name = 'Jeetendra Gund';
  7. });
  9. //Creating controller 'controller as'
  10. app.controller('AuthorCtrl', function () {
  11. this.authorList = ['Vithal Wadje', 'Pankaj Bajaj', 'Rupesh Kahane', 'Nitin Pandit', 'Jasminder Singh'];
  12. });
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
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <script src="app/angular.min.js"></script>
  6. <script src="app/mainApp.js"></script>
  7. </head>
  8. <body>
  9. <h2>'Controller as' in AngularJS</h2>
  10. <div ng-controller="SimpleCtrl">
  11. <h2>By - {{name}}</h2>
  12. </div>
  13. <div ng-controller="AuthorCtrl as author">
  14. <h3>Authors</h3>
  15. <ul ng-repeat="auth in author.authorList">
  16. <li>{{auth}}</li>
  17. </ul>
  18. </div>
  19. </body>
  20. </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!