Home  >  Angular JS

Angular JS: Directives, Expressions and Controllers Example

July 31, 2014
Angular JS is an open-source web application framework. Angular JS extends HTML with new attribute. It is best for Single page application (SPA). Angular JS is JavaScript MVC framework. It can be added to HTML page with <script> tag. The library reads in HTML that contains additional custom tag attributes. Angular JS extends HTML attribute with directives and bind data to HTML with Expressions. Angular JS adds more functionality and create powerful dynamic template. You can also create your own directives, crafting reusable components that fulfill your needs and abstracting away all the DOM manipulation logic. Angular JS has two way data binding, connecting HTML (views) to JavaScript objects (models) seamlessly. It reduces amount of code from page.

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>
Output
Angular JS : Directives,  Expressions and  Controllers Example
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>
Output
Angular JS : Directives,  Expressions and  Controllers Example

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>
Output
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>
Output
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>
Output
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>
Output
Angular JS : Directives,  Expressions and  Controllers Example
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us