Search within TutorialsPark

AngularJS : First Application - Advanced

Learn how to build your first application using AngularJS, and apply some Advanced Features

AngularJS : First Application - Advanced Features

Done with applying basic features, now we should learn to apply some advanced features and functionality of our first Application

AngularJS : Bidirectional Data Binding

The Basic application in the last part had only one directional data binding, where data is recieved from one end and displayed on the other, the update and other bi-directional functionality was missing.

But one of the most critical features of AngularJS is bi-directional binding, where in changes within the elements in reflected and updated in the data model.

In the demo below, a checkbox is used to assign status of each bill due for payment, the bi-directional binding feature is visible when the status of the bill changes based on the state of the checkbox(checked/unchecked)

Example: AngularJS Bi-directional Binding using Checkbox

Give it a TRY! » Note: The status of each bill can be changed using checkbox, false denotes unpaid while true denote paid

AngularJS : Setting the Behaviour of the Controller

In AngularJS the behaviour of the scope is defined using controllers, these behaviours set using controllers can be used to display some data to the user or to update the data model based on input or feedback provided by the user.

In the demo, we use these behaviours to update the list of bills yet to be paid, based on the input provided by the used using the checkbox.

Example: Angular JS Setting the Controller and its Behaviour

Give it a TRY! » Note: The method angular.forEach is used to count items within the data array.

AngularJS : Using Related Behaviours

With AngularJS you can create behaviours which are related to the features of other behaviours within the same controllers.

In the demo, a behaviour called regFlag is used to return the name of CSS class of Bootstrap based on the values of the behaviour dueBills. The directive uses the CSS class returned to alter the color of the label.

Example: Angular JS Using Behaviours Related to other Behaviours

Give it a TRY! » Note: There are two directives within the span element, each dependent on different behaviour.

AngularJS : Adding New Elements using User Response

One of the most critical features of AngularJS is to respond to user interaction, these interactions can bring about the change in the datamodel or it can bring about a change to the user view as well.

In the demo, a new behaviour newBills is used to add a new bill by creating a new row, the directive ng-model is used to dynamically create a property within the scope of the controller.

Example: Angular JS Adding New Elements based on User Response

Give it a TRY! » Note: The directive ng-click invokes the behaviour newBills with argument billName