SlideShare a Scribd company logo
ANGULARJS 101 
"Cause evrything is cool the ng-way" 
#GDG Blida #DEVFEST
#badjokes!
HOUSSEM YAHIAOUI 
AKA : EL-CODE 
Student & GDG Blida member 
& 
MEAN stack lover & AngularJS indoor speacker
PS: I'M NOT A PSYCHOPATH
FRIENDLY BUT DEADLY PERSON 
If you are || you know someone who like those stuff just call me at: 
+213 0 - what-ever !
AGENDA ! 
1. What is Angular ? 
2. What is a SPA 
3. Angularjs Anatomy : 
1. App vs module 
2. Services 
3. Controllers 
4. Factories 
5. Directives 
So Let's Rock in !
First of all : 
In order to make things even clearer !
WHAT IS ANGULARJS ? 
what about a History lesson !
Developed in 2009 By : Misko Hevery, publicly released in 
oct 2010 version : 0.9.0 and now we're in version 1.3.6
And his PM Said
AngularJS is : 
1. An intuitive framework that makes it easy to organize 
your code. 
2. An MV* framework : MVC / MVVM / MVP ... 
3. A two way data binding framework : a data 
synchronization method that let the value change in 
model and view side.
Me when i start to get along with Angularjs
SPA ! 
Question: 
What's that ?
Spa ! 
"Single-Page Applications (SPAs) are Web apps that load a 
Single HTML page and dynamically update that page as 
the user interacts with the app." 
Mike Wasson 
Or : 
"An awesome relatively new tech for awesome cool and 
UI/UX capable application that makes you feel like a JS guru 
and makes you looks good in public aka: "Khshine" 
Me
Another Question:
Why we don't use Jquery 
Jquery capabilites are framed in the DOM manipulation so 
the framework can't handle certain SPAs needed 
behaviours such as routing & role decaupling aka SOC ...
ANGULARJS ANATOMY !
NG APP ! 
App or Module ?
Simple RE : App = Module* 
& remember
The What ? 
Consider the module as your container, that container can 
have your application different parts : Controllers / Filters 
/ Services / Directives / Constants / Values / Interceptors 
...
THE HOW! 
Angularjs apps like many other framework have a View 
side and a Js files which attach to it and manage it so in 
order to have a fully working application we need the 
following:
In JS Side ! 
// in the app.js file or what ever you want to name it 
angular.module('application name', ['External modules / it's blank by default]); 
//or 
var app = angular.module('application name', []); 
// now we use the handled variable instead 
app. 
* 
* 
* 
*
In View Side ! 
Template / Index / Fragment ... * 
<html ng‐app="Application Name"> 
<head> 
<!‐‐ Something HERE ! ‐‐> 
</head> 
<body> 
<!‐‐ Something HERE ! ‐‐> 
</body>
ANGULARJS SERVICES 
Question in mind ! 
What's a service ? and why we Should use it ?
The What ? 
A substitutable objects that are wired together using DI. 
You can use services to organize and share code across 
your app 
From the angularjs.org site
Angular support two type of services: 
1. Core services: Are the ones shiped with angular outside of the box 
which mean that we can use them whenever we want. 
- A core service is prefixed by the : "$" sign like : $http / $q / $window ... 
2. Custom services: Are the ones that we write with and for angular to 
suite our special needs and also we can use them whenever we want.
AngularJS 101
Services in Angular have two different names and 
manners to code them, we have: 
1. Factories 
2. Services
So far we have a anything like a SPA 
Let's change it !
SPAs neat functionality is Routing 
Let's talk about that one
AngularJS services are a poviders of somehow they provide 
something when they called 
and because of that we have the Routing service 
represented in the officiel ngRoute module. or other the 
new awesome module the ui-router module. 
let's $digest that !
From our CodeLab Code
Let's analyse the code : 
1. $stateProvider != an Angularjs Service, it's a ui-router 
service 
2. the State represent a route a urlproperty in our 
queryString 
3. Each route need 4 main things : 
1. A Url 
2. A Name 
3. A Controller - we will talk about that in the next slide - 
4. A template : an html page that shows our needed info
WHATS IS A CONTROLLER! 
Angularjs controller is a javascript constructor function 
that is used to augment the Angular Scope 
From the angularjs.org site
The How ! 
// 1/2 ways to write controllers this way let you focus on 
// your javascript code and push the angular configuration away 
var Classy = function($scope){ 
$scope.name = "houssem"; 
}; 
// NG Associate the controller to the app in hand ! 
angular.module('app').controller('Class', Classy); 
Or 
// 2nd way to write your angurlarjs controller using the angularjs documented way 
angular.module('app').controller('Class', function($scope){ 
$scope.name = "houssem"; 
};
But wait there is something to consider 
"Optimisation"
So after minification 
We are goins to have the folowing 
var Class=function(s){s.name="houssem";}; 
angular.module('app').controller('Class', Classy); 
So one big mess of unreadable code 
+ 
Unkown ng arguments ! 
=
AngularJS 101
We Need a solution ! 
Dont fear "DI" is here ! 
But How? and Who it's gonna FIX the problem!
The How ! 
// 1/2 ways to write controllers this way let you focus on 
// your javascript code and push the angular configuration away 
var Classy = function($scope){ 
$scope.name = "houssem"; 
}; 
// 'DI' magic 
Classy.$inject = ['$scope']; 
// NG Associate the controller to the app in hand ! 
angular.module('app').controller('Class', Classy); 
so after minification we're going to have the following 
var Classy=function(s){s.name="houssem";};Classy.$inject=['$scope']; 
angular.module('app').controller('Class', Classy); 
The result : Same mess with correct output and a happy 
console
WHATS IS A FACTORY! 
Problimatic : The Web need DATA 
As a solution: 
AngularJS factory can help us getting the requiried informations in order to 
use it in data needed places.
The Factory syntax ! 
// 1/2 ways to write factories this way let you focus on 
// your javascript code and push the angular configuration away 
var ClassyFactory = function($http){ 
return { 
getGDGBlidaMembers : function(year){ 
return $http.get('/DATA ENDPOINT ROUTE/'+year); 
} 
}; 
// DI 
ClassyFactory.$inject = ['$http']; 
// NG Associate the factory to the app in hand ! 
angular.module('app').factory('ClassyFactory', ClassyFactory); 
PS : we're using the revealing pattern ;-)
But : you may say the following :
Now we have the needed data, let's use it ! 
But How ?
Simply declare it as dependency in your Controller 
var Classy = function($scope, ClassyFacotry, INotify){ 
ClassyFactory.getGDGBlidaMembers(2014) 
.success(response) { 
$scope.data = response.members; 
INotify.onSuccess('Data Gathring', 'Done with success !'); 
}.error(response){ 
INotify.onError('An error has occured', response.err_message + ' !'); 
} 
}); 
}; 
//DI 
Classy.$inject = ['$scope', 'ClassyFacotry', 'INotify']; 
// NG Associate the controller to the app in hand ! 
angular.module('app').controller('Class', Classy); 
Your now well covered ! 
Display It ^_^
WHATS IS A DIRECTIVE ! 
For me a Directive is 
HTML5 ++
But What's exactly i a Directive? 
A directive is a new concept introduced in Angularjs, and 
used to : 
1. To give our Page / Template / View a new set of functionnality. 
2. Let us handle our JS logic without extra work. 
3. Best part is : Angularjs let and gives you the power of creating 
new directives to suit our needs.
That's looks promising but how Exactly it works ? 
1. Consider the directive as : your regular HTML5 markup 
Attribute. 
<input type="text" name="email" awesome‐attrib‐directive="info" required="true"> 
2. Consider the directive as : your new regular HTML5 
markup Tag. 
<gdg‐awesome required="true"></gdg‐awesome> 
3. Or Both ! 
<gdg‐awesome grpe‐name="GDG" grpe‐loc="Blida"></gdg‐awesome>
Angular is already have a really cool set of core directives 
And more ...
That was it ! / Keep in touch with me ! 
G+ : +HoussemYahiaoui 
Twittre : @free_g33k 
Facebook : fcb.com/houssem.intern0t 
#peace

