SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
WHAT IS IT, HOW DO I USE IT AND WHY
Agenda
• What is Angular (15 min)
• Why Angular (15 min)
• What makes it different from other JavaScript frameworks
• Angular vs ASP.NET MVC
• How do I use it (45 min)
• Controllers
• Scopes
• Providers
• Directives
• Questions
What is Angular
What is Angular – Part 1
• Initial release 2009
• Open-source
• SPA framework
• Model-View-Whatever
• Declarative programming
• Developed and maintained by Google
What is Angular – Part 2
• Modular, Extensible
• angular.js
• angular-animate.js, angular-route.js, angular-touch.js, …
• Testable
• Browser Compatibility
• Current version (1.2.x) requires pollyfills for IE 7 and bellow
• Version 1.3 will drop IE 8 and bellow
• Active community
• Documentation
• Tutorials
• Third-party directives
Why Angular
• Initial release 2010
• Dependencies:
• Underscore.js
• Backbone.Router
• Backbone.View
• jQuery and json2.js for backwards compatibility
• Many modules available
• Initial release 2011
• Dependencies:
• jQuery
• Handlebars.js
• Pure MVC
• Dependencies:
• jQuery
• Knockout
• Require.js
• Lead developer and architect Rob Eisenberg working on AngularJS V2
• MVVM
AngularJS & MVC
• Do I need to choose?
• MVC & jQuery
• Type safety
• Routing
• Typescript
How do I use it
• Controllers
• How to deal with scopes
• Providers
• Service
• Factory
• Provider
• Directives
Controllers
DEMO!!!
Scopes
• ngRepeat and scopes
• Always have a dot in your expression
• JavaScript Prototypical Inheritance
• Functions/objects are safe, parameters are not
• $parent
Providers
• Service
• Factory
• Provider
Providers - Service
var myApp = angular.module('myApp', []);
myApp.service('helloWorldFromService', function () {
this.sayHello = function () {
return "Hello, World!";
};
});
Providers - Factory
var myApp = angular.module('myApp', []);
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
Providers - Provider
var myApp = angular.module('myApp', []);
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
this.setName = function (name) {
this.name = name;
};
});
// Configure a provider
myApp.config(function (helloWorldProvider) {
helloWorldProvider.setName('World');
});
Directives
• AngularJS HTML compiler ($compile)
• Directive names, ngModel or is it ng-model?
• HTML validators
• Usage
• Tag
• Attribute
• Comment
• Class
• Template options
Questions?

Contenu connexe

Tendances

Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJSOmnia Helmi
 
Angular 2.0: Getting ready
Angular 2.0: Getting readyAngular 2.0: Getting ready
Angular 2.0: Getting readyAxilis
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSébastien Levert
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Dawid Myslak
 
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel Awesome
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel AwesomeDevelopers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel Awesome
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel AwesomemCloud
 
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksAdvanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksJeremy Likness
 
Angular meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29Nitin Bhojwani
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsSébastien Levert
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsYakov Fain
 
An Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorAn Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorCubet Techno Labs
 
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...Sébastien Levert
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?Tom Hombergs
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsBinary Studio
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready Nir Kaufman
 
Marrying angular rails
Marrying angular railsMarrying angular rails
Marrying angular railsVolker Tietz
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsYakov Fain
 

Tendances (20)

Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJS
 
Angular 2.0: Getting ready
Angular 2.0: Getting readyAngular 2.0: Getting ready
Angular 2.0: Getting ready
 
SharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure FunctionsSharePoint Framework, Angular and Azure Functions
SharePoint Framework, Angular and Azure Functions
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel Awesome
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel AwesomeDevelopers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel Awesome
Developers’ mDay 2021: Mladen Janjetović, Laravel Srbija – Laravel Awesome
 
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksAdvanced AngularJS Tips and Tricks
Advanced AngularJS Tips and Tricks
 
Angular meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
 
Angular js
Angular jsAngular js
Angular js
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
 
An Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using ProtractorAn Introduction to AngularJS End to End Testing using Protractor
An Introduction to AngularJS End to End Testing using Protractor
 
Protractor overview
Protractor overviewProtractor overview
Protractor overview
 
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
 
ProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applicationsProtractorJS for automated testing of Angular 1.x/2.x applications
ProtractorJS for automated testing of Angular 1.x/2.x applications
 
Webinar MVC6
Webinar MVC6Webinar MVC6
Webinar MVC6
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 
Marrying angular rails
Marrying angular railsMarrying angular rails
Marrying angular rails
 
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot appsUsing JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
 

En vedette

Big data hype or reality
Big data   hype or realityBig data   hype or reality
Big data hype or realityE2 Partners
 
Building responsive websites
Building responsive websitesBuilding responsive websites
Building responsive websitesE2 Partners
 
Every1 can innovate
Every1 can innovateEvery1 can innovate
Every1 can innovateE2 Partners
 
Te²d talks pair programming
Te²d talks   pair programmingTe²d talks   pair programming
Te²d talks pair programmingE2 Partners
 
Pragmatic Enterprise Architecture
Pragmatic Enterprise ArchitecturePragmatic Enterprise Architecture
Pragmatic Enterprise ArchitectureE2 Partners
 
API Management systems - the good the bad & the ugly
API Management systems - the good the bad & the uglyAPI Management systems - the good the bad & the ugly
API Management systems - the good the bad & the uglyE2 Partners
 
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)MEE Gelderse Poort
 
Time management capita selecta
Time management capita selectaTime management capita selecta
Time management capita selectaArco Kats
 

En vedette (11)

Cqrs intro
Cqrs introCqrs intro
Cqrs intro
 
Big data hype or reality
Big data   hype or realityBig data   hype or reality
Big data hype or reality
 
