X
    Categories: Angularjs

Angularjs controller with example.

Hi, In this tutorial I am going to explain how to use ” Controller “ and scope of the controller in angular js.

Controller is javascript Constructor function. That is used to make the anguler scope.

ng-app -> will specify that you are going to use angular js in this page. You can use in either body[ <body ng-app=””> ] or particluar div [ <div ng-app=””> ]

ng-controller is used to create the controller for particular module.

 

 

Controller inside the Controller [ Nested Controller]

We can use nested ng-controllers in angularjs.

HTML Code

<body ng-app="" >
<div ng-controller="FirstController" class="ng-scope ng-binding">
    My name is {{ name }} and I am a {{ type }}
     
    <div ng-controller="SecondController" class="ng-scope ng-binding">
        {{ name }}
 
        <div ng-controller="ThirdController" class="ng-scope ng-binding">
            {{ name }} 
        </div>
    </div>
</div>
</body>

 Angularjs Code

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
function CarController($scope){$scope.name='Marimuthu';$scope.type='Programmer and blogger';}
function BMWController($scope){$scope.name='Tutorial about agularjs controller';}
function BMWMotorcycleController($scope){$scope.name='Here I have explained about nested controllers';}</script>

$scope -> used to bind the value into view.
$scope.name -> name is variable. by using the object $scope we declaring the variable for Controlle and can assign the value.

Call or Invoke the Controller inside the Controller.

By using $injector object we can invoke or call the controller inside the controller.

Below example clearly tells how to call the controller inside the controller.

HTML Code :

<body ng-app="" >
<div ng-controller="FirstController" class="ng-scope ng-binding">     
     {{ name }}
    <button ng-click="clickme()">Click Me</button>  
</div>
</body>

 Angularjs Script

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
function ClickController($scope){
	$scope.clickme=function(){
		$scope.name  = 'This is parent controller "ClickController" calling';
		}
		}
	
function FirstController($scope,$injector){
$injector.invoke(ClickController,this,{$scope:$scope});
$scope.name='My name is Marimuthu and I am a Programmer and blogger';
}</script>

Lets start with Controller use.


Sample program for how to use Controller.

Attributes  used in this program.

1. ng-controller
2. ng-model
3. ng-binding
4. ng-repeat
5. ng-click

HTML Code:

<div ng-controller="ContactController" class="ng-scope">
    <form class="ng-pristine ng-valid">
    <label>Name</label> 
        <input type="text" name="name" ng-model="newcontact.name" class="ng-pristine ng-valid"> <br />
    <label>Email</label> 
        <input type="text" name="email" ng-model="newcontact.email" class="ng-pristine ng-valid"> <br />
    <label>Phone</label> 
        <input type="text" name="phone" ng-model="newcontact.phone" class="ng-pristine ng-valid">
        <br>
        <input type="hidden" ng-model="newcontact.id" class="ng-pristine ng-valid">
     <input type="button" >

 Angular Code :

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var uid = 1; 
 
function ContactController($scope) {     
    $scope.contacts = [
        { id:0, 'name': 'Marimuthu', 
          'email':'marimuthu@17educations.com', 
          'phone': '123-2343-44'
        }
    ];
	     
    $scope.saveContact = function() {
         
        if($scope.newcontact.id == null) {
        //if this is new contact, add it in contacts array
        $scope.newcontact.id = uid++;
        $scope.contacts.push($scope.newcontact);
        } else {
        //for existing contact, find this contact using id
        //and update it.
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == $scope.newcontact.id) {
            $scope.contacts[i] = $scope.newcontact;
            }
        }                
        }
         
        //clear the add contact form
        $scope.newcontact = {};
    }
 
     
    $scope.delete = function(id) {
         
        //search contact with given id and delete it
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                $scope.contacts.splice(i,1);
                $scope.newcontact = {};
            }
        }
         
    }
     
     
    $scope.edit = function(id) {
    //search contact with given id and update it
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                //we use angular.copy() method to create 
                //copy of original object
                $scope.newcontact = angular.copy($scope.contacts[i]);
            }
        }
    }
}
</script>

 

Thanks!. If you like this article don't forget to share and comment.

Marimuthu:

View Comments