More Related Content

What's hot

Get satrted angular js
Get satrted angular jsGet satrted angular js
Get satrted angular js
Alexandre Marreiros
 
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
Armin Vieweg
 
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
 
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page ApplicationAngular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
Edureka!
 
AngularJS interview questions
AngularJS interview questionsAngularJS interview questions
AngularJS interview questions
Uri Lukach
 
Modules in AngularJs
Modules in AngularJsModules in AngularJs
Modules in AngularJs
K Arunkumar
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answers
Anil Singh
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Aldo Pizzagalli
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
Brajesh Yadav
 
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreBeyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
Ari Lerner
 
Angular Js
Angular JsAngular Js
Angular Js
Knoldus Inc.
 
AngularJS
AngularJSAngularJS
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
Riccardo Masetti
 
Introduction to AngularJS Framework
Introduction to AngularJS FrameworkIntroduction to AngularJS Framework
Introduction to AngularJS Framework
Raveendra R
 
Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3
성일 한
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
Vladimir Georgiev
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project Report
Kodexhub
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
Matteo Scandolo
 
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
Brajesh Yadav
 

What's hot (20)

Get satrted angular js
Get satrted angular jsGet satrted angular js
Get satrted angular js
 
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 - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
 
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page ApplicationAngular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
 
AngularJS interview questions
AngularJS interview questionsAngularJS interview questions
AngularJS interview questions
 