Building responsive websites
Building responsive websitesBuilding responsive websites
Building responsive websites
 
Windows Azure
Windows AzureWindows Azure
Windows Azure
 
Every1 can innovate
Every1 can innovateEvery1 can innovate
Every1 can innovate
 
Time management
Time managementTime management
Time management
 
Te²d talks pair programming
Te²d talks   pair programmingTe²d talks   pair programming
Te²d talks pair programming
 
Pragmatic Enterprise Architecture
Pragmatic Enterprise ArchitecturePragmatic Enterprise Architecture
Pragmatic Enterprise Architecture
 
API Management systems - the good the bad & the ugly
API Management systems - the good the bad & the uglyAPI Management systems - the good the bad & the ugly
API Management systems - the good the bad & the ugly
 
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)
Presentatie plannen en organiseren door Marilda Makkink (2-3-2013)
 
Time management capita selecta
Time management capita selectaTime management capita selecta
Time management capita selecta
 

Similaire à Angular js

Exploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiExploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiLiju Pillai
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comPerfomatix Solutions
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day WorkshopShyam Seshadri
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSGunnar Hillert
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierMiroslav Resetar
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSDeepu S Nath
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSGil Fink
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End TestsSriram Angajala
 
End to End Testing with nightwatchjs
End to End  Testing with nightwatchjsEnd to End  Testing with nightwatchjs
End to End Testing with nightwatchjsSrikanth Madduri
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to ProtractorFlorian Fesseler
 
Angular js training in pune course content By Advanto Software
Angular js training in pune course  content By Advanto SoftwareAngular js training in pune course  content By Advanto Software
Angular js training in pune course content By Advanto SoftwareAdvanto Software
 
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
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersPaweł Żurowski
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Bibby Chung
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish VJ
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsTimmy Kokke
 

Similaire à Angular js (20)

Exploring AngularJS - Liju Pillai
Exploring AngularJS - Liju PillaiExploring AngularJS - Liju Pillai
Exploring AngularJS - Liju Pillai
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comWhen to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
 
AngularJS One Day Workshop
AngularJS One Day WorkshopAngularJS One Day Workshop
AngularJS One Day Workshop
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlier
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSEnd to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJS
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
 
End to End Testing with nightwatchjs
End to End  Testing with nightwatchjsEnd to End  Testing with nightwatchjs
End to End Testing with nightwatchjs
 
Protractor survival guide
Protractor survival guideProtractor survival guide
Protractor survival guide
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Angular js training in pune course content By Advanto Software
Angular js training in pune course  content By Advanto SoftwareAngular js training in pune course  content By Advanto Software
Angular js training in pune course content By Advanto Software
 
Spa with angular
Spa with angularSpa with angular
Spa with angular
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
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)
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
 

Dernier

How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsAndolasoft Inc
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providermohitmore19
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
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
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
Clustering techniques data mining book ....
Clustering techniques data mining book ....Clustering techniques data mining book ....
Clustering techniques data mining book ....ShaimaaMohamedGalal
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfjoe51371421
 

Dernier (20)

How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
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...
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
Clustering techniques data mining book ....
Clustering techniques data mining book ....Clustering techniques data mining book ....
Clustering techniques data mining book ....
 
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the ProcessExploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdf
 

Angular js

  • 1. WHAT IS IT, HOW DO I USE IT AND WHY
  • 2. Agenda • What is Angular (15 min) • Why Angular (15 min) • What makes it different from other JavaScript frameworks • Angular vs ASP.NET MVC • How do I use it (45 min) • Controllers • Scopes • Providers • Directives • Questions
  • 4. What is Angular – Part 1 • Initial release 2009 • Open-source • SPA framework • Model-View-Whatever • Declarative programming • Developed and maintained by Google
  • 5. What is Angular – Part 2 • Modular, Extensible • angular.js • angular-animate.js, angular-route.js, angular-touch.js, … • Testable • Browser Compatibility • Current version (1.2.x) requires pollyfills for IE 7 and bellow • Version 1.3 will drop IE 8 and bellow • Active community • Documentation • Tutorials • Third-party directives
  • 7.
  • 8. • Initial release 2010 • Dependencies: • Underscore.js • Backbone.Router • Backbone.View • jQuery and json2.js for backwards compatibility • Many modules available
  • 9. • Initial release 2011 • Dependencies: • jQuery • Handlebars.js • Pure MVC
  • 10. • Dependencies: • jQuery • Knockout • Require.js • Lead developer and architect Rob Eisenberg working on AngularJS V2 • MVVM
  • 11. AngularJS & MVC • Do I need to choose? • MVC & jQuery • Type safety • Routing • Typescript
  • 12. How do I use it • Controllers • How to deal with scopes • Providers • Service • Factory • Provider • Directives
  • 14. Scopes • ngRepeat and scopes • Always have a dot in your expression • JavaScript Prototypical Inheritance • Functions/objects are safe, parameters are not • $parent
  • 16. Providers - Service var myApp = angular.module('myApp', []); myApp.service('helloWorldFromService', function () { this.sayHello = function () { return "Hello, World!"; }; });
  • 17. Providers - Factory var myApp = angular.module('myApp', []); myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!"; } }; });
  • 18. Providers - Provider var myApp = angular.module('myApp', []); myApp.provider('helloWorld', function() { this.name = 'Default'; this.$get = function() { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!"; } } }; this.setName = function (name) { this.name = name; }; }); // Configure a provider myApp.config(function (helloWorldProvider) { helloWorldProvider.setName('World'); });
  • 19. Directives • AngularJS HTML compiler ($compile) • Directive names, ngModel or is it ng-model? • HTML validators • Usage • Tag • Attribute • Comment • Class • Template options