forum

home / developersection / forums / how to use controller in angularjs

Ask Question

How to use Controller in AngularJS

Anonymous User 592 26-Nov-2020

i am started working on angular js  no i am trying to use Controller in AngularJS how to do it Please help me.

angular js angular js 
Updated on 26-Nov-2020
Anonymous User

Content Writer

I am a content writter !

Follow Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

27-Nov-2020

Hi ,

Here we will explain  how to use controller in AngularJS.

AngularJS controller to control the flow of data in the application. AngularJS controller is defined with ng-controller directive. AngularJS controller is a JavaScript object containing attributes/properties and functions. AngularJS controller accepts $scope as a parameter which refers to the application/module that controller is to control.

Now I am going to declared a controller MyController using ng-controller directive. See Below –

MyController

<script>

    var mainApp = angular.module("MyApp", []);
 
    mainApp.controller('MyController', function ($scope) {
 
        $scope.User = {
 
            Name: "Aditya Kumar Patel",
 
            Age: "24"  };

    });
 
</script>

Above Code MyController defined as a JavaScript object with $scope as argument. $scope refers to application which is to use the MyController object. $scope.User is property of MyController object. Name and Age are two properties of $scope.User object. We've defined the default values Name=”Aditya Kumar Patel” and Age=”24”

Now I am going to use controller in our HTML page . show below- 

Simple Example

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<h2>AngularJS Application</h2>
<div ng-app="MyApp" ng-controller="MyController">
    Enter Name: <input type="text" ng-model="User.Name"><br><br>
    Enter Age: <input type="text" ng-model="User.Age"><br><br> 

    Name : {{User.Name}} 
    Age : {{User.Age}}

</div>

<script>
    var mainApp = angular.module("MyApp", []); 
    mainApp.controller('MyController', function ($scope) { 
        $scope.User = { 
            Name: "Aditya Kumar Patel", 
            Age: "24"  
};

});
</script>

Now we run application and see Output

How to use Controller in AngularJS


 
advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy