Introduction to Angular Js

1
Angular JS tutorial
by professionalguru
2
A brief Introduction

• What is Angular JS ?
• Angular JS is a JavaScript framework. It can be
  added to an HTML page with a ltscriptgt tag.
• Angular JS extends HTML attributes with
  Directives, and binds data to HTML with
  Expressions.

http//professional-guru.com
3

• Why Angular JS ?
• Other frameworks deal with HTMLs shortcomings
  by either abstracting away HTML, CSS, and/or
  JavaScript or by providing an imperative way for
  manipulating the DOM. Neither of these address
  the root problem that HTML was not designed for
  dynamic views.

http//professional-guru.com
4

1. Structure, Quality and Organization
2. Lightweight ( lt 36KB compressed and minified)
3. Free
4. Separation of concern
5. Modularity
6. Extensibility Maintainability
7. Reusable Components

http//professional-guru.com
5
JQuery

• Allows for DOM Manipulation
• Does not provide structure to your code
• Does not allow for two way binding

http//professional-guru.com
6

• Features of AngularJS
• Two-way Data Binding Model as single source of
  truth
• Directives Extend HTML
• MVC
• Dependency Injection
• Testing
• Deep Linking (Map URL to route Definition)
• Server-Side Communication

http//professional-guru.com
7
Data Binding
lthtml ng-appgt ltheadgt ltscript src'angular.js'gtlt/sc
riptgt lt/headgt ltbodygt ltinput ng-model'user.name'gt
ltdiv ng-show'user.name'gtHi user.namelt/divgt lt/
bodygt lt/htmlgt
http//professional-guru.com
8
MVC
Model (Data)
View (UI)
Notifies
Notifies
Changes
Controller (Logic)
Notifies
http//professional-guru.com
9
Hello HTML ltpgtHello World!lt/pgt
http//professional-guru.com
10

• Hello Javascript
• ltp id"greeting1"gtlt/pgt
• ltscriptgt
• var isIE document.attachEvent var addListener
  isIE
• ? function(e, t, fn)
• e.attachEvent('on' t, fn)
• function(e, t, fn)
• e.addEventListener(t, fn, false)
• addListener(document, 'load', function()
• var greeting document.getElementById('greeting1'
  ) if (isIE)
• greeting.innerText 'Hello World!'
• else
• greeting.textContent 'Hello World!'
• )
• lt/scriptgt

http//professional-guru.com
11
Hello Jquery
ltp id"greeting2"gtlt/pgt ltscriptgt (function() ('
greeting2').text('Hello World!') ) lt/scriptgt
http//professional-guru.com
12
Hello AngularJS
ltp nginit"greeting 'Hello World!'"gtgreeting
lt/pgt
http//professional-guru.com
13
Angular JS Applications

• Angular JS modules define Angular JS
  applications.
• Angular JS controllers control Angular JS
  applications.
• The ng-app directive defines the application,
  the ng-controller directive defines the
  controller.

http//professional-guru.com
14
Angular JS Expressions

• Angular JS expressions can be written inside
  double braces expression .
• Angular JS expressions can also be written inside
  a directive ng-bind"expression".
• Angular JS will resolve the expression, and
  return the result exactly where the expression
  is written

http//professional-guru.com
15
AngularJS Modules

• An Angular JS module defines an application.
• The module is a container for the different parts
  of an application.
• The module is a container for the application
  controllers.
• Controllers always belong to a module.

http//professional-guru.com
16
Angular JS Directives

• Angular JS lets you extend HTML with new
  attributes called Directives.
• Angular JS has a set of built-in directives which
  offers functionality to your applications.
• Angular JS also lets you define your own
  directives.

http//professional-guru.com
17
Angular JS Directives

• Angular JS directives are extended HTML
  attributes with the prefix ng-.
• The ng-app directive initializes an Angular JS
  application.
• The ng-init directive initializes application
  data.
• The ng-model directive binds the value of HTML
  controls (input, select, textarea) to application
  data.

http//professional-guru.com
18
Angular JS Controllers

• Angular JS controllers control the data of
  Angular JS applications.
• Angular JS controllers are regular JavaScript
  Objects.
• Angular JS applications are controlled by
  controllers.
• The ng-controller directive defines the
  application controller.
• A controller is a JavaScript Object, created by
  a standard JavaScript object constructor.

http//professional-guru.com
19
Angular JS Services

• In Angular JS you can make your own service, or
  use one of the many built-in services.
• What is a Service?
• In Angular JS, a service is a function, or
  object, that is available for, and limited to,
  your Angular JS application.
• Angular JS has about 30 built-in services. One of
  them is the location service.

http//professional-guru.com
20
Angular JS Global API

• The Angular JS Global API is a set of global
  JavaScript functions for performing common tasks
  like
• Comparing objects
• Iterating objects
• Converting data
• The Global API functions are accessed using the
  angular object.

http//professional-guru.com