SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS InternalEyal Vardi
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsRapidValue
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practicesHenry Tao
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introductionLuigi De Russis
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS DirectivesEyal Vardi
 
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
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS AnimationsEyal Vardi
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular jsAndrew Alpert
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationDan Wahlin
 
AngularJS introduction
AngularJS introductionAngularJS introduction
AngularJS introductionTania Gonzales
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IVisual Engineering
 

Tendances (20)

AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Angular js
Angular jsAngular js
Angular js
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
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.
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
 
AngularJS introduction
AngularJS introductionAngularJS introduction
AngularJS introduction
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 

En vedette

AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
History of JavaScript
History of JavaScriptHistory of JavaScript
History of JavaScriptRajat Saxena
 
Let your website a ride of AngularJS
Let your website a ride of AngularJSLet your website a ride of AngularJS
Let your website a ride of AngularJSMike Taylor
 
Spring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsugSpring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsugToshiaki Maki
 
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)Chris Richardson
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architectureGabriele Falace
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosphelypploch
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)🎤 Hanno Embregts 🎸
 

En vedette (14)

AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
History of JavaScript
History of JavaScriptHistory of JavaScript
History of JavaScript
 
AngularJS
AngularJSAngularJS
AngularJS
 
Java Script - Module I
Java Script - Module IJava Script - Module I
Java Script - Module I
 
Discover AngularJS
Discover AngularJSDiscover AngularJS
Discover AngularJS
 
Let your website a ride of AngularJS
Let your website a ride of AngularJSLet your website a ride of AngularJS
Let your website a ride of AngularJS
 
Spring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsugSpring Bootで変わる Javaアプリ開発! #jsug
Spring Bootで変わる Javaアプリ開発! #jsug
 
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)
Deploying Spring Boot applications with Docker (east bay cloud meetup dec 2014)
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architecture
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutos
 
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)Building a Spring Boot Application - Ask the Audience!  (from JavaLand 2017)
Building a Spring Boot Application - Ask the Audience! (from JavaLand 2017)
 

Similaire à 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
 
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
 
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
 

Similaire à 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
 
Angular js
Angular jsAngular js
Angular js
 
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
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
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
 
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
 
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
AngularJSAngularJS
AngularJS
 
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
 

Dernier

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
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
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
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
 
🐬 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
 
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
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
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
 
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
 

Dernier (20)

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
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?
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
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
 
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
 

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