Modules in AngularJs
Modules in AngularJsModules in AngularJs
Modules in AngularJs
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answers
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreBeyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
 
Angular Js
Angular JsAngular Js
Angular Js
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
Introduction to AngularJS Framework
Introduction to AngularJS FrameworkIntroduction to AngularJS Framework
Introduction to AngularJS Framework
 
Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3Ionic으로 모바일앱 만들기 #3
Ionic으로 모바일앱 만들기 #3
 
Angular 2 - Better or worse
Angular 2 - Better or worseAngular 2 - Better or worse
Angular 2 - Better or worse
 
Angular Project Report
 Angular Project Report Angular Project Report
Angular Project Report
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practice
 
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
 

Viewers also liked

AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UXAngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
JWORKS powered by Ordina
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal Vardi
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architecture
Gabriele Falace
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
Sergey Bolshchikov
 
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
Stéphane Bégaudeau
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
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
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 

Viewers also liked (9)

AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UXAngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architecture
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
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
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
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)
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 

Similar to AngularJS 101

AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
kannikadg
 
AngularJS
AngularJS AngularJS
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
Aishura Aishu
 
Angular js
Angular jsAngular js
Mobile phone future angular js
Mobile phone future angular jsMobile phone future angular js
Mobile phone future angular js
atanacy
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJS
Gregor Woiwode
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
Katy Slemon
 
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
telegramvip
 
SF Cordova Meetup
SF Cordova MeetupSF Cordova Meetup
SF Cordova Meetup
Andreas Argelius
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
Ravindra K
 
Start your journey with angular | Basic Angular
Start your journey with angular | Basic AngularStart your journey with angular | Basic Angular
Start your journey with angular | Basic Angular
Anwarul Islam
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdf
JohnLeo57
 
Angular
AngularAngular
A Big Picture Of AngularJS
A Big Picture Of AngularJSA Big Picture Of AngularJS
A Big Picture Of AngularJS
Nitin Pandit
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
Eugene Fidelin
 

Similar to AngularJS 101 (20)

AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
 
AngularJS
AngularJS AngularJS
AngularJS
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 
Angular js
Angular jsAngular js
Angular js
 
Mobile phone future angular js
Mobile phone future angular jsMobile phone future angular js
Mobile phone future angular js
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
 
A gently introduction to AngularJS
A gently introduction to AngularJSA gently introduction to AngularJS
A gently introduction to AngularJS
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
angularjs_tutorial.docx
angularjs_tutorial.docxangularjs_tutorial.docx
angularjs_tutorial.docx
 
SF Cordova Meetup
SF Cordova MeetupSF Cordova Meetup
SF Cordova Meetup
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
 
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
 
Start your journey with angular | Basic Angular
Start your journey with angular | Basic AngularStart your journey with angular | Basic Angular
Start your journey with angular | Basic Angular
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdf
 
Angular
AngularAngular
Angular
 
