SlideShare a Scribd company logo
AngularJs
An introduction
Outline
●   What is Angular
●   Why Angular
●   How Angular
●   Angular world vs JQuery world
●   Where to use
●   Where not to use
●   Why it is special
What is Angular




     HTML enhanced for web apps!
What is Angular

A Javascript library that allows you to

● EXTEND the functionalities of HTML
● model-view view-model BINDING
● Segregate javascipt logic from HTML
  rendering
● Provides MVC framework for the messy
  javascript
Why Angular
EXTEND the functionalities of HTML

HTML
<input size="30" type="text" class="richtext"/>


Angular way
<input size="30" type="richtext"/>
Why Angular
WHY EXTEND the functionalities of HTML?
● HTML is not enough, we need
  ○   Rich text
  ○   Date picker
  ○   Iterator for dynamic contents
  ○   etc...
● HTML is build to show static data
  ○ Angular makes HTML dynamic
Why Angular
model-view view-model BINDING

● Any changes in javascript model will impact
  the HTML view
● Any changes in HTML view will impact the
  javascript model
Why Angular
model-view view-model BINDING

HTML
<input size="30" type="text" ng-model="checkIn.
start_date"/>

Javascript
function CheckInsCtrl($scope) {
  $scope.checkIn = {start_date: '2013-02-13'};
}
Why Angular
Segregate javascipt logic from HTML
rendering

Advantage
● Helps to reuse logic as it is not coupled with
  HTML DOM
● Less coupling with the framework itself, as
  the library written with plain javascript.
How Angular
HTML

<html>
  <head>
     <script src="angular.js"></script>
  </head>
  <body ng-app>
   {{checkIn.rooms_count}}
  </body>
</html>

● Add angular js in the header
● Add ng-app in the body
How Angular
Javascript

function CheckInsCtrl($scope) {
  $scope.checkIn = {rooms_count: 0};
}


● Define controller and binding data
How Angular :: expression
Javascript
function CheckInsCtrl($scope) {
  $scope.checkIn = {rooms_count: 0};
}

HTML
{{checkIn.rooms_count}}


● Use {{}} to represent expression
● Anguler is forgiving for expression evaluation
How Angular :: binding
HTML
<input ng-datepicker type="text" ng-model="checkIn.start_date"/>
<input ng-datepicker type="text" ng-model="checkIn.end_date"/>
<select ng-model="checkIn.night_counts">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   ...
</select>



● Use ng-model to bind with controller data
How Angular :: binding
Javascript

function CheckInsCtrl($scope) {
  $scope.checkIn = {start_date: '2013-02-16 12:00 AM',
     end_date: '2013-02-17 12:00 AM',
     night_counts: 1};
}



● Define model data
How Angular :: watching
Javascript
Observe changes with $watch
function CheckInsCtrl($scope) {
  $scope.checkIn = {start_date: '2013-02-16 12:00 AM',
     end_date: '2013-02-17 12:00 AM',
     night_counts: 1};

    $scope.$watch('checkIn.start_date + checkIn.end_date', function () {
        if (isValidMoment($scope.checkIn.start_date)
            && isValidMoment($scope.checkIn.end_date)) {
            $scope.updateNightCount();
        }
    });
}
Angular world vs JQuery world
● Accessing angular from jquery
● Accessing jquery from angular
Accessing angular from jquery
Dom generated by angular

<div ng-controller="CheckInsCtrl" class="ng-scope">
  ....
</div>

A scope is defined at the root element.
Accessing angular from jquery
Scope can be accessed as following,

var scope = $(elem).scope();


But the elem should have the "ng-scope"
class.
Which denotes that there is a scope bound with
that element.
Accessing angular from jquery

<div ng-controller="CheckInsCtrl" class="ng-scope">
  ....
</div>


var scope = $($('[ng-controller="CheckInsCtrl"]')[0]).
scope();

Root scope is defined at the root element.
Accessing jquery from angular
Angular can access dom by,
● Angular directives
Where to use Angular
● Complex user end UI
  ○ Where you have a lot of dom event and dom
    manipulation
