AngularJS Controllers,Use of controller

AngularJS Controllers,Use of controller

AngularJS Controllers,Use of controller,AngularJS application work on controllers to control the flow of data in the application. A controllers is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. The AngularJs work on MVC structure. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

   <div ng-app="" ng-controller="userController">
    ...
    </div>

Here we’ve declared a controller userController using ng-controller directive. As a next step we’ll define the userController as follows

	<script>
    var mainApp = angular.module("mainApp", []);
    
    mainApp.controller('userController', function($scope) {
       $scope.user = {
          name: "pramod",
          email: "kumawat@gmail.com",
          mydetaial: function() {
             var userObject;
             userObject = $scope.user;
             return userObject.name + " " + userObject.email;
          }
       };
    });
    </script>

1- userController defined as a JavaScript object with $scope as argument.

2- $scope refers to application which is to use the userController object.

3- $scope.student is property of userController object.

4- firstName and lastName are two properties of $scope.user object. We’ve passed the default values to them.

5- fullName is the function of $scope.user object whose task is to return the combined name.

6- In fullName function we’re getting the user object and then return the combined name.

6- As a note, we can also defined the controller object in seperate JS file and refer that file in the html page.

Now we can use userController’s student property using ng-model or using expressions as follows.

    Enter  name: <input type="text" ng-model="user.name"><br>
    Enter  email: <input type="text" ng-model="user.email"><br>
<br>
You are entering: {{user.mydetaial()}}

Example of AngularJS Controllers

    <html>
    <head>
    <title>Angular JS Controller Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
    <body>
    <h2>Angular JS Controller Example</h2>
    <div ng-app="mainApp" ng-controller="userController">
    
    Enter first name: <input type="text" ng-model="user.name"><br><br>
    Enter last name: <input type="text" ng-model="user.email"><br>
    <br>
    You are entering: {{user.mydetaial()}}
    </div>
    <script>
    var mainApp = angular.module("mainApp", []);
    
    mainApp.controller('userController', function($scope) {
       $scope.user = {
          name: "pramod",
          email: "kumawat@gmail.com",
          mydetaial: function() {
             var userObject;
             userObject = $scope.user;
             return userObject.name + " " + userObject.email;
          }
       };
    });
    </script>
    </body>
    </html>
angularjscontroller

angularjscontroller

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates