1. Home
  2. AngularJS Controllers

The best AngularJS Controllers Tutorial In 2024, In this tutorial you can learn AngularJS Controllers,AngularJS examples,Controller method,AngularJS examples,External file controller,AngularJS examples,Other examples,AngularJS examples,

AngularJS Controllers

AngularJS AngularJS data controller applications.

AngularJS controller is normal JavaScript object.

AngularJS Controllers

AngularJS application is controller.

ng-controller directive defines the application controller.

The controller is a JavaScript object created by the constructor of the standard JavaScript objects.

AngularJS examples

<Div ng-app = "myApp " ng-controller = "myCtrl">

Name: <input type = "text" ng-model = "firstName"> <br>
Surname: <input type = "text" ng-model = "lastName"> <br>
<Br>
Name: {{firstName + "" + lastName}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>

Application Analysis:

AngularJS applications defined by the ng-app. Applications running in <div> inside.

ng-controller = "myCtrl"? property is a AngularJS instruction. It is used to define a controller.

myCtrl function is a JavaScript function.

AngularJS using $ scope object to call the controller.

In the AngularJS, $ scope is an application like (variables and functions belonging to the application).

Controller $ scope (equivalent to the scope, the control range) to save AngularJS Model (Model) objects.

Controller scope created two properties (firstName and lastName).

ng-model directive bind input fields to the attribute controller (firstName and lastName).

Controller method

The example above illustrates a controller object and firstName lastName property with the two.

The controller may also have methods (functions and variables):

AngularJS examples

<Div ng-app = "myApp " ng-controller = "personCtrl">

Name: <input type = "text" ng-model = "firstName"> <br>
Surname: <input type = "text" ng-model = "lastName"> <br>
<Br>
Name: {{fullName ()}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
$ Scope.fullName = function () {
return $ scope.firstName + "" + $ scope.lastName;
}
});
</ Script>

External file controller

In large applications, the controller is usually stored in an external file.

Simply put <script> tag Copy the code named personController.js external file can be:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "personCtrl">

First Name: <input type = " text" ng-model = "firstName"> <br>
Last Name: <input type = " text" ng-model = "lastName"> <br>
<Br>
Full Name: {{firstName + " " + lastName}}

</ Div>

<Script src = "personController.js"> </ script>

Other examples

The following example creates a new controller file:

angular.module ( 'myApp', []). controller ( 'namesCtrl', function ($ scope) {
$ Scope.names = [
{Name: 'Jani', country: 'Norway'},
{Name: 'Hege', country: 'Sweden'},
{Name: 'Kai', country: 'Denmark'}
];
});

Save the file as namesController.js :

Then, using the controller in the application file:

AngularJS examples

<Div ng-app = "myApp " ng-controller = "namesCtrl">

<Ul>
<Li ng-repeat = "x in names">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

</ Div>

<Script src = "namesController.js"> </ script>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

AngularJS Controllers
10/30