A Big Picture Of AngularJS
A Big Picture Of AngularJSA Big Picture Of AngularJS
A Big Picture Of AngularJS
 
AngularJS in practice
AngularJS in practiceAngularJS in practice
AngularJS in practice
 

Recently uploaded

Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
Priyanka Aash
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
Zilliz
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
Enterprise Knowledge
 
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
OnBoard
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 

Recently uploaded (20)

Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 
The History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal EmbeddingsThe History of Embeddings & Multimodal Embeddings
The History of Embeddings & Multimodal Embeddings
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Improving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning ContentImproving Learning Content Efficiency with Reusable Learning Content
Improving Learning Content Efficiency with Reusable Learning Content
 
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 

AngularJS 101

  • 1. ANGULARJS 101 "Cause evrything is cool the ng-way" #GDG Blida #DEVFEST
  • 3. HOUSSEM YAHIAOUI AKA : EL-CODE Student & GDG Blida member & MEAN stack lover & AngularJS indoor speacker
  • 4. PS: I'M NOT A PSYCHOPATH
  • 5. FRIENDLY BUT DEADLY PERSON If you are || you know someone who like those stuff just call me at: +213 0 - what-ever !
  • 6. AGENDA ! 1. What is Angular ? 2. What is a SPA 3. Angularjs Anatomy : 1. App vs module 2. Services 3. Controllers 4. Factories 5. Directives So Let's Rock in !
  • 7. First of all : In order to make things even clearer !
  • 8. WHAT IS ANGULARJS ? what about a History lesson !
  • 9. Developed in 2009 By : Misko Hevery, publicly released in oct 2010 version : 0.9.0 and now we're in version 1.3.6
  • 10. And his PM Said
  • 11. AngularJS is : 1. An intuitive framework that makes it easy to organize your code. 2. An MV* framework : MVC / MVVM / MVP ... 3. A two way data binding framework : a data synchronization method that let the value change in model and view side.
  • 12. Me when i start to get along with Angularjs
  • 13. SPA ! Question: What's that ?
  • 14. Spa ! "Single-Page Applications (SPAs) are Web apps that load a Single HTML page and dynamically update that page as the user interacts with the app." Mike Wasson Or : "An awesome relatively new tech for awesome cool and UI/UX capable application that makes you feel like a JS guru and makes you looks good in public aka: "Khshine" Me
  • 16. Why we don't use Jquery Jquery capabilites are framed in the DOM manipulation so the framework can't handle certain SPAs needed behaviours such as routing & role decaupling aka SOC ...
  • 18. NG APP ! App or Module ?
  • 19. Simple RE : App = Module* & remember
  • 20. The What ? Consider the module as your container, that container can have your application different parts : Controllers / Filters / Services / Directives / Constants / Values / Interceptors ...
  • 21. THE HOW! Angularjs apps like many other framework have a View side and a Js files which attach to it and manage it so in order to have a fully working application we need the following:
  • 22. In JS Side ! // in the app.js file or what ever you want to name it angular.module('application name', ['External modules / it's blank by default]); //or var app = angular.module('application name', []); // now we use the handled variable instead app. * * * *
  • 23. In View Side ! Template / Index / Fragment ... * <html ng‐app="Application Name"> <head> <!‐‐ Something HERE ! ‐‐> </head> <body> <!‐‐ Something HERE ! ‐‐> </body>
  • 24. ANGULARJS SERVICES Question in mind ! What's a service ? and why we Should use it ?
  • 25. The What ? A substitutable objects that are wired together using DI. You can use services to organize and share code across your app From the angularjs.org site
  • 26. Angular support two type of services: 1. Core services: Are the ones shiped with angular outside of the box which mean that we can use them whenever we want. - A core service is prefixed by the : "$" sign like : $http / $q / $window ... 2. Custom services: Are the ones that we write with and for angular to suite our special needs and also we can use them whenever we want.
  • 28. Services in Angular have two different names and manners to code them, we have: 1. Factories 2. Services
  • 29. So far we have a anything like a SPA Let's change it !
  • 30. SPAs neat functionality is Routing Let's talk about that one
  • 31. AngularJS services are a poviders of somehow they provide something when they called and because of that we have the Routing service represented in the officiel ngRoute module. or other the new awesome module the ui-router module. let's $digest that !
  • 33. Let's analyse the code : 1. $stateProvider != an Angularjs Service, it's a ui-router service 2. the State represent a route a urlproperty in our queryString 3. Each route need 4 main things : 1. A Url 2. A Name 3. A Controller - we will talk about that in the next slide - 4. A template : an html page that shows our needed info
  • 34. WHATS IS A CONTROLLER! Angularjs controller is a javascript constructor function that is used to augment the Angular Scope From the angularjs.org site
  • 35. The How ! // 1/2 ways to write controllers this way let you focus on // your javascript code and push the angular configuration away var Classy = function($scope){ $scope.name = "houssem"; }; // NG Associate the controller to the app in hand ! angular.module('app').controller('Class', Classy); Or // 2nd way to write your angurlarjs controller using the angularjs documented way angular.module('app').controller('Class', function($scope){ $scope.name = "houssem"; };
  • 36. But wait there is something to consider "Optimisation"
  • 37. So after minification We are goins to have the folowing var Class=function(s){s.name="houssem";}; angular.module('app').controller('Class', Classy); So one big mess of unreadable code + Unkown ng arguments ! =
  • 39. We Need a solution ! Dont fear "DI" is here ! But How? and Who it's gonna FIX the problem!
  • 40. The How ! // 1/2 ways to write controllers this way let you focus on // your javascript code and push the angular configuration away var Classy = function($scope){ $scope.name = "houssem"; }; // 'DI' magic Classy.$inject = ['$scope']; // NG Associate the controller to the app in hand ! angular.module('app').controller('Class', Classy); so after minification we're going to have the following var Classy=function(s){s.name="houssem";};Classy.$inject=['$scope']; angular.module('app').controller('Class', Classy); The result : Same mess with correct output and a happy console
  • 41. WHATS IS A FACTORY! Problimatic : The Web need DATA As a solution: AngularJS factory can help us getting the requiried informations in order to use it in data needed places.
  • 42. The Factory syntax ! // 1/2 ways to write factories this way let you focus on // your javascript code and push the angular configuration away var ClassyFactory = function($http){ return { getGDGBlidaMembers : function(year){ return $http.get('/DATA ENDPOINT ROUTE/'+year); } }; // DI ClassyFactory.$inject = ['$http']; // NG Associate the factory to the app in hand ! angular.module('app').factory('ClassyFactory', ClassyFactory); PS : we're using the revealing pattern ;-)
  • 43. But : you may say the following :
  • 44. Now we have the needed data, let's use it ! But How ?
  • 45. Simply declare it as dependency in your Controller var Classy = function($scope, ClassyFacotry, INotify){ ClassyFactory.getGDGBlidaMembers(2014) .success(response) { $scope.data = response.members; INotify.onSuccess('Data Gathring', 'Done with success !'); }.error(response){ INotify.onError('An error has occured', response.err_message + ' !'); } }); }; //DI Classy.$inject = ['$scope', 'ClassyFacotry', 'INotify']; // NG Associate the controller to the app in hand ! angular.module('app').controller('Class', Classy); Your now well covered ! Display It ^_^
  • 46. WHATS IS A DIRECTIVE ! For me a Directive is HTML5 ++
  • 47. But What's exactly i a Directive? A directive is a new concept introduced in Angularjs, and used to : 1. To give our Page / Template / View a new set of functionnality. 2. Let us handle our JS logic without extra work. 3. Best part is : Angularjs let and gives you the power of creating new directives to suit our needs.
  • 48. That's looks promising but how Exactly it works ? 1. Consider the directive as : your regular HTML5 markup Attribute. <input type="text" name="email" awesome‐attrib‐directive="info" required="true"> 2. Consider the directive as : your new regular HTML5 markup Tag. <gdg‐awesome required="true"></gdg‐awesome> 3. Or Both ! <gdg‐awesome grpe‐name="GDG" grpe‐loc="Blida"></gdg‐awesome>
  • 49. Angular is already have a really cool set of core directives And more ...
  • 50. That was it ! / Keep in touch with me ! G+ : +HoussemYahiaoui Twittre : @free_g33k Facebook : fcb.com/houssem.intern0t #peace