Its Angular JS Time...

Welcome to Angular JS

Some Facts...

Extends HTML with new Attributes

Perfect for SPA (Single Page Application)

Easy to learn

What you should already know?

HTML

CSS

JavaScript

Angular JS Intro...

It is bascially a JavaScript Framework. It can be added to a HTML page within a <script> tag

JavaScript Framework...

It is a Library written in JavaScript

Angular JS extends HTML

1. Angular JS extends HTML with ng-directive

2. ng-app directive defines an Angular JS Application

3. ng-model directive binds the value of HTML controls (input, select, textarea) to application data

4. ng-bind directive binds application data to HTML view

Some Notes...

Example...

Output...

Explanation

1. 'ng-app' directive tells that <div> element is the owner of the Angular JS application

2. 'ng-model' directive binds the value of the input field to the application variable name

3. 'ng-bind' binds the innerHTML of <p> element to the application variable name

Angular JS Directive

Example...

Output...

Explanation

'ng-init' directive initialize the AngularJS application variables.

Angular JS Expressions

Angular JS will give you the data output exactly where the {{expression}} is written

Expression Syntax

starts and ends within a double second bracket - {{expression}}

Example...

Output...

Example 1...

Output 2...

Angular JS Application

Angular JS modules define Angular JS Applications.

Angular JS controllers control Angular JS applications.

ng-app - defines directive

ng-controller - defines the controller

Example...

Output...