Angular js – Part two

As everyone is aware that Angular is an MVC/MVVM framework. We can get data from a model and view on browser by maintaining code/logic in controller. We can maintain it without a controller by using only Model-View-View-Model too. For reference just find a pictorial representation of MVC flow..

mvc

Lets go to the point..

AngularJS Controllers

 AngularJS controllers control the data of AngularJS applications.

 AngularJS controllers are regular JavaScript Objects.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

The $scope of the controller is the application /the HTML element) it is referred from.

<div ng-app=“” ng-controller=“personController”>

First Name: <input type=“text” ng-model=“person.firstName”><br>
Last Name: <input type=“text” ng-model=“person.lastName”><br>
<br>
Full Name: {{person.firstName + ” ” + person.lastName}}

</div>

<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”
};
}
</script>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller

The AngularJS application is defined by ng-app. The application runs inside a <div>.

The ng-controller directive names the controller object.

The function personController is a standard JavaScript object constructor.

The controller object has one property: $scope.person.

The person object has two properties: firstName and lastName.

The ng-model directives binds the input fields to the controller properties (firstName and lastName).

Controller Properties

The example above demonstrated a controller object with two properties, lastName and firstName.

A controller can also have functions as object properties:

<div ng-app=“” ng-controller=“personController”>

First Name: <input type=“text” ng-model=“person.firstName”><br>
Last Name: <input type=“text” ng-model=“person.lastName”><br>
<br>
Full Name: {{person.fullName()}}

</div>

<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”,
fullName: function() {
var x;
x = $scope.person;
return x.firstName + ” ” + x.lastName;
}
};
}
</script>

Controller Methods

A controller can also have methods:

<div ng-app=“” ng-controller=“personController”>

First Name: <input type=“text” ng-model=“person.firstName”><br>
Last Name: <input type=“text” ng-model=“person.lastName”><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
function personController($scope) {
$scope.person = {
firstName: “John”,
lastName: “Doe”,
};
$scope.fullName = function() {
var x;
x = $scope.person;
return x.firstName + ” ” + x.lastName;
};
}
</script>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_function

Controllers In External Files

In larger applications, it is common to store controllers in external files.

we will create a new controller file:

function namesController($scope) {
$scope.names = [
{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}
];
}
And then use the controller file in an application:
<div ng-app=“” ng-controller=“namesController”>

<ul>
<li ng-repeat=“x in names”>
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>

</div>

<script src=“namesController.js”></script>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_names
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s