Angular JS: Directives, Expressions and Controllers Example
July 31, 2014
Angular JS Directives
Angular JS extends HTML with new directives. Multiple directives are used to extend HTML. The developer needs to specify custom and reusable HTML tags that moderate the behavior of certain elements. All attributes use ng- prefix.ng-app
Declares an element as a root element of the application, The ng-app directive is responsible for bootstrapping your app defining its scope.ng-init
The ng-init directive initialize application data in web page.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstUrl='Concretepage'">
<p>Some Text in inputbox :</p>
<div>Name: <input type="text" ng-model="firstUrl"></div>
<div>You wrote: {{ firstUrl }}</div>
</div>
</body>
</html>
ng-bind
The ng-bind directive changes the text of an element to the value of an expression. <p ng-bind="name"> </p> will display the value of name inside the p tag. Any changes to "name" are reflected instantly.<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <body> <div ng-app=""> <div>Name: <input type="text" ng-model="name"></div><br> <div>Name is : <span ng-bind="name"></span></div> </div> </body></html>
ng-class
The ng-class attribute allow to load dynamically classes.ng-model
The ng-model directive binds application data to HTML element. ng-model allows two-way data binding between the view and the scope. ng-model directive can also provide type validation for application data and status for application data. It also provides css classes for html element and bind html element to html forms.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=0;price=0">
<h2>Price Calculator</h2>
<p>Quantity: <input type="text" ng-model="quantity"></p>
<p>Price: <input type="text" ng-model="price"></p>
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body></html>
Angular JS Expressions
Angular JS Expressions are like JavaScript expressions that are usually binding data such as :{{ expression}} . Angular JS expression are written inside double braces like {{ expression }} and is bind to html data. It will give output exactly where expression is written. Angular JS expression can contain operator and variables. We can add two or multiple string and multiply the numbers in expression.Example: Add two String
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='Atul'; lastName='Rai'">
<div>The name is: {{ firstName + " " + lastName }}</div>
</div>
</body>
</html>
The name is : Atul Rai
Example: Add two Integer
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstNumber='5'; secondNumber='10'">
<div>The number is: {{ firstNumber * secondNumber }}</div>
</div>
</body>
</html>
The number is : 50
Object use in expression
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div ng-app="" ng-init="price={mango:'40',apple:'100', banana:'50'}">
<p>The apple fruit price is {{ price.apple }}</p>
</div>
</body>
</html>
The apple fruit price is 100
Angular JS Controllers
In Angular JS, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. ng-controllers control the data of application and ng-controller directive defines the application controller. When a Controller is attached to the DOM via the ng-controller directive, Angular JS will instantiate a new Controller object. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body>
<div ng-app="" ng-controller="pController">
<div>First Name: <input type="text" ng-model="person.firstName"></div>
<div>Last Name: <input type="text" ng-model="person.lastName"></div>
<div>Last Name: <input type="text" ng-model="person.dateofbirth"></div>
<div>Last Name: <input type="text" ng-model="person.mobile"></div><br><br>
<div>Name : {{person.firstName + " " + person.lastName}}</div>
<div>Date of birth : {{person.dateofbirth}}</div>
<div>Mobile number : {{person.mobile}}</div>
</div>
<script>
function pController($scope) {
$scope.person = {
firstName: "Atul",
lastName: "Rai",
dateofbirth: "01/03/1990",
mobile: "000003888888",
};
}
</script>
</body>
</html>
