SlideShare uma empresa Scribd logo
1 de 20
AngularJS
By: Omnia Gamal
email :- omnia.gamal1988@gmail.com
twitter @Omnia_G
Agenda
● What is AngularJS ?
● Why Angular?
● Angular Vs Backbone
● Getting Started With AngularJS
What is AngularJS ?
● is an open-source MVC framework
● single-page applications
● maintained by Google
Why AngularJS ?
● helps you organize your JavaScript
● helps create responsive (as in fast)
websites.
● plays well with jQuery
● is easy to test
Angular Vs Backbone
keys:
o size (BB 18kb vs angular 77kb but … )
o memory management
o nested model
o binging (angular is better than why?)
o RESTFUL ( angular will need ngResource )
o Validation
o Template Support
Getting Started With AngularJS
Agenda:
o Directives
o Modules
o Expressions
o Controllers
o Model
o Filters
o Create Directives
o services
o Unit Testing
Directives
Ex:-
● ng-app
● ng-controller
● ng-show
● ng-hide
● ng-repeat
● ng-model
Modules
angular.module('readingListApp', [])
<html ng-app="readingListApp" ></html>
Expressions
Controllers & Model
Filters
Create Directives
● restrict
● templeate or templateUrl
● scope (Isolated Scope & Binding)
● controller
● controllerAs
Services
● $http
● injector (if you want to read more about dependency injection in JS
http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
Code Example
Unit Testing
● Karma :- (previously known as Testacular)
o is Google’s JavaScript test runner
o the natural choice for AngularJS
o it is also test framework agnostic (What that mean?)
● Jasmine :- (is the best choise for many and It will be
our choice for testing now)
o Its syntax is quite similar to that of RSpec
● Bower :-
o is a package manager that helps you find and install
all your application dependencies
o It runs over git, much like Rails bundler
● Yeoman :-
o is a toolset containing 3 core components:
i. Grunt
ii. Bower
iii. the scaffolding tool Yo
o Yo generates boilerplate code with the help of
generators and automatically configures Grunt and
Bower for your project. You can find generators for
almost any JavaScript framework (Angular,
Backbone, Ember, etc.)
o generator-angular
Angular Mock
● angular.mock
o module
o inject
o services
 $controller
 $rootScope
 $httpBackend
Ref :-
● Code :- https://github.com/OmniaGM/learn_AngularJS
● AngularJS screencasts hosted by John Lindquist, JetBrains Evangelist +
Productivity addict.
● codeschool - shaping up with angularJS
● Your First AngularJS App : Scaffolding, Building, and Testing
● Why AngularJS is generally better in Angular vs Ember vs backbone

Mais conteúdo relacionado

Mais procurados

Angular Best Practices v2
Angular Best Practices v2Angular Best Practices v2
Angular Best Practices v2Henry Tao
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??Laurent Duveau
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + Reactjustvamp
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpackRich Snapp
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2Ron Heft
 
Bhuvi ppt zerobug
Bhuvi ppt zerobugBhuvi ppt zerobug
Bhuvi ppt zerobugBhuviS3
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready Nir Kaufman
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIJim Lynch
 
Angular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code levelAngular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code levelAnuradha Bandara
 
AzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин
AzovDevMeetup 2016 | Angular 2: обзор | Александр ШевнинAzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин
AzovDevMeetup 2016 | Angular 2: обзор | Александр ШевнинJSC “Arcadia Inc”
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6Nir Kaufman
 
Angular CLI : HelloWorld
Angular CLI : HelloWorldAngular CLI : HelloWorld
Angular CLI : HelloWorldnikspatel007
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Develcz
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDevelcz
 
Introduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTIntroduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTWaqqas Jabbar
 

Mais procurados (20)

Angular Best Practices v2
Angular Best Practices v2Angular Best Practices v2
Angular Best Practices v2
 
Angular2
Angular2Angular2
Angular2
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + React
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
 
Bhuvi ppt zerobug
Bhuvi ppt zerobugBhuvi ppt zerobug
Bhuvi ppt zerobug
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
Angular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code levelAngular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code level
 
AzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин
AzovDevMeetup 2016 | Angular 2: обзор | Александр ШевнинAzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин
AzovDevMeetup 2016 | Angular 2: обзор | Александр Шевнин
 
Angular js
Angular jsAngular js
Angular js
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
 
Angular CLI : HelloWorld
Angular CLI : HelloWorldAngular CLI : HelloWorld
Angular CLI : HelloWorld
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Introduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTIntroduction to react native @ TIC NUST
Introduction to react native @ TIC NUST
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 

Semelhante a Getting Started With AngularJS

Top 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersTop 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersAlbiorix Technology
 
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaphp2ranjan
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line trainingJahan Murugassan
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answersAnil Singh
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JSKenzan
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfDifference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfYour Team in India
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic ConceptHari Haran
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
 
AngularJS Introduction (Talk given on Aug 5 2013)
AngularJS Introduction (Talk given on Aug 5 2013)AngularJS Introduction (Talk given on Aug 5 2013)
AngularJS Introduction (Talk given on Aug 5 2013)Abhishek Anand
 
Tips on How to Optimize AngularJS App Performance
Tips on How to Optimize AngularJS App PerformanceTips on How to Optimize AngularJS App Performance
Tips on How to Optimize AngularJS App PerformanceWindzoon Technologies
 
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]Alex Ershov
 
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
 

Semelhante a Getting Started With AngularJS (20)

Top 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For DevelopersTop 10 Angular Development Tools For Developers
Top 10 Angular Development Tools For Developers
 
What’s New in Angular 15.pptx
What’s New in Angular 15.pptxWhat’s New in Angular 15.pptx
What’s New in Angular 15.pptx
 
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad india
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line training
 