● One page application
Where not to use Angular
● It is a overkill for simple application where
  you do not need a lot of client side logic
Why it is special
● The target of angular is uniq
● It helps you to extend HTML
  ○ Add new attribute, element that the browser will
    understand
● It operates on dom, unlike other libraries
  that operates on template libraries(String
  based parsing)
● Can use a plain Javascript Hash for a
  model object, unlike EmberJs
References
● angularjs.org
● slideshare.net/AgentK/angularjs-for-
  designers-and-developers
Author

A.K.M. Ashrafuzzaman
Lead Software Engineer,
Tasawr Interactive

www.ashrafuzzaman.com
zmn.ashraf@gmail.com

More Related Content

What's hot

AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java Developers
Loc Nguyen
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
Gianluca Cacace
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
Nir Kaufman
 
AngularJS (1.x) as fast as a lightning
AngularJS (1.x)as fast as a lightningAngularJS (1.x)as fast as a lightning
AngularJS (1.x) as fast as a lightning
Bartłomiej Narożnik
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
Ran Wahle
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
Brajesh Yadav
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React Together
Sebastian Pederiva
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
Eliran Eliassy
 
Routing to components
Routing to componentsRouting to components
Routing to components
Christopher Caplinger
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
Yakov Fain
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
Eyal Vardi
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Eyal Vardi
 
Angularjs
AngularjsAngularjs
Angularjs
Sabin Tamrakar
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Eliran Eliassy
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
 
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Dan Wahlin
 
Ractive js
Ractive jsRactive js
Ractive js
Knoldus Inc.
 
Understanding AJAX
Understanding AJAXUnderstanding AJAX
Understanding AJAX
sanjeevonline
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
 

What's hot (20)

AngularJS for Java Developers
AngularJS for Java DevelopersAngularJS for Java Developers
AngularJS for Java Developers
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
AngularJS (1.x) as fast as a lightning
AngularJS (1.x)as fast as a lightningAngularJS (1.x)as fast as a lightning
AngularJS (1.x) as fast as a lightning
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React Together
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
 
Routing to components
Routing to componentsRouting to components
Routing to components
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
 
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
 
Ractive js
Ractive jsRactive js
Ractive js
 
Understanding AJAX
Understanding AJAXUnderstanding AJAX
Understanding AJAX
 
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 

Viewers also liked

Lavan digital marketing-Company profile-April 2017
Lavan digital marketing-Company profile-April 2017Lavan digital marketing-Company profile-April 2017
Preparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learningPreparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learning
Judy O'Connell
 
Trigger Agency Profile - Advertising and Digital Marketing Services
Trigger Agency Profile - Advertising and Digital Marketing ServicesTrigger Agency Profile - Advertising and Digital Marketing Services
Trigger Agency Profile - Advertising and Digital Marketing Services
Trigger Advertising
 
My Amsterdam (presented at SDinGov 2017)
My Amsterdam (presented at SDinGov 2017)My Amsterdam (presented at SDinGov 2017)
My Amsterdam (presented at SDinGov 2017)
Peter Boersma
 
Web Security
Web SecurityWeb Security
Web Security
Bharath Manoharan
 
Hampton Roads AMA - 2017 Trends in Digital Marketing
Hampton Roads AMA - 2017 Trends in Digital MarketingHampton Roads AMA - 2017 Trends in Digital Marketing
Hampton Roads AMA - 2017 Trends in Digital Marketing
Grant Simmons
 
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giớiXu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
Vinalink Media JSC
 
The Next Big Thing is Web 3.0. Catch It If You Can
The Next Big Thing is Web 3.0. Catch It If You Can The Next Big Thing is Web 3.0. Catch It If You Can
The Next Big Thing is Web 3.0. Catch It If You Can
Judy O'Connell
 
We Create Digital Success Stories!
We Create Digital Success Stories!We Create Digital Success Stories!
We Create Digital Success Stories!
Talha Mujahid
 
