Home  >  Article  >  Web Front-end  >  AngularJS Basic Study Notes Controller_AngularJS

AngularJS Basic Study Notes Controller_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:59:531052browse

AngularJS controller is used to control the data of AngularJS applications.

AngularJS controllers are ordinary JavaScript objects.

AngularJS Controller
AngularJS applications are controlled through controllers.

The ng-controller directive defines an application controller.

A controller is a JavaScript object that can be created through standard JavaScript object constructors.

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

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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

Code explanation:

AngularJS application is defined by ng-app="myApp". The effective scope of the application is in the dc6dce4a544fdca2df29d5ac0ea9906b where ng-app is located.

 ng-controller="myCtrl" attribute is an AngularJS directive, which defines a controller.

The myCtrl function is an ordinary JavaScript function.

AngularJS uses the $scope object to call controllers.

In AngularJS, $scope is an application object (that is, the owner of application variables and functions).

The controller contains two properties (or variables): firstName and lastName. They are attached to the $scope object.

The ng-model directive binds the value of the input tag to the controller's properties (firstName and lastName).

Controller methods
The above example shows that the controller object contains two properties: lastName and firstName.

Controllers can also contain methods (assign functions to variables):

<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: {{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>

Put the controller in an external file
In large applications, controller code is often written in external files.

Copy the code in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag to the personController.js external file:

<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>

Another example
​Create a new controller file and name it namesController.js:

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

Then use this controller file in the application:

<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>

The above is the entire content of this article, I hope you all like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn