SlideShare a Scribd company logo
Getting started with AngularJS
Maurice de Beijer
Who am I?
• Maurice de Beijer
• The Problem Solver
• Microsoft Integration MVP
• Freelance developer
• DevelopMentor instructor
• Twitter:
@mauricedb
• Blog:
http://msmvps.com/blogs/theproblemsolver/
• Web:
http://www.TheProblemSolver.nl
• E-mail:
mauricedb@develop.com

2
What are we going to cover?
•
•
•
•
•

What is AngularJS?
Getting started
Directives
Routing
Services

• Demos at: http://bit.ly/lidnugng

3
What is AngularJS?
• AngularJS is an MVC framework for browser based apps
– Open source and originally developed at Google
• The clean architecture has attracted a large following quickly
– Version 1.0 was released in June 2012
– Currently at 1.2.0
• The goal is building CRUD style business applications
– Not as suitable for games etc
• Use declarative programming for UI and imperative
programming for the logic
– The application is wired together in a declarative way
• Supports modern desktop and mobile browsers
– Internet Explorer version 8 and above

4
Key features
• Model View Controller architecture
– A well known and proven architecture
• Declarative two way data binding
– Automatically synchronizes values between Model and View
• Dynamic templates
– Makes it very easy to update the user interface
• Dependency injections
– Code dependencies are automatically injected where needed
• Extends HTML with directives
– Lots of powerful standard directives or create your own
• Build with testing in mind
– Makes it much easier to unit test different parts

5
Bootstrapping
• Automatic bootstrapping
– Add a reference to AngularJS
– Add the ngApp attribute
• Manual bootstrapping is also possible
– Gives you more control
– For example when using AMD/RequireJS

6
The MVC of AngularJS

7
Model
• The business data
• Exposed to the view through the $scope

8
View
•
•
•
•

The user interface layer
Data binds to the model
Calls functions on the controller
Use declarative directives for reusable code

9
Controller
• Glues the view and the model together
• Provides additional functionality
• Uses additional services for reusable logic

10
Services
• Services are reusable pieces of business logic
– Separation results in reuse and testability
• Created as singleton objects
– Inject by AngularJS using dependency injection
• Services are created as part of a module
– One module can take a dependency on another module
• Modules are groupings of related functionality
– Also used to bootstrap the application

11
Standard Services
• Many general purpose services provided by AngularJS
– $http
• Used for XMLHttpRequest handling
– $location
• Provide information about the current URL
– $q
• A promise/deferred module for asynchronous requests
– $routeProvider
• Configure routes in an SPA
– $log
• Logging service
– Many more

12
Dependency injection
• AngularJS uses dependency injection to decouple modules
– Dependencies are automatically injected by the framework
• Based on the parameter name
• JavaScript is often minified in production
– Need to provide AngularJS with some extra hints

13
Standard directives
• Directives allow you to enhance HTML with new capabilities
– Start using HTML as a domain specific language
• AngularJS comes with a long list of standard directives
– ngApp
– ngBind
– ngModel
– ngRepeat
– ngClick
– ngEnable/ngDisable
– ngHide/ngShow
– ngView
– …

14
Custom directives
• Turn HTML into your Domain Specific Language
– Use templates to embed complete blocks
• Can use either attributes, elements, CSS classes or comments
• Directives let you interact with the DOM
– The place for jQuery code

15
Routing
• Used to create SPA style application
– The page can change without using the server
• The ngView is often used to render a template
– HTML templates loaded when needed
– Can also be pre loaded as script with type="text/ng-template"
• The $routeProvider service is used to configure the route
• The $location service can be used to navigate
– Using an anchor tag is also possible
• The $routeParams service can be used to retrieve parameters
– Properties named in the route URL template

16
$http service
• The basic service for doing all HTTP requests
– The building block for all AJAX requests
• Can be used as a function
– $http(config)
• Provides a number of shortcut methods
– $http.post(url, config)
– $http.get(url, config)
– $http.put(url, config)
– $http.delete(url, config)
• Uses the promises API as the result
– Provided by the $q service

17
$resource
• Creates a service for working with RESTful services
– Much easier than using the $http object
• Standard functions are already preconfigured
– Only the common HTTP PUT is missing
• Requires a dependency on ngResource
– Located in angular-resource.js

18
Unit testing AJAX code
• The $httpBackend is the service that is responsible
– Use the XMLHttpRequest object
• There is a second version in the ngMock module
– Used for unit testing code that does HTTP requests
• Can be configured to fake HTTP requests
– Or verify that HTTP calls where made

19
Conclusion
• AngularJS is a complete framework for client side applications
– Based on the standard MVC design pattern
• Two way data binding makes it easy to build data entry forms
• Dependency injection makes it easy to separate modules
• Build with testing in mind

20
Questions

?
The presentation and source code will be available
http://msmvps.com/blogs/theproblemsolver/

21

More Related Content

What's hot

MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web Applications
Vforce Infotech
 
Jasmine - A BDD test framework for JavaScript
Jasmine - A BDD test framework for JavaScriptJasmine - A BDD test framework for JavaScript
Jasmine - A BDD test framework for JavaScript
Sumanth krishna
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Deepu S Nath
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
Basarat Syed
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
Gerald Krishnan
 
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
 
Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJSModularize JavaScript with RequireJS
Modularize JavaScript with RequireJS
Minh Hoang
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Aldo Pizzagalli
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
Jesse Warden
 
AngularJS
AngularJSAngularJS
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
Vlad Filippov
 
Introduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJSIntroduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJS
Mohamed Elkhodary
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express Framework
Edureka!
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
Eusebiu Schipor
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
codeinmotion
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
Mindfire Solutions
 

What's hot (20)

MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web Applications
 
Jasmine - A BDD test framework for JavaScript
Jasmine - A BDD test framework for JavaScriptJasmine - A BDD test framework for JavaScript
Jasmine - A BDD test framework for JavaScript
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
 
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
 
Modularize JavaScript with RequireJS
Modularize JavaScript with RequireJSModularize JavaScript with RequireJS
Modularize JavaScript with RequireJS
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
 
AngularJS
AngularJSAngularJS
AngularJS
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
 
Introduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJSIntroduction of ASP.NET MVC and AngularJS
Introduction of ASP.NET MVC and AngularJS
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express Framework
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
MVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on RailsMVC Demystified: Essence of Ruby on Rails
MVC Demystified: Essence of Ruby on Rails
 
Introduction to single page application with angular js
Introduction to single page application with angular jsIntroduction to single page application with angular js
Introduction to single page application with angular js
 

Viewers also liked

jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Siva Arunachalam
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
001 hosting
001 hosting001 hosting
001 hosting
sivorka
 
000 introduction
000 introduction000 introduction
000 introduction
sivorka
 
01 introduction to entity framework
01   introduction to entity framework01   introduction to entity framework
01 introduction to entity framework
Maxim Shaptala
 
C++ 11 Style : A Touch of Class
C++ 11 Style : A Touch of ClassC++ 11 Style : A Touch of Class
C++ 11 Style : A Touch of Class
Yogendra Rampuria
 
Introduction to UML
Introduction to UMLIntroduction to UML
03 managing relationships
03   managing relationships03   managing relationships
03 managing relationships
Марина Босова
 
02 beginning code first
02   beginning code first02   beginning code first
02 beginning code first
Марина Босова
 
06 integrating extra features and looking forward
06   integrating extra features and looking forward06   integrating extra features and looking forward
06 integrating extra features and looking forward
Марина Босова
 
Mva stf module 5 - rus
Mva stf module 5 - rusMva stf module 5 - rus
Mva stf module 5 - rus
Maxim Shaptala
 
05 cерверные элементы управления презентация
05 cерверные элементы управления   презентация05 cерверные элементы управления   презентация
05 cерверные элементы управления презентация
sivorka
 
04 managing the database
04   managing the database04   managing the database
04 managing the database
Марина Босова
 
презентация привязка модели и валидация данных
презентация   привязка модели и валидация данныхпрезентация   привязка модели и валидация данных
презентация привязка модели и валидация данных
sivorka
 
05 managing transactions
05   managing transactions05   managing transactions
05 managing transactions
Марина Босова
 
01 introduction to entity framework
01   introduction to entity framework01   introduction to entity framework
01 introduction to entity framework
Марина Босова
 
Mva stf module 6 - rus
Mva stf module 6 - rusMva stf module 6 - rus
Mva stf module 6 - rus
Maxim Shaptala
 
навигация и валидаторы презентация
навигация и валидаторы   презентациянавигация и валидаторы   презентация
навигация и валидаторы презентация
sivorka
 
Mva stf module 1 - rus
Mva stf module 1 - rusMva stf module 1 - rus
Mva stf module 1 - rus
Maxim Shaptala
 

Viewers also liked (20)

jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
001 hosting
001 hosting001 hosting
001 hosting
 
000 introduction
000 introduction000 introduction
000 introduction
 
01 introduction to entity framework
01   introduction to entity framework01   introduction to entity framework
01 introduction to entity framework
 
C++ 11 Style : A Touch of Class
C++ 11 Style : A Touch of ClassC++ 11 Style : A Touch of Class
C++ 11 Style : A Touch of Class
 
Introduction to UML
Introduction to UMLIntroduction to UML
Introduction to UML
 
03 managing relationships
03   managing relationships03   managing relationships
03 managing relationships
 
02 beginning code first
02   beginning code first02   beginning code first
02 beginning code first
 
06 integrating extra features and looking forward
06   integrating extra features and looking forward06   integrating extra features and looking forward
06 integrating extra features and looking forward
 
Mva stf module 5 - rus
Mva stf module 5 - rusMva stf module 5 - rus
Mva stf module 5 - rus
 
05 cерверные элементы управления презентация
05 cерверные элементы управления   презентация05 cерверные элементы управления   презентация
05 cерверные элементы управления презентация
 
04 managing the database
04   managing the database04   managing the database
04 managing the database
 
презентация привязка модели и валидация данных
презентация   привязка модели и валидация данныхпрезентация   привязка модели и валидация данных
презентация привязка модели и валидация данных
 
05 managing transactions
05   managing transactions05   managing transactions
05 managing transactions
 
01 introduction to entity framework
01   introduction to entity framework01   introduction to entity framework
01 introduction to entity framework
 
Mva stf module 6 - rus
Mva stf module 6 - rusMva stf module 6 - rus
Mva stf module 6 - rus
 
навигация и валидаторы презентация
навигация и валидаторы   презентациянавигация и валидаторы   презентация
навигация и валидаторы презентация
 
Mva stf module 1 - rus
Mva stf module 1 - rusMva stf module 1 - rus
Mva stf module 1 - rus
 

Similar to Getting started with angular js

Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
Maurice De Beijer [MVP]
 
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
Gil Fink
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
MVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming modelMVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming model
Alex Thissen
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
Santosh Kumar Kar
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
Angular js
Angular jsAngular js
Angular js
yogi_solanki
 
AngularJS
AngularJSAngularJS
AngularJS
Mahmoud Tolba
 
Angular basicschat
Angular basicschatAngular basicschat
Angular basicschatYu Jin
 
Angular js
Angular jsAngular js
Angular js
Hritesh Saha
 
Angular
AngularAngular
CraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJSCraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJS
craftworkz
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
Goutam Dey
 
Quick Start to AngularJS
Quick Start to AngularJSQuick Start to AngularJS
Quick Start to AngularJS
Return on Intelligence
 
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
Premkumar M
 
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
 

Similar to Getting started with angular js (20)

Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with 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
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
MVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming modelMVC 6 - the new unified Web programming model
MVC 6 - the new unified Web programming model
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular basicschat
Angular basicschatAngular basicschat
Angular basicschat
 
Angular js
Angular jsAngular js
Angular js
 
Angular
AngularAngular
Angular
 
CraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJSCraftCamp for Students - Introduction to AngularJS
CraftCamp for Students - Introduction to AngularJS
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
Quick Start to AngularJS
Quick Start to AngularJSQuick Start to AngularJS
Quick Start to AngularJS
 
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
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
 

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
Maurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
Maurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
Maurice De Beijer [MVP]
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
The new React
The new React The new React
The new React
Maurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
Maurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Maurice De Beijer [MVP]
 

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 

Recently uploaded

Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 

Recently uploaded (20)

Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 

