HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
The ng-hide directive shows or hides an HTML element using AngularJS.
<div ng-app=”myApp”>
<p ng-hide=”true”>Hidden Element</p>
<p ng-show=”false”>Visible Element</p>
</div>
Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation
In AngularJS ng-click directive defines a click event. Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.
<button ng-click = “userClickCounter= userClickCounter + 1”>Click it !</button>
<p>Total count of clicks: {{ userClickCounter }}<
An AngularJS module defines an application. AngularJS supports modular approach. Modules are used to separate logics say services, controllers, application etc. and keep the code clean. We define modules in separate js files and name them as per the module.js file. In this example we’re going to create two modules.… Read more
AngularJS provides multiple events which can be associated with the HTML controls. For example ng-click is normally associated with button. Following are supported events in Angular JS.
# ng-click
# ng-dbl-click
# ng-mousedown
# ng-mouseup
# ng-mousemove
# ng-mouseover
# ng-mouseenter
# ng-mouseleave
# ng-keydown
# ng-keyup
# ng-keypress
# … Read more
AngularJS provides $http control which works as a service(API) to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following … Read more
In AngularJS ng-repeat directive is perfect for displaying tables.
<div ng-app=”myApp” ng-controller=”usersCtrl”>
<table>
<tr ng-repeat=”x in names”>
<td>{{ x.userName }}</td>
<td>{{ x.userCountry }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘usersCtrl’, function($scope, $http) {
$http.get(“http://www.yoursite.com/api/users.php”)
.success(function (response) {$scope.names = response.records;});
});
The AngularJS Global API is a set of global JavaScript functions for performing common tasks like:
# Comparing an objects
# Iterating an objects
# Converting data
The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
angular.uppercase() : It converts … Read more