AngularJS Examples


Try it Yourself

You can edit the examples online, and click on a button to view the result.

AngularJS Example

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>

</div>

Try it Yourself »


AngularJS Basics

My first AngularJS Directives
My first AngularJS Directives (with valid HTML5)
My first AngularJS Expression
My first AngularJS Controller

Basic AngularJS Explained


AngularJS Expressions

A 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

Expressions Explained


AngularJS Directives

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

Directives Explained


AngularJS Controllers

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

Controllers Explained


AngularJS Filters

Expression Filter uppercase
Expression Filter lowercase
Expression Filter currency
Directive Filter orderBy
Input Filters

Filters Explained


AngularJS XMLHttpRequest

Reading a static JSON file

XMLHttpRequest Explained


AngularJS Tables

Displaying a table (simple)
Displaying a table with CSS
Displaying a table with an orderBy filter
Displaying a table with an uppercase filter

Tables Explained


AngularJS - Reading from SQL Resources

Reading from a MySQL database
Reading from a SQL Server database

Angular SQL Explained


AngularJS HTML DOM

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

HTML DOM Explained


AngularJS Events

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

HTML Events Explained


AngularJS Modules

AngularJS module in body
AngularJS module in files

Angular Modules Explained


AngularJS Forms

AngularJS Forms
AngularJS Validation

Angular Forms Explained


AngularJS Bootstrap

AngularJS With Bootstrap
AngularJS With Bootstrap and Includes

Bootstrap Explained


AngularJS Applications

AngularJS Note Application
AngularJS ToDo Application

AngularJS Applications




Color Picker

colorpicker