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 CheckboxGive 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 BehaviourGive 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 BehavioursGive 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.