SlideShare a Scribd company logo
1 of 29
Download to read offline
1
AngularJS - CloudVis Technology
AngularJS Framework
Tăng Phú
phutang@cloudvis.vn
Technical Leader @ CloudVis Technology
2
AngularJS - CloudVis Technology
Agenda
Introduction to AngularJS
Anatomy of an AngularJS application
Communicating with Servers
Custom Directives (advanced)
3
AngularJS - CloudVis Technology
Introduction to AngularJS
Angular Team @ Google
4
AngularJS - CloudVis Technology
Introduction to AngularJS
Experiences from building large web applications
like Gmail, Maps, Canlendar …
Open Source Javascript Framework
Use
MVC architecture
Data binding
Client side templates
Dependency injection
5
AngularJS - CloudVis Technology
Introduction to AngularJS
hello-world.html
hello_controller.js
6
AngularJS - CloudVis Technology
Introduction to AngularJS
Result Hello, World
A few interesting things
Bind with no classes, no IDs in HTML
No register events
hello_controller.js is plain JavaScript class
Auto inject $scope
Auto init HelloController
7
AngularJS - CloudVis Technology
Introduction to AngularJS
Data Binding
8
AngularJS - CloudVis Technology
Introduction to AngularJS
Result
Type: Hi
9
AngularJS - CloudVis Technology
Anatomy of an AngularJS application
Structure – Basic workflow
10
AngularJS - CloudVis Technology
Anatomy of an AngularJS application
● Line 2: define a part of DOM which is managed by Angular
● Line 5, 6: import library and your code
● Line 9: define scope (what's scope?) and bind with
HelloController, ng-controller attribute
● Line 10: define data with ng-model attribute
● Line 11: display text with {{ }}
● Line 12: behavior with ng-click attribute
11
AngularJS - CloudVis Technology
Basic startup flow
User requests a first page
Load a index.html page with template
Wait for the page fullly loaded, and looks ng-app
Scan binding and directives (what's directive?)
Connect to server to load additional data (call ajax to get
data)
12
AngularJS - CloudVis Technology
Basic startup flow
Images from http://docs.angularjs.org/guide/concepts
13
AngularJS - CloudVis Technology
What's Directive?
Kinds of Directive
E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->
Built-in Directive
ng-app (A)
ng-controller (A, C)
ng-model (A, C)
ng-change (E, A)
ng-click (A, C)
ng-repeat (A, C)
….
Ref: http://docs.angularjs.org/api/
14
AngularJS - CloudVis Technology
Directive Example
<p ng-bind="greeting"></p>
<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>
<form ng-submit="requestFunding()"
ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="startingEstimate">
Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
15
AngularJS - CloudVis Technology
What's Scope?
Scope as Data-Model
The glue between application controller and the view
Both controllers and directives have reference to the scope,
but not to each other.
16
AngularJS - CloudVis Technology
What's Controller?
A controller is a JavaScript function that is used to augment
instances of angular Scope
Use controllers to
Set up the initial state of a scope object.
Add behavior to the scope object.
17
AngularJS - CloudVis Technology
What's View?
To generate the View (render a DOM), AngularJS gathers
information from Template, applies Controller functions, link
Model properties
18
AngularJS - CloudVis Technology
Integration
19
AngularJS - CloudVis Technology
Data Binding
In the Angular implementation of MVC, the view has
knowledge of both the model and the controller.
The view knows about the model where two-way data-binding
occurs
Images from http://docs.angularjs.org/guide/dev_guide.templates.databinding
Classical Template Systems Angular Templates
20
AngularJS - CloudVis Technology
Communicating with Servers
21
AngularJS - CloudVis Technology
Communicating with Servers
AngularJS support
$http
General usage
Shortcut methods
$http.get() $http.head() $http.post() $http.put()
$http.delete() $http.jsonp()
22
AngularJS - CloudVis Technology
Communicating with Servers
$resource (Dependencies on $http)
23
AngularJS - CloudVis Technology
Communicating with Servers
var data = Data.get({id:123}, function() {
data.isDefault = true;
data.$save();
});
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
$resource (Dependencies on $http)
24
AngularJS - CloudVis Technology
Custom Directives (advanced)
E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->
25
AngularJS - CloudVis Technology
Writing directives
26
AngularJS - CloudVis Technology
Wrapper DataTables
DataTables
(plug-in for jQuery)
27
AngularJS - CloudVis Technology
Wrapper DataTables
DataTables (plug-in for jQuery)
Import DataTables jQuery
<script
type="text/javascript"
src="jquery.dataTables.js">
</script>
In Template
<cv-table
ajax-url="/data/users"
page-size="50">
</cv-table>
28
AngularJS - CloudVis Technology
References
http://angularjs.org/
Ebook: AngularJS, Oreilly, Apr 2013
29
AngularJS - CloudVis Technology
Thank you

More Related Content

What's hot

The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS OrisysIndia
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practiceMatteo Scandolo
 
Starting an AngularJS Project with Visual Studio
Starting an AngularJS Project with Visual StudioStarting an AngularJS Project with Visual Studio
Starting an AngularJS Project with Visual StudioIran Reyes Fleitas
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile appYvonne Yu
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSparkhound Inc.
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014Matt Raible
 
Introduction to Android Programming
Introduction to Android ProgrammingIntroduction to Android Programming
Introduction to Android ProgrammingRaveendra R
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSDavid Parsons
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSArmin Vieweg
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slidessamhelman
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tipsNir Kaufman
 
Angular Best Practices v2
Angular Best Practices v2Angular Best Practices v2
Angular Best Practices v2Henry Tao
 

What's hot (19)

The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
 
Starting an AngularJS Project with Visual Studio
Starting an AngularJS Project with Visual StudioStarting an AngularJS Project with Visual Studio
Starting an AngularJS Project with Visual Studio
 
An Intro to AngularJS
An Intro to AngularJSAn Intro to AngularJS
An Intro to AngularJS
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile app
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
 
Introduction to Android Programming
Introduction to Android ProgrammingIntroduction to Android Programming
Introduction to Android Programming
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
AngularJS
AngularJSAngularJS
AngularJS
 
AngularJS
AngularJSAngularJS
AngularJS
 
Custom directive and scopes
Custom directive and scopesCustom directive and scopes
Custom directive and scopes
 
Angular Seminar-js
Angular Seminar-jsAngular Seminar-js
Angular Seminar-js
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tips
 
Angular Best Practices v2
Angular Best Practices v2Angular Best Practices v2
Angular Best Practices v2
 

Similar to AngularJS Framework

Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaBharat Makwana
 
Getting Started with AngularJS
Getting Started with AngularJSGetting Started with AngularJS
Getting Started with AngularJSEdureka!
 
Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJSEdureka!
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsMaurice De Beijer [MVP]
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for BeginnersEdureka!
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSShyjal Raazi
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular jsMindfire Solutions
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to AngularjsGaurav Agrawal
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIEric Wise
 
AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkEdureka!
 

Similar to AngularJS Framework (20)

AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
Angular js
Angular jsAngular js
Angular js
 
Introduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat MakwanaIntroduction to AngularJS By Bharat Makwana
Introduction to AngularJS By Bharat Makwana
 
Getting Started with AngularJS
Getting Started with AngularJSGetting Started with AngularJS
Getting Started with AngularJS
 
Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJS
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js TutorialsKalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 
AngularJS
AngularJS AngularJS
AngularJS
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
AngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPIAngularJS Fundamentals + WebAPI
AngularJS Fundamentals + WebAPI
 
Angular JS
Angular JSAngular JS
Angular JS
 
AngularJs
AngularJsAngularJs
AngularJs
 
Angular js slides
Angular js slidesAngular js slides
Angular js slides
 
AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW Framework
 
Angular js
Angular jsAngular js
Angular js
 

More from Barcamp Saigon

7 secrets to be a product manager
7 secrets to be a product manager7 secrets to be a product manager
7 secrets to be a product managerBarcamp Saigon
 
Apolopa Vietnam Introduction and Recruitment
Apolopa Vietnam Introduction and RecruitmentApolopa Vietnam Introduction and Recruitment
Apolopa Vietnam Introduction and RecruitmentBarcamp Saigon
 
Stream upload and asynchronous job processing in large scale systems
Stream upload and asynchronous job processing  in large scale systemsStream upload and asynchronous job processing  in large scale systems
Stream upload and asynchronous job processing in large scale systemsBarcamp Saigon
 
AWS: How to deploy and scale your web application in the cloud
AWS: How to deploy and scale your web application in the cloudAWS: How to deploy and scale your web application in the cloud
AWS: How to deploy and scale your web application in the cloudBarcamp Saigon
 
Erlang web framework: Chicago boss
Erlang web framework: Chicago bossErlang web framework: Chicago boss
Erlang web framework: Chicago bossBarcamp Saigon
 
High Availability - How to get 99.99% service availabilty - Designing cluster...
High Availability - How to get 99.99% service availabilty - Designing cluster...High Availability - How to get 99.99% service availabilty - Designing cluster...
High Availability - How to get 99.99% service availabilty - Designing cluster...Barcamp Saigon
 
Nokia Asha Developer Opportunity
Nokia Asha Developer Opportunity Nokia Asha Developer Opportunity
Nokia Asha Developer Opportunity Barcamp Saigon
 
Data Analytics for Mobile App Development
Data Analytics for Mobile App DevelopmentData Analytics for Mobile App Development
Data Analytics for Mobile App DevelopmentBarcamp Saigon
 
Zero cost serverless Real time web app
Zero cost serverless Real time web appZero cost serverless Real time web app
Zero cost serverless Real time web appBarcamp Saigon
 
4Smart - Control everything in your house
4Smart - Control everything in your house4Smart - Control everything in your house
4Smart - Control everything in your houseBarcamp Saigon
 
How to transfer a big file
How to transfer a big file How to transfer a big file
How to transfer a big file Barcamp Saigon
 
Những khó khăn của một startup "Sinh viên"
Những khó khăn của một startup "Sinh viên"Những khó khăn của một startup "Sinh viên"
Những khó khăn của một startup "Sinh viên"Barcamp Saigon
 

More from Barcamp Saigon (14)

7 secrets to be a product manager
7 secrets to be a product manager7 secrets to be a product manager
7 secrets to be a product manager
 
Apolopa Vietnam Introduction and Recruitment
Apolopa Vietnam Introduction and RecruitmentApolopa Vietnam Introduction and Recruitment
Apolopa Vietnam Introduction and Recruitment
 
Stream upload and asynchronous job processing in large scale systems
Stream upload and asynchronous job processing  in large scale systemsStream upload and asynchronous job processing  in large scale systems
Stream upload and asynchronous job processing in large scale systems
 
AWS: How to deploy and scale your web application in the cloud
AWS: How to deploy and scale your web application in the cloudAWS: How to deploy and scale your web application in the cloud
AWS: How to deploy and scale your web application in the cloud
 
Erlang web framework: Chicago boss
Erlang web framework: Chicago bossErlang web framework: Chicago boss
Erlang web framework: Chicago boss
 
Thiền định
Thiền địnhThiền định
Thiền định
 
High Availability - How to get 99.99% service availabilty - Designing cluster...
High Availability - How to get 99.99% service availabilty - Designing cluster...High Availability - How to get 99.99% service availabilty - Designing cluster...
High Availability - How to get 99.99% service availabilty - Designing cluster...
 
Nokia Asha Developer Opportunity
Nokia Asha Developer Opportunity Nokia Asha Developer Opportunity
Nokia Asha Developer Opportunity
 
Data Analytics for Mobile App Development
Data Analytics for Mobile App DevelopmentData Analytics for Mobile App Development
Data Analytics for Mobile App Development
 
Zero cost serverless Real time web app
Zero cost serverless Real time web appZero cost serverless Real time web app
Zero cost serverless Real time web app
 
4Smart - Control everything in your house
4Smart - Control everything in your house4Smart - Control everything in your house
4Smart - Control everything in your house
 
How to transfer a big file
How to transfer a big file How to transfer a big file
How to transfer a big file
 
Những khó khăn của một startup "Sinh viên"
Những khó khăn của một startup "Sinh viên"Những khó khăn của một startup "Sinh viên"
Những khó khăn của một startup "Sinh viên"
 
Students gone Google
Students gone GoogleStudents gone Google
Students gone Google
 

Recently uploaded

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Recently uploaded (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

AngularJS Framework

  • 1. 1 AngularJS - CloudVis Technology AngularJS Framework Tăng Phú phutang@cloudvis.vn Technical Leader @ CloudVis Technology
  • 2. 2 AngularJS - CloudVis Technology Agenda Introduction to AngularJS Anatomy of an AngularJS application Communicating with Servers Custom Directives (advanced)
  • 3. 3 AngularJS - CloudVis Technology Introduction to AngularJS Angular Team @ Google
  • 4. 4 AngularJS - CloudVis Technology Introduction to AngularJS Experiences from building large web applications like Gmail, Maps, Canlendar … Open Source Javascript Framework Use MVC architecture Data binding Client side templates Dependency injection
  • 5. 5 AngularJS - CloudVis Technology Introduction to AngularJS hello-world.html hello_controller.js
  • 6. 6 AngularJS - CloudVis Technology Introduction to AngularJS Result Hello, World A few interesting things Bind with no classes, no IDs in HTML No register events hello_controller.js is plain JavaScript class Auto inject $scope Auto init HelloController
  • 7. 7 AngularJS - CloudVis Technology Introduction to AngularJS Data Binding
  • 8. 8 AngularJS - CloudVis Technology Introduction to AngularJS Result Type: Hi
  • 9. 9 AngularJS - CloudVis Technology Anatomy of an AngularJS application Structure – Basic workflow
  • 10. 10 AngularJS - CloudVis Technology Anatomy of an AngularJS application ● Line 2: define a part of DOM which is managed by Angular ● Line 5, 6: import library and your code ● Line 9: define scope (what's scope?) and bind with HelloController, ng-controller attribute ● Line 10: define data with ng-model attribute ● Line 11: display text with {{ }} ● Line 12: behavior with ng-click attribute
  • 11. 11 AngularJS - CloudVis Technology Basic startup flow User requests a first page Load a index.html page with template Wait for the page fullly loaded, and looks ng-app Scan binding and directives (what's directive?) Connect to server to load additional data (call ajax to get data)
  • 12. 12 AngularJS - CloudVis Technology Basic startup flow Images from http://docs.angularjs.org/guide/concepts
  • 13. 13 AngularJS - CloudVis Technology What's Directive? Kinds of Directive E - Element name: <my-directive></my-directive> A - Attribute: <div my-directive="exp"> </div> C - Class: <div class="my-directive: exp;"></div> M - Comment: <!-- directive: my-directive exp --> Built-in Directive ng-app (A) ng-controller (A, C) ng-model (A, C) ng-change (E, A) ng-click (A, C) ng-repeat (A, C) …. Ref: http://docs.angularjs.org/api/
  • 14. 14 AngularJS - CloudVis Technology Directive Example <p ng-bind="greeting"></p> <form ng-controller="SomeController"> <input type="checkbox" ng-model="youCheckedIt"> </form> <form ng-submit="requestFunding()" ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate"> Recommendation: {{needed}} <button>Fund my startup!</button> <button ng-click="reset()">Reset</button> </form>
  • 15. 15 AngularJS - CloudVis Technology What's Scope? Scope as Data-Model The glue between application controller and the view Both controllers and directives have reference to the scope, but not to each other.
  • 16. 16 AngularJS - CloudVis Technology What's Controller? A controller is a JavaScript function that is used to augment instances of angular Scope Use controllers to Set up the initial state of a scope object. Add behavior to the scope object.
  • 17. 17 AngularJS - CloudVis Technology What's View? To generate the View (render a DOM), AngularJS gathers information from Template, applies Controller functions, link Model properties
  • 18. 18 AngularJS - CloudVis Technology Integration
  • 19. 19 AngularJS - CloudVis Technology Data Binding In the Angular implementation of MVC, the view has knowledge of both the model and the controller. The view knows about the model where two-way data-binding occurs Images from http://docs.angularjs.org/guide/dev_guide.templates.databinding Classical Template Systems Angular Templates
  • 20. 20 AngularJS - CloudVis Technology Communicating with Servers
  • 21. 21 AngularJS - CloudVis Technology Communicating with Servers AngularJS support $http General usage Shortcut methods $http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()
  • 22. 22 AngularJS - CloudVis Technology Communicating with Servers $resource (Dependencies on $http)
  • 23. 23 AngularJS - CloudVis Technology Communicating with Servers var data = Data.get({id:123}, function() { data.isDefault = true; data.$save(); }); { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} }; $resource (Dependencies on $http)
  • 24. 24 AngularJS - CloudVis Technology Custom Directives (advanced) E - Element name: <my-directive></my-directive> A - Attribute: <div my-directive="exp"> </div> C - Class: <div class="my-directive: exp;"></div> M - Comment: <!-- directive: my-directive exp -->
  • 25. 25 AngularJS - CloudVis Technology Writing directives
  • 26. 26 AngularJS - CloudVis Technology Wrapper DataTables DataTables (plug-in for jQuery)
  • 27. 27 AngularJS - CloudVis Technology Wrapper DataTables DataTables (plug-in for jQuery) Import DataTables jQuery <script type="text/javascript" src="jquery.dataTables.js"> </script> In Template <cv-table ajax-url="/data/users" page-size="50"> </cv-table>
  • 28. 28 AngularJS - CloudVis Technology References http://angularjs.org/ Ebook: AngularJS, Oreilly, Apr 2013
  • 29. 29 AngularJS - CloudVis Technology Thank you