Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to use controller in angularjs
Ask Question
Anonymous User
Anonymous User

Content Writer

I am a content writter !

Message

1 Answers

Anonymous User
Anonymous User 27 Nov 2020
Report Abuse

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

Anonymous User


 
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md