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
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>
try it"
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
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>
try it"
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
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>
try it"
Other examples
The following example creates a new controller file:
$ 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
<Ul>
<Li ng-repeat = "x in names">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>
</ Div>
<Script src = "namesController.js"> </ script>
try it"