AngularJS

AngularJS Built in Directives


indexA directive in AngularJS is a meaningful name for a function that is attached with DOM elements. All AngularJS built in directives prefixed with the ng namespace. It is used to extend HTML elemets attribute. AngularJS directives have the ability to execute methods, define behavior, attach controllers and scope objects, manipulate the DOM, and more.

Built in Directives

Here is a list of AngularJS built in directives with description.

Directives Description
ng-app It is added to set the AngularJS section.
ng-init It sets default variable value.
ng-bind It is an alternative to {{ }} template.
ng-bind-template It binds multiple expressions to the view.
ng-non-bindable It used to not to bind data.
ng-bind-html It used to bind inner HTML property of an HTML element.
ng-change It evaluates specified expression when the user changes the input.
ng-checked It is used to set checkbox checked.
ng-class It is used to the css class dynamically.
ng-cloak It is usedv to prevent displaying the content until AngularJS has taken control.
ng-click It is used to execute a method or expression when element is clicked.
ng-controller It is used to attach a controller class to the view.
ng-disabled It is used to attach disabled attributes to the form element.
ng-form It is used to set form within a form.
ng-href It is used to dynamically bind AngularJS variables to the href attribute.
ng-include It is used to fetch, compile and include an external HTML fragment to your page.
ng-if It is used to remove or recreate an element in the DOM depending on an expression
ng-switch It is used to conditionally switch control based on matching expression.
ng-model It is used to bind an input,select, textarea etc elements with model property.
ng-readonly It is used to set readonly attribute to an element.
ng-repeat It is used to loop through each item in collection to create a new template.
ng-selected It is used to set selected option in <select> element.
ng-show/ng-hide It workes based on expression, if true then the element is shown or hidden respectively.
ng-src It is used to dynamically bind AngularJS variables to the src attribute.
ng-submit It is used to bind angular expressions to onsubmit events.
ng-value It is used to bind angular expressions to the value of <option>.
ng-required It is used to bind angular expressions to onsubmit events.
ng-style It is used to set CSS style on an HTML element conditionally.
ng-pattern It is used to add the pattern validator to ngModel.
ng-maxlength It is used to adds the maxlength validator to ngModel.
ng-minlength It is used to adds the minlength validator to ngModel.
ng-classeven It works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-classodd It works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-cut It is used to specify custom behavior on cut event.
ng-copy It is used to specify custom behavior on copy event.
ng-paste It is used to specify custom behavior on paste event.
ng-options It is used to dynamically generate a list of <option> elements for the <select> element.
ng-list It is used to convert string into list based on specified delimiter.
ng-open It is used to set the open attribute on the element, if the expression inside ngOpen is truthy.
Advertisements

Addition of Two Numbers in AngularJS


Simple AngularJs Program for Addition of two numbers.

AngularJS Reference

AngularJS library written in JavaScript. Angular js reference file is given below.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Here is the complete code :

<div ng-app="">
<h3>Using Input Type Number</h3>
First Number :
        <input type="number" ng-model="c" />
Second Number :
        <input type="number" ng-model="d" />
Sum Of Two Number's : {{ c + d }}
</div>

Output :

addnumbersCheck Live Demo Here : Addition Of Two Numbers Using AngularJs

Hello World Using AngularJs


Simple AngularJs Hello World Program.

AngularJS Reference

AngularJS library written in JavaScript. Angular js reference file is given below.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Here is the complete code :

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
Input something in the input box:
Name : <input type="text" ng-model="name" placeholder="Enter name here">

<h1>Hello {{name}}</h1>

</div>

</body>
</html>

Output :

angularjs1

Check Live Demo Here : Hello World Using AngularJs

AngularJS Basic Overview


What is AngularJS?

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.3.14.

Definition of AngularJS as put by its Official Documention is as follows:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features

  • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).
  • AngulajJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.
  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles javascript code suitable for each browser.
  • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

(more…)