Angularjs interview questions and answers
Angularjs interview questions and answersAngularjs interview questions and answers
Angularjs interview questions and answers
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS
 
Difference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdfDifference Between Angular and AngularJS.pdf
Difference Between Angular and AngularJS.pdf
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic Concept
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Anjular js
Anjular jsAnjular js
Anjular js
 
AngularJS Introduction (Talk given on Aug 5 2013)
AngularJS Introduction (Talk given on Aug 5 2013)AngularJS Introduction (Talk given on Aug 5 2013)
AngularJS Introduction (Talk given on Aug 5 2013)
 
Angular js
Angular jsAngular js
Angular js
 
Angular Js
Angular JsAngular Js
Angular Js
 
Advantages of AngularJS
Advantages of AngularJSAdvantages of AngularJS
Advantages of AngularJS
 
Tips on How to Optimize AngularJS App Performance
Tips on How to Optimize AngularJS App PerformanceTips on How to Optimize AngularJS App Performance
Tips on How to Optimize AngularJS App Performance
 
Angular JS
Angular JSAngular JS
Angular JS
 
THE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JSTHE FUTURE OF ANGULAR JS
THE FUTURE OF ANGULAR JS
 
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]26 top angular 8 interview questions to know in 2020   [www.full stack.cafe]
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
 
Angularjs
AngularjsAngularjs
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
 

Último

Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension AidPhilip Schwarz
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareJim McKeeth
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Steffen Staab
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrainmasabamasaba
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplatePresentation.STUDIO
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...Shane Coughlan
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrandmasabamasaba
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfkalichargn70th171
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyviewmasabamasaba
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...Jittipong Loespradit
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...SelfMade bd
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdfPearlKirahMaeRagusta1
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...masabamasaba
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park masabamasaba
 

Último (20)

Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 

Getting Started With AngularJS

  • 1. AngularJS By: Omnia Gamal email :- omnia.gamal1988@gmail.com twitter @Omnia_G
  • 2. Agenda ● What is AngularJS ? ● Why Angular? ● Angular Vs Backbone ● Getting Started With AngularJS
  • 3. What is AngularJS ? ● is an open-source MVC framework ● single-page applications ● maintained by Google
  • 4. Why AngularJS ? ● helps you organize your JavaScript ● helps create responsive (as in fast) websites. ● plays well with jQuery ● is easy to test
  • 5. Angular Vs Backbone keys: o size (BB 18kb vs angular 77kb but … ) o memory management o nested model o binging (angular is better than why?) o RESTFUL ( angular will need ngResource ) o Validation o Template Support
  • 6. Getting Started With AngularJS Agenda: o Directives o Modules o Expressions o Controllers o Model o Filters o Create Directives o services o Unit Testing
  • 7. Directives Ex:- ● ng-app ● ng-controller ● ng-show ● ng-hide ● ng-repeat ● ng-model
  • 12. Create Directives ● restrict ● templeate or templateUrl ● scope (Isolated Scope & Binding) ● controller ● controllerAs
  • 13. Services ● $http ● injector (if you want to read more about dependency injection in JS http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
  • 16.
  • 17. ● Karma :- (previously known as Testacular) o is Google’s JavaScript test runner o the natural choice for AngularJS o it is also test framework agnostic (What that mean?) ● Jasmine :- (is the best choise for many and It will be our choice for testing now) o Its syntax is quite similar to that of RSpec ● Bower :- o is a package manager that helps you find and install all your application dependencies o It runs over git, much like Rails bundler
  • 18. ● Yeoman :- o is a toolset containing 3 core components: i. Grunt ii. Bower iii. the scaffolding tool Yo o Yo generates boilerplate code with the help of generators and automatically configures Grunt and Bower for your project. You can find generators for almost any JavaScript framework (Angular, Backbone, Ember, etc.) o generator-angular
  • 19. Angular Mock ● angular.mock o module o inject o services  $controller  $rootScope  $httpBackend
  • 20. Ref :- ● Code :- https://github.com/OmniaGM/learn_AngularJS ● AngularJS screencasts hosted by John Lindquist, JetBrains Evangelist + Productivity addict. ● codeschool - shaping up with angularJS ● Your First AngularJS App : Scaffolding, Building, and Testing ● Why AngularJS is generally better in Angular vs Ember vs backbone

Notas do Editor

  1. AngularJS is an open-source web application framework, maintained by Google, that assists with creating single-page applications
  2. backbone is much stronger debency on jquery, it’s need too _, json2 Angular it take care of memory management, layout management, events but backbone if you use marionette for exp you will never have to worry about memory management but if you not you will need to handle this by yourself Not supported in backbone
  3. p#15
  4. p#19
  5. p#23
  6. P#52
  7. The “&” operator allows you to invoke or evaluate an expression on the parent scope of whatever the directive is inside of. = two binding , can be of any type. These work like actual bindings, any changes to a bound value will be reflected in everywhere. @, One binding, they are always strings. Whatever you write as attribute value, it will be parsed and returned as strings. Which means anything inside curly braces {{ }}, will reflect the value. {{::color}}
  8. P#173
  9. If you work with JavaScript, it’s highly probable that you already know of at least one of these tools. Let’s briefly review each of these technologies and what it’s useful for:
  10. Karma it is also test framework agnostic; which means that you can use it in conjunction with any test framework of your choice (such as Jasmine, Mocha, or QUnit, among others). Grunt is a task runner that helps automate several repetitive tasks, such as minification, compilation (or build), testing, and setting up a preview of your application. Bower is a package manager that helps you find and install all your application dependencies, such as CSS frameworks, JavaScript libraries, and so on. It runs over git, much like Rails bundler, and avoids the need to manually download and update dependencies.
  11. since we’re focusing here on Angular, we’re going to use the generator-angular project.