AngularJS

AngularJS Directives

AngularJS Filters and Elements

AngularJS Tutorials

AngularJS

All AngularJS Tutorials, Quizzes & Exercises

AngularJS Tutorials
AngularJS Intro
AngularJS is a JavaScript framework. It can be added to an HTML page with a script tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
AngularJS Expressions
AngularJS binds data to HTML using Expressions.AngularJS expressions can be written inside double braces.AngularJS expressions can also be written inside a directive: ng-bind=expression
AngularJS Modules
An AngularJS module defines an application.The module is a container for the different parts of an application.The module is a container for the application controllers.
AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app, ng-init, ng-model are all directives.
ng-model Directive
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
Data Binding
Data binding in AngularJS is the synchronization between the model and the view.
ng-controller
AngularJS controllers control the data of AngularJS applications. AngularJS controllers are regular JavaScript Objects.
AngularJS Scope
The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods.
Filters
Filters can be added in AngularJS to format data. Filters can be added to expressions by using the pipe character |, followed by a filter.
Services
a service is a function, or object, that is available for, and limited to, your AngularJS application.
Tables in AngularJS
The ng-repeat directive is perfect for displaying tables.
Select Boxes
AngularJS lets you create dropdown lists based on items in an array, or an object using ng-options
ng-disabled
The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.
ng-show
The ng-show directive shows (or hides) an HTML element based on the value of ng-show.
ng-hide
The ng-hide directive hides or shows an HTML element.
Events
AngularJS has its own HTML events directives. The event directives allows us to run AngularJS functions at certain user events.
Radio Buttons
Forms in AngularJS provides data-binding and validation of input controls.
Animations
AngularJS provides animated transitions, with help from CSS.
AngularJS Directives
ng-app Directive in AngularJS
The ng-app directive tells the AngularJS that this is the root element of the AngularJS application.
ng-bind Directive in AngularJS
The ng-bind directive is used to define AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
ng-bind-html Directive in AngularJS
The ng-bind-html directive is a secure way of binding content to an HTML element.
ng-bind-template Directive in AngularJS
The ng-bind-template directive is used to tell AngularJS to replace the content of an HTML element with the value of the given expressions.
ng-blur Directive in AngularJS
The ng-blur directive is used to tell AngularJS what to do when an HTML element loses focus.
ng-change Directive in AngularJS
The ng-change directive is used to tell AngularJS what to do when the value of an HTML element changes.
ng-checked Directive in AngularJS
The ng-checked directive is used to set the checked attribute of a checkbox or a radio button.
ng-class Directive in AngularJS
The ng-class directive is used to dynamically bind one or more CSS classes to an HTML element. Its value can be a string, an object, or an array.
ng-class-even Directive in AngularJS
The ng-class-even directive is used to dynamically bind one or more CSS classes to an HTML element.
ng-class-odd Directive in AngularJS
The ng-class-odd directive is used to dynamically bind one or more CSS classes to an HTML element.
ng-click Directive in AngularJS
The ng-click directive tells AngularJS what to do when an HTML element is clicked.
ng-cloak Directive in AngularJS
The ng-cloak directive is used to prevent the document from showing unfinished AngularJS code while AngularJS is being loaded.
ng-controller Directive in AngularJS
The ng-controller directive is used to add a controller to the AngularJS application.
ng-copy Directive in AngularJS
The ng-copy directive is used to tell AngularJS what to do when an HTML element is being copied.
ng-csp Directive in AngularJS
The ng-csp directive is used to change the security policy of AngularJS. With it, AngularJS will not run any eval functions, and it will not inject any inline styles.
ng-cut Directive in AngularJS
The ng-cut directive is used to tell AngularJS what to do when an HTML element is being cut.
ng-dblclick Directive in AngularJS
The ng-dblclick directive tells AngularJS what to do when an HTML element is double clicked.
ng-disabled Directive in AngularJS
The ng-disabled directive sets the disabled attribute of a form field. If the ng-disabled returns true, then the form field will be disabled.
ng-focus Directive in AngularJS
The ng-focus directive is used to tell AngularJS what to do when an HTML element gets focused.
ng-hide Directive in AngularJS
The ng-hide directive hides the HTML element if the expression evaluates to true.
ng-href Directive in AngularJS
The ng-href directive is used to override the original href attribute of an a element.
ng-if Directive in AngularJS
The ng-if directive is used to remove the HTML element if the expression evaluates to false. Otherwise, a copy of the Element is added to the DOM.
ng-include Directive in AngularJS
The ng-include directive is used to include HTML from an external file. The file content will be included as child nodes of the specified element.
ng-init Directive in AngularJS
The ng-init directive is used to evaluate the given expression or set of expressions.
ng-keydown Directive in AngularJS
The ng-keydown directive is used to tell AngularJS what to do when the keyboard event key down has occurred on the specific HTML element.
ng-keypress Directive in AngularJS
The ng-keypress directive is used to tell AngularJS what to do when the keyboard event key press has occurred on the specific HTML element.
ng-keyup Directive in AngularJS
The ng-keyup directive is used to tell AngularJS what to do when the keyboard event key up has occurred on the specific HTML element.
ng-list Directive in AngularJS
The ng-list directive is used to convert a string into an array of strings, using a comma as the default separator.
ng-maxlength Directive in AngularJS
The ng-maxlength directive is used to add a restriction to an input field, and to form a validator. It is not the same as the maxlength attribute in HTML.
ng-minlength Directive in AngularJS
The ng-minlength directive is used to add a restriction to an input field, and form a validator.
ng-model Directive in AngularJS
The ng-model directive binds an HTML form element to a variable in the scope.
ng-model-options Directive in AngularJS
The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope.
ng-mousedown Directive in AngularJS
The ng-mousedown directive is used to tell AngularJS what to do when a mouse button is pressed down on the specific HTML element.
ng-mouseenter Directive in AngularJS
The ng-mouseenter directive is used to tell AngularJS what to do when a mouse cursor enters a specific HTML element.
ng-mouseleave Directive in AngularJS
The ng-mouseleave directive is used to tell AngularJS what to do when a mouse cursor leaves a specific HTML element.
ng-mousemove Directive in AngularJS
The ng-mousemove directive is used to tell AngularJS what to do when a mouse cursor moves over a specific HTML element.
ng-mouseover Directive in AngularJS
The ng-mouseover directive is used to tell AngularJS what to do when a mouse cursor moves over a specific HTML element.
ng-mouseup Directive in AngularJS
The ng-mouseup directive is used to tell AngularJS what to do when a mouse button is pressed and then released on the specific HTML element.
ng-non-bindable Directive in AngularJS
The ng-non-bindable directive is used to specify that the content of this HTML element, and its child nodes, should not be compiled by AngularJS.
ng-open Directive in AngularJS
The ng-open directive is used to set the open attribute of a details list. The details list will be visible only if the ng-open attribute returns true.
ng-options Directive in AngularJS
The ng-options directive is used to fill a select element with options. The ng-options directive uses an array to fill the dropdown list.
ng-paste Directive in AngularJS
The ng-paste directive is used to tell AngularJS what to do when text is pasted into an HTML element.
ng-readonly Directive in AngularJS
The ng-readonly directive sets the readonly attribute of a form field. If the ng-readonly returns true, then the form field will be readonly.
ng-repeat Directive in AngularJS
The ng-repeat directive is used to repeat a set of HTML a given number of times. The set of HTML will be repeated once per item in a collection.
ng-required Directive in AngularJS
The ng-required directive sets the required attribute of a form field. If the expression inside the ng-required attribute returns true.
ng-selected Directive in AngularJS
The ng-selected directive is used to set the selected attribute of an option element in a select list.
ng-show Directive in AngularJS
The ng-show directive is used to show the specified HTML element if the expression evaluates to true, otherwise, the HTML element is hidden.
ng-src Directive in AngularJS
The ng-src directive is used to override the original src attribute of an img element.
ng-srcset Directive in AngularJS
The ng-srcset directive is used to override the original srcset attribute of an element.
ng-style Directive in AngularJS
The ng-style directive is used to specify the style attribute for the HTML element.
ng-submit Directive in AngularJS
The ng-submit directive is used to specify a function to run when the form is submitted. Without it, the form will not get submitted.
ng-switch Directive in AngularJS
The ng-switch directive is used to hide or show HTML elements depending on an expression.
ng-value Directive in AngularJS
The ng-value directive is used to set the value attribute of an input element, or a select element.
AngularJS Filters and Elements
a Directive in AngularJS
AngularJS is used to change the default behavior of the a tag.
form Directive in AngularJS
AngularJS is used to change the default behavior of the form element. In AngularJS, forms are given certain new properties.
input Directive in AngularJS
AngularJS is used to change the default behavior of input elements by using an ng-model attribute.
textarea Directive in AngularJS
AngularJS is used to change the default behavior of textarea elements by using an ng-model attribute.
currency Filter in AngularJS
The currency filter is used to format a number to a currency format. By default, the locale currency format is used.
date Filter in AngularJS
The date filter is used to format a date to a specified format. The date can be a date object, milliseconds, or a DateTime string.
filter Filter in AngularJS
The filter filter allows us to filter an array, and return an array containing only the matching items. It only works only on Arrays.
json Filter in AngularJS
The json filter is used to convert a JavaScript object into a JSON string. It can be useful when debugging your applications.
limitTo Filter in AngularJS
The limitTo filter is used to return an array or a string containing only a specified number of elements.
lowercase Filter in AngularJS
The lowercase filter is used to convert a string to lowercase letters.
uppercase Filter in AngularJS
The uppercase filter is used to convert a string to uppercase letters.
number Filter in AngularJS
The number filter is used to format a number to a string.
orderBy Filter in AngularJS
The orderBy filter is used to allow us to sort an array. Strings are sorted alphabetically and Numbers are sorted numerically by default.