Getting started with angular js

  • 1. Getting started with AngularJS Maurice de Beijer
  • 2. Who am I? • Maurice de Beijer • The Problem Solver • Microsoft Integration MVP • Freelance developer • DevelopMentor instructor • Twitter: @mauricedb • Blog: http://msmvps.com/blogs/theproblemsolver/ • Web: http://www.TheProblemSolver.nl • E-mail: mauricedb@develop.com 2
  • 3. What are we going to cover? • • • • • What is AngularJS? Getting started Directives Routing Services • Demos at: http://bit.ly/lidnugng 3
  • 4. What is AngularJS? • AngularJS is an MVC framework for browser based apps – Open source and originally developed at Google • The clean architecture has attracted a large following quickly – Version 1.0 was released in June 2012 – Currently at 1.2.0 • The goal is building CRUD style business applications – Not as suitable for games etc • Use declarative programming for UI and imperative programming for the logic – The application is wired together in a declarative way • Supports modern desktop and mobile browsers – Internet Explorer version 8 and above 4
  • 5. Key features • Model View Controller architecture – A well known and proven architecture • Declarative two way data binding – Automatically synchronizes values between Model and View • Dynamic templates – Makes it very easy to update the user interface • Dependency injections – Code dependencies are automatically injected where needed • Extends HTML with directives – Lots of powerful standard directives or create your own • Build with testing in mind – Makes it much easier to unit test different parts 5
  • 6. Bootstrapping • Automatic bootstrapping – Add a reference to AngularJS – Add the ngApp attribute • Manual bootstrapping is also possible – Gives you more control – For example when using AMD/RequireJS 6
  • 7. The MVC of AngularJS 7
  • 8. Model • The business data • Exposed to the view through the $scope 8
  • 9. View • • • • The user interface layer Data binds to the model Calls functions on the controller Use declarative directives for reusable code 9
  • 10. Controller • Glues the view and the model together • Provides additional functionality • Uses additional services for reusable logic 10
  • 11. Services • Services are reusable pieces of business logic – Separation results in reuse and testability • Created as singleton objects – Inject by AngularJS using dependency injection • Services are created as part of a module – One module can take a dependency on another module • Modules are groupings of related functionality – Also used to bootstrap the application 11
  • 12. Standard Services • Many general purpose services provided by AngularJS – $http • Used for XMLHttpRequest handling – $location • Provide information about the current URL – $q • A promise/deferred module for asynchronous requests – $routeProvider • Configure routes in an SPA – $log • Logging service – Many more 12
  • 13. Dependency injection • AngularJS uses dependency injection to decouple modules – Dependencies are automatically injected by the framework • Based on the parameter name • JavaScript is often minified in production – Need to provide AngularJS with some extra hints 13
  • 14. Standard directives • Directives allow you to enhance HTML with new capabilities – Start using HTML as a domain specific language • AngularJS comes with a long list of standard directives – ngApp – ngBind – ngModel – ngRepeat – ngClick – ngEnable/ngDisable – ngHide/ngShow – ngView – … 14
  • 15. Custom directives • Turn HTML into your Domain Specific Language – Use templates to embed complete blocks • Can use either attributes, elements, CSS classes or comments • Directives let you interact with the DOM – The place for jQuery code 15
  • 16. Routing • Used to create SPA style application – The page can change without using the server • The ngView is often used to render a template – HTML templates loaded when needed – Can also be pre loaded as script with type="text/ng-template" • The $routeProvider service is used to configure the route • The $location service can be used to navigate – Using an anchor tag is also possible • The $routeParams service can be used to retrieve parameters – Properties named in the route URL template 16
  • 17. $http service • The basic service for doing all HTTP requests – The building block for all AJAX requests • Can be used as a function – $http(config) • Provides a number of shortcut methods – $http.post(url, config) – $http.get(url, config) – $http.put(url, config) – $http.delete(url, config) • Uses the promises API as the result – Provided by the $q service 17
  • 18. $resource • Creates a service for working with RESTful services – Much easier than using the $http object • Standard functions are already preconfigured – Only the common HTTP PUT is missing • Requires a dependency on ngResource – Located in angular-resource.js 18
  • 19. Unit testing AJAX code • The $httpBackend is the service that is responsible – Use the XMLHttpRequest object • There is a second version in the ngMock module – Used for unit testing code that does HTTP requests • Can be configured to fake HTTP requests – Or verify that HTTP calls where made 19
  • 20. Conclusion • AngularJS is a complete framework for client side applications – Based on the standard MVC design pattern • Two way data binding makes it easy to build data entry forms • Dependency injection makes it easy to separate modules • Build with testing in mind 20
  • 21. Questions ? The presentation and source code will be available http://msmvps.com/blogs/theproblemsolver/ 21