AngularJS

1
AngularJS
2
AngularJS Introduction

• AngularJS is a JavaScript framework. It can be
  added to an HTML page with a ltscriptgt tag.
• AngularJS extends HTML attributes with
  Directives, and binds data to HTML with
  Expressions.
• AngularJS is a JavaScript framework. It is a
  library written in JavaScript.
• AngularJS is distributed as a JavaScript file,
  and can be added to a web page with a script tag
• ltscript src"http//ajax.googleapis.com/ajax/libs/
  angularjs/1.3.14/angular.min.js"gt
• lt/scriptgt

3
AngularJS Extends HTML

• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS
  application.
• The ng-model directive binds the value of HTML
  controls (input, select, textarea) to application
  data.
• The ng-bind directive binds application data to
  the HTML view.

4
AngularJS Example
lt!DOCTYPE htmlgtlthtmlgt ltscript
src"http//ajax.googleapis.com/ajax/libs/angularj
s/1.3.14/angular.min.js"gtlt/scriptgt ltbodygt ltdiv
ng-app""gt  ltpgtName ltinput type"text"
ng-model"name"gtlt/pgt  ltp ng-bind"name"gtlt/pgt lt
/divgt lt/bodygtlt/htmlgt
5
Output
6
Example explained

• AngularJS starts automatically when the web page
  has loaded.
• The ng-app directive tells AngularJS that the
  ltdivgt element is the "owner" of an AngularJS
  application.
• The ng-model directive binds the value of the
  input field to the application variable name.
• The ng-bind directive binds the innerHTML of the
  ltpgt element to the application variable name.

7
AngularJS Directives

• As you have already seen, AngularJS directives
  are HTML attributes with an ng prefix.
• The ng-init directive initialize AngularJS
  application variables.
• AngularJS Example
• ltdiv ng-app"" ng-init"firstName'John'"gt ltpgt
  The name is ltspan ng-bind"firstName"gtlt/spangtlt/pgt
  lt/divgt

8
AngularJS Expressions

• AngularJS expressions are written inside double
  braces expression .
• AngularJS will "output" data exactly where the
  expression is written
• AngularJS Example
• lt!DOCTYPE htmlgtlthtmlgt ltscript
  src"http//ajax.googleapis.com/ajax/libs/angularj
  s/1.3.14/angular.min.js"gtlt/scriptgt ltbodygt ltdiv
  ng-app""gt  ltpgtMy first expression 5 5
  lt/pgt lt/divgt lt/bodygtlt/htmlgt

9
Output
10
AngularJS Applications

• AngularJS modules define AngularJS applications.
• AngularJS controllers control AngularJS
  applications.
• The ng-app directive defines the application, the
  ng-controller directive defines the controller.
• AngularJS Example
• ltdiv ng-app"myApp" ng-controller"myCtrl"gt Fir
  st Name ltinput type"text" ng-model"firstName"gtlt
  brgt Last Name ltinput type"text"
  ng-model"lastName"gtltbrgt ltbrgt Full Name
  firstName " " lastName lt/divgt

11
Continue.. ltscriptgt var app
angular.module('myApp', ) app.controller('myCt
rl', function(scope)     scope.firstName
"John"    scope.lastName "Doe" )lt/script
gt
12
Output
13

• AngularJS modules define applications
• var app angular.module('myApp', )
• AngularJS controllers control applications
• app.controller('myCtrl', function(scope)
•     scope.firstName "John"   
  scope.lastName "Doe" )

14

• AngularJS Numbers
• AngularJS numbers are like JavaScript numbers
• AngularJS Example
• ltdiv ng-app"" ng-init"quantity1cost5"gt ltp
  gtTotal in dollar quantity cost
  lt/pgt lt/divgt
• Output

15

• AngularJS Strings
• AngularJS strings are like JavaScript strings
• AngularJS Example
• ltdiv ng-app"" ng-init"firstName'John'lastName
  'Doe'"gtltpgtThe name is firstName " "
  lastName lt/pgtlt/divgt
• Output

16

• AngularJS Objects
• AngularJS objects are like JavaScript objects
• AngularJS Example
• ltdiv ng-app"" ng-init"personfirstName'John',
  lastName'Doe'"gt ltpgtThe name is
  person.lastName lt/pgt lt/divgt
• Output

17

• AngularJS Arrays
• AngularJS arrays are like JavaScript arrays
• AngularJS Example
• ltdiv ng-app"" ng-init"points1,15,19,2,40"gt
  ltpgtThe third result is points2
  lt/pgt lt/divgt
• Output

18

• AngularJS Tables
• The ng-repeat directive is perfect for displaying
  tables.
• Displaying Data in a Table
• Displaying tables with angular is very simple
• AngularJS Example
• ltdiv ng-app"myApp" ng-controller"customersCtrl"gt
  lttablegt  lttr ng-repeat"x in names"gt   
  lttdgt x.Name lt/tdgt    lttdgt x.Country
  lt/tdgt  lt/trgt lt/tablegtlt/divgt

19
ltscriptgt var app angular.module('myApp',
) app.controller('customersCtrl',
function(scope, http)     http.get("http//w
ww.w3schools.com/angular/customers.php")   
.success(function (response) scope.names
response.records) )lt/scriptgt Output
20

• Displaying with CSS Style
• To make it nice, add some CSS to the page
• CSS Style
• ltstylegt table, th , td   border 1px solid
  grey  border-collapse collapse  padding
  5px table trnth-child(odd)
    background-color f1f1f1 table
  trnth-child(even)   background-color
  ffffff lt/stylegt

21
Output