Post
Ask Question

Scope-less Controller In AngularJS

We can communicate with HTML DOM using $scope variable in AngularJS, but it’s not hard and fast rule to use scope to communicate with View, we can also create controller without using $scope and use all the properties and behavior in view (HTML).

Why scope-less controller

Sometimes controller become complex by using $scope for providing data and behavior to view, in that situation we can use scopeless controller.

But if you have designed your AngularJS application perfectly, there is no need to go for scopeless controllers.

Creating scope-less controller

  1. angular module(app.js):  
  2. angular.module('myApp', []);   
Controller (homeController.js)
  1. var app = angular.module("myApp");  
  2.   
  3. app.controller("myController", function ()  
  4. {  
  5.   
  6.     this.title = 'scopeless Controller Test';  
  7.     this.name = 'Anupam';  
  8.     this.sayHello = function ()  
  9.     {  
  10.         alert('Hello ' + this.name);  
  11.     }  
  12.   
  13. });  
As you can see I have used javaScrip this keyword to add data and behavior in my controller.

I would love to explain this here but I am still in a way to explore what is this in JavaScript.

Here is how we can get data from controller to view.

Binding Data to View using scope-less controller

View (index.html)
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp" ng-controller="myController as ctrl">  
  3.   
  4. <head>  
  5.     <script src="Scripts/angular.min.js"></script>  
  6.     <script src="app/app.js"></script>  
  7.     <script src="app/homeController.js"></script>  
  8.     <link href="Css/bootstrap.min.css" rel="stylesheet" />  
  9.     <title>{{ctrl.title}}</title>  
  10. </head>  
  11.   
  12. <body>  
  13.     <nav role="navigation" class=" navbar navbar-default">  
  14.         <div class="navbar-header">  
  15.             <a href="#" class="navbar-brand">  
  16. {{ctrl.title}}  
  17. </a>  
  18.         </div>  
  19.   
  20.     </nav>  
  21.     <div class="container body-content">  
  22.         <div class="col md-6">  
  23.             <div class="row">  
  24.                 <div class="well-lg">  
  25.                     Hi {{ctrl.name}}  
  26.                 </div>  
  27.             </div>  
  28.             <div class="row">  
  29.                 <div class="well-lg">  
  30.                     <input type="button" ng-click="ctrl.sayHello()" value="Say Hello" class="btn" />  
  31.                 </div>  
  32.             </div>  
  33.         </div>  
  34.     </div>  
  35. </body>  
  36.   
  37. </html>  
Here I have used a variable ctrl (myController as ctrl) which is an instance of myController.

Note: We have to create a variable using as keyword, since we can’t access controller using its name. For example: we can’t access name property using myController.name in view.

Summary

In this article we learned how we can communicate between view and controller without using $scope variable. I have also attached sample code if you wish to download. Hope you enjoyed this.


Similar Articles