Mix Digital Marketing Agency Credentials
Mix Digital Marketing Agency CredentialsMix Digital Marketing Agency Credentials
Mix Digital Marketing Agency Credentials
Mix Digital Marketing Agency
 
TEN Creative Design Agency Creds
TEN Creative Design Agency CredsTEN Creative Design Agency Creds
TEN Creative Design Agency Creds
TEN Creative
 
LEAP Agency Company Profile
LEAP Agency Company ProfileLEAP Agency Company Profile
LEAP Agency Company Profile
Precision Group
 

Viewers also liked (12)

Lavan digital marketing-Company profile-April 2017
Lavan digital marketing-Company profile-April 2017Lavan digital marketing-Company profile-April 2017
Lavan digital marketing-Company profile-April 2017
 
Preparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learningPreparing our students for Web 3.0 learning
Preparing our students for Web 3.0 learning
 
Trigger Agency Profile - Advertising and Digital Marketing Services
Trigger Agency Profile - Advertising and Digital Marketing ServicesTrigger Agency Profile - Advertising and Digital Marketing Services
Trigger Agency Profile - Advertising and Digital Marketing Services
 
My Amsterdam (presented at SDinGov 2017)
My Amsterdam (presented at SDinGov 2017)My Amsterdam (presented at SDinGov 2017)
My Amsterdam (presented at SDinGov 2017)
 
Web Security
Web SecurityWeb Security
Web Security
 
Hampton Roads AMA - 2017 Trends in Digital Marketing
Hampton Roads AMA - 2017 Trends in Digital MarketingHampton Roads AMA - 2017 Trends in Digital Marketing
Hampton Roads AMA - 2017 Trends in Digital Marketing
 
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giớiXu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
Xu hướng Digital marketing 2016 -2017 - 2018 - bản đầy đủ nhất Thế giới
 
The Next Big Thing is Web 3.0. Catch It If You Can
The Next Big Thing is Web 3.0. Catch It If You Can The Next Big Thing is Web 3.0. Catch It If You Can
The Next Big Thing is Web 3.0. Catch It If You Can
 
We Create Digital Success Stories!
We Create Digital Success Stories!We Create Digital Success Stories!
We Create Digital Success Stories!
 
Mix Digital Marketing Agency Credentials
Mix Digital Marketing Agency CredentialsMix Digital Marketing Agency Credentials
Mix Digital Marketing Agency Credentials
 
TEN Creative Design Agency Creds
TEN Creative Design Agency CredsTEN Creative Design Agency Creds
TEN Creative Design Agency Creds
 
LEAP Agency Company Profile
LEAP Agency Company ProfileLEAP Agency Company Profile
LEAP Agency Company Profile
 

Similar to Angular js - the beginning

Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
Deepu S Nath
 
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
Tom Borger
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
jobinThomas54
 
Angular
AngularAngular
Angular
LearningTech
 
Angular
AngularAngular
Angular
LearningTech
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
Tricode (part of Dept)
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
cncwebworld
 
Angular js
Angular jsAngular js
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
Olga Lavrentieva
 
Angular js
Angular jsAngular js
Angular js
Baldeep Sohal
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
Caldera Labs
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
Santosh Kumar Kar
 
Angular JS Training Courses
Angular JS Training CoursesAngular JS Training Courses
Angular JS Training Courses
angularjstrainings
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
Tamer Solieman
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
أحمد عبد الوهاب
 

Similar to Angular js - the beginning (20)

Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
Angular js
Angular jsAngular js
Angular js
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
 
Angular
AngularAngular
Angular
 
Angular
AngularAngular
Angular
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
 
Angular js
Angular jsAngular js
Angular js
 
Angular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решенияAngular.js опыт использования, проблемы и решения
Angular.js опыт использования, проблемы и решения
 
Angular js
Angular jsAngular js
Angular js
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
 
Angular JS Training Courses
Angular JS Training CoursesAngular JS Training Courses
Angular JS Training Courses
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 

Recently uploaded

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 

Recently uploaded (20)

JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 

