AngularJS Examples

Toggle navigation
TUTORIAL HOME
AngularJS Examples
❮ Previous Next ❯
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>
»
AngularJS Basics
My first AngularJS Directives
My first AngularJS Directives (with valid HTML5)
My first AngularJS Expression
A simple AngularJS Expression, using a variable
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 Modules
AngularJS Controller
Modules and controllers in files
When to load AngularJS
Modules Explained

AngularJS Directives
AngularJS Directives
The ng-model Directive
The ng-repeat Directive (with Arrays)
The ng-repeat Directive (with Objects)
Make a new Directive
Using the new directive as element
Using the new directive as attribute
Using the new directive as a class
Using the new directive as a comment
A Directive with restrictions
Directives Explained

AngularJS Models
AngularJS Model
A Model with two-way binding
A Model with validation
A form and its current validation status
Set a CSS class when a field is invalid
Models Explained

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

AngularJS Scopes
AngularJS Scope
The scope is in sync
Different Scopes
The RootScope
Scopes 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
Displaying a table with an index
Displaying a table with even and odd
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-show, based on a condition
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 Forms
AngularJS Forms
AngularJS Validation
Angular Forms Explained

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

AngularJS W3.CSS
AngularJS With W3.CSS
W3.CSS Explained

AngularJS Includes
AngularJS Include HTML
Include a table containing AngularJS code
Include a file from a different domain
AngularJS Includes

AngularJS Animations
AngularJS Animation
Including the animation library as a dependency
Animation using CSS3 Transitions
Animation using CSS3 Animations
AngularJS Animations

AngularJS Applications
AngularJS Note Application
AngularJS ToDo Application

AngularJS Applications


❮ Previous Next ❯