AngularJS Examples

Examples

You can edit the examples online, then click the button to view the results.

AngularJS Examples

<div ng-app=""> <p>Name :<input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div>

Try it Yourself »

AngularJS Basics

My first AngularJS expression
My first AngularJS directive
My first AngularJS directive (with valid HTML5)
AngularJS Controllers

Basic AngularJS Explanation

AngularJS Expressions

Simple Expression
Expression without ng-app
Expression with Numbers
Using ng-bind with Numbers
Expression with Strings
Using ng-bind with Strings
Expression with Objects
Using ng-bind with Objects
Expression with Arrays
Using ng-bind with Arrays

Expression Explanation

AngularJS Directives

AngularJS Directives
ng-model Directive
ng-repeat Directive (with Arrays)
ng-repeat Directive (with Objects)

Directive Explanation

AngularJS Controllers

AngularJS Controllers
Controller Properties
Controller Functions
Controller in JavaScript File I
Controller in JavaScript File II

Controller Explanation

AngularJS Filters

Expression Filter uppercase
Expression Filter lowercase
Currency Filter Expression
Directive Filter orderBy
Input Filter

Filter Explanation

AngularJS XMLHttpRequest

Read Static JSON File

XMLHttpRequest Parsing

AngularJS Tables

Display a Table (Simple)
Table with CSS Styles
Table Sorting
Table Using the uppercase Filter
Table with Serial Numbers
Table Using even and odd

AngularJS - Read Data from Database

Read Data from MySQL Database
Read Data from SQL Server Database

AngularJS SQL Parsing

AngularJS HTML DOM

ng-disabled Directive
ng-show Directive
ng-hide Directive

HTML DOM Parsing

AngularJS Events

ng-click Directive
ng-hide Directive
ng-show Directive

HTML Event Parsing

AngularJS Modules

AngularJS Module in body
AngularJS Module in a File

AngularJS Module Analysis

AngularJS Forms

AngularJS Forms
AngularJS Validation

AngularJS Form Analysis

AngularJS API

AngularJS angular.lowercase()
AngularJS angular.uppercase()
AngularJS angular.isString()
AngularJS angular.isNumber()

API Analysis

AngularJS Bootstrap

AngularJS Using Bootstrap
AngularJS Using Bootstrap and Using the Include File Feature

Bootstrap Analysis

AngularJS Applications

AngularJS Notes Application
AngularJS Memo Application

AngularJS Application

Other Extensions