Angular js - the beginning

  • 2. Outline ● What is Angular ● Why Angular ● How Angular ● Angular world vs JQuery world ● Where to use ● Where not to use ● Why it is special
  • 3. What is Angular HTML enhanced for web apps!
  • 4. What is Angular A Javascript library that allows you to ● EXTEND the functionalities of HTML ● model-view view-model BINDING ● Segregate javascipt logic from HTML rendering ● Provides MVC framework for the messy javascript
  • 5. Why Angular EXTEND the functionalities of HTML HTML <input size="30" type="text" class="richtext"/> Angular way <input size="30" type="richtext"/>
  • 6. Why Angular WHY EXTEND the functionalities of HTML? ● HTML is not enough, we need ○ Rich text ○ Date picker ○ Iterator for dynamic contents ○ etc... ● HTML is build to show static data ○ Angular makes HTML dynamic
  • 7. Why Angular model-view view-model BINDING ● Any changes in javascript model will impact the HTML view ● Any changes in HTML view will impact the javascript model
  • 8. Why Angular model-view view-model BINDING HTML <input size="30" type="text" ng-model="checkIn. start_date"/> Javascript function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-13'}; }
  • 9. Why Angular Segregate javascipt logic from HTML rendering Advantage ● Helps to reuse logic as it is not coupled with HTML DOM ● Less coupling with the framework itself, as the library written with plain javascript.
  • 10. How Angular HTML <html> <head> <script src="angular.js"></script> </head> <body ng-app> {{checkIn.rooms_count}} </body> </html> ● Add angular js in the header ● Add ng-app in the body
  • 11. How Angular Javascript function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0}; } ● Define controller and binding data
  • 12. How Angular :: expression Javascript function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0}; } HTML {{checkIn.rooms_count}} ● Use {{}} to represent expression ● Anguler is forgiving for expression evaluation
  • 13. How Angular :: binding HTML <input ng-datepicker type="text" ng-model="checkIn.start_date"/> <input ng-datepicker type="text" ng-model="checkIn.end_date"/> <select ng-model="checkIn.night_counts"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ... </select> ● Use ng-model to bind with controller data
  • 14. How Angular :: binding Javascript function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-16 12:00 AM', end_date: '2013-02-17 12:00 AM', night_counts: 1}; } ● Define model data
  • 15. How Angular :: watching Javascript Observe changes with $watch function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-16 12:00 AM', end_date: '2013-02-17 12:00 AM', night_counts: 1}; $scope.$watch('checkIn.start_date + checkIn.end_date', function () { if (isValidMoment($scope.checkIn.start_date) && isValidMoment($scope.checkIn.end_date)) { $scope.updateNightCount(); } }); }
  • 16. Angular world vs JQuery world ● Accessing angular from jquery ● Accessing jquery from angular
  • 17. Accessing angular from jquery Dom generated by angular <div ng-controller="CheckInsCtrl" class="ng-scope"> .... </div> A scope is defined at the root element.
  • 18. Accessing angular from jquery Scope can be accessed as following, var scope = $(elem).scope(); But the elem should have the "ng-scope" class. Which denotes that there is a scope bound with that element.
  • 19. Accessing angular from jquery <div ng-controller="CheckInsCtrl" class="ng-scope"> .... </div> var scope = $($('[ng-controller="CheckInsCtrl"]')[0]). scope(); Root scope is defined at the root element.
  • 20. Accessing jquery from angular Angular can access dom by, ● Angular directives
  • 21. Where to use Angular ● Complex user end UI ○ Where you have a lot of dom event and dom manipulation ● One page application
  • 22. Where not to use Angular ● It is a overkill for simple application where you do not need a lot of client side logic
  • 23. Why it is special ● The target of angular is uniq ● It helps you to extend HTML ○ Add new attribute, element that the browser will understand ● It operates on dom, unlike other libraries that operates on template libraries(String based parsing) ● Can use a plain Javascript Hash for a model object, unlike EmberJs
  • 25. Author A.K.M. Ashrafuzzaman Lead Software Engineer, Tasawr Interactive www.ashrafuzzaman.com zmn.ashraf@gmail.com