The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Saturday, 16 July 2016

AngularJS Controllers

with 0 Comment

What is an angularJS controller?


An angularJS controller is defined by javascript constructor function that is used to feed the angular scope. To create an angularjs controller we need ng-controller directive. when a controller is attached to the DOM via the ng-controller directive angularjs will create a new controller object, using the particular  controllers constructor function as  $scope. A controller is nothing but used to control the data of applications.

AngularJS Controller
AngularJS Controller
                                            

AngularJS Controllers


An application which contains a controller object which is controlled by that controller that controller is called angularjs controller. All controllers will accept $scope as a parameter which refers to the module that controller is to control. To understand the above line you need to know the working of angularjs modules and angularjs directives go through once.

AngularJS Controller
AngularJS Controller
       
Use of the controller is to add a behavior for the angularjs $scope object. And set up the initial value of the $scope object.

Where we shouldn’t use angularjs controller :


  1. Format input — Use angularjs form controls instead.
  2. Filter output — Use angularjs filters instead.
  3. Share code or state across controllers — Use angularjs services instead.
  4. Manage the life-cycle of other components (for example, to create service instances).

AngularJS controller Example:

In the below example The application name is firstApp this entire application is controlled by a controller called "myCtrl"  the combination of module and directive will make scope object value available in the view or display.


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="firstApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="Husband Name"><br>
Last Name: <input type="text" ng-model="Wife Name"><br>
<br>
Full Name: {{Husband Name + " " + Wife Name}}

</div>

<script>
var app = angular.module('firstApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Husband Name = "John";
    $scope.Wife Name= "Doe";
});
</script>

</body>
</html>



Explanation for the above angularjs controller example


In the above program "myCtrl" function is a javascript function angularjs will add the controller with a $scope object. First of all $scope is an application object. the parameters husband name and wife name is created by the controller called "myCtrl" . The directive ng-model is used to bind the values of input boxes to the controller arguments (husbandname, wifename).

Angularjs Controllers in External File


Most of the time we use an external file to store javascript code. For a larger application storing the external file is the best way.

To do that just copy the code which is in between <script> and </script>. Then place that in an external file (example myapp.js ) finally include this file in your HTML page look at the below example.

Include the below line to include ng-controller.js file in your application page.

<script src="js/ng-controllers.js"></script>

ng-Controller.js file code

angular.module('directives',[])
    .directive('example', function () {
        return {
            //implementation
        }
    })
    .directive('example1', function () {
            return {
                //implementation
            }
    });


This is how we can create and use angularjs controller if you have any doubts please feel free to ask. Use the comment box below

You Should Also Know:



0 comments:

Post a Comment