Angularjs Quick Start Guide 05: Controllers

The ANGULARJS controller is used to control the data of the ANGULARJS applications .

The ANGULARJS controller is an ordinary JavaScript object .

ANGULARJS Controller

The AngularJS applications is controlled by the controller.

　　The ng-controller directive defines a application controller.

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

<DivNg-app= "MYAPP"Ng-controller= "Myctrl">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{firstName + "" + LastName}}</Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope) {$scope. FirstName= "John"; $scope. LastName= "Doe";});</Script>

Run

Code Explanation:

AngularJS application is defined by ng-app= "MyApp" . The effective scope of the application is in the <div> where Ng-app is located.

　　the ng-controller= "Myctrl" property is a ANGULARJS directive that defines a controller.

　　The Myctrl function is a normal JavaScript function.

Angularjs uses $scope object to invoke the controller.

In Angularjs, the $scope is a Application object (that is, the application variable and the owner of the function).

The controller consists of two attributes (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 properties of the controller (FirstName and LastName).

Methods of the Controller

The example above shows that the Controller object contains two properties: LastName and FirstName.

A controller can also include a method (assigning a function to a variable):

<DivNg-app= "MYAPP"Ng-controller= "Personctrl">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{fullName ()}}</Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Personctrl', function($scope) {$scope. FirstName= "John"; $scope. LastName= "Doe"; $scope. FullName= function() {        return$scope. FirstName+ " " +$scope. LastName; }});</Script>

Run

Placing the controller in an external file

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

Copy the code from the <script> tag to the personcontroller.js external file:

<DivNg-app= "MYAPP"Ng-controller= "Personctrl">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{firstName + "" + LastName}}</Div><Scriptsrc= "Personcontroller.js"></Script>

Run

Another example

Create a new controller file and name it namescontroller.js:

function ($scope) {    = [        {name:' Jani ', Country: ' Norway '},        {name:' Hege ', Country: ' Sweden '},        {name:' Kai ', Country: ' Denmark '}    ];});

Then use this controller file in application:

<DivNg-app= "MYAPP"Ng-controller= "Namesctrl"><ul>  <Ling-repeat= "x in Names">{{x.name + ', ' + X.country}}</Li></ul></Div><Scriptsrc= "Namescontroller.js"></Script>

Run

Previous chapter-Angularjs Quick Start Guide 04: Instructions Next Chapter-Angularjs Quick Start Guide 06: Filters

Angularjs Quick Start Guide 05: Controllers