SlideShare a Scribd company logo
1 of 51
Download to read offline
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Introduction to SPAs with
AngularJS
@LaurentDuveau
AngularAcademy.ca
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
I have been creating web sites for
20 years…
1995
My JavaScript
won’t work in
Netscape!
2015
Still doing
JavaScript…
… but with
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Agenda
• SPA ?
• AngularJS ?
• Setup and first
project
• Modules
• Controllers
• Directives
• Filters
• Navigation with
Routing
• Services
• REST API
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
SPA ?
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Single Page Application
Not an app with a single page…
Different views loaded into a screen without reloading
everything from scratch
+ routing, history, two-way data binding, dependency
injection, …
SPA are client-centric application… so coded with
JavaScript
… lots of JavaScript… rely on a Framework!
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
AngularJS ?
100% JavaScript Framework
Created in October 2010 by developers inside Google
Final first version in June 2012
Open Source, MIT license
Compatible with IE 9+ and others modern browsers
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Wait… another Js framework ?
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Another Js framework, really !??
“there are more JavaScript frameworks
than JavaScript developers”
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Js frameworks…
Google Trends
http://www.google.com/trends/explore?hl=en#q=backbone.js,+angularjs,+ember.js,+knockout.js
&cmpt=q
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
SETUP AND FIRST SAMPLE!
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Setup
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
First sample
index.htmlbinding
directives
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
The ng-* attributes
Angular Directives
• Custom HTML elements (standard!)
• Ignored by browsers, processed by
Angular
• Manage events and DOM
interactions
• Can have its own controller and
template
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
MODULES
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Modules
• Angular code is written in modules
• Better decoupling, maintenance and
testability
• A module can use other modules
dependenciesmodule
name
AngularJS!
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Modules
index.html
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Modules
index.html
app.js
runs this module
when page load
dependencies
none, for now…
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
CONTROLLERS
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Controller
• Behavior of the application specified in
controllers with functions and variables
controller in
the module
good practice:
write your code in an Immediately
Invoked Function Expression (IIFE)
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Controller
index.html
directive controller name alias
controller
scope
binding
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Controller
index.html
directive controller name alias
controller
scope
binding
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
DEMO!
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
DIRECTIVES
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-model directive
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• Add a button with ng-click
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• Add a button with ng-click
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-disabled directive
app.js
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-disabled directive
app.js
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-hide directive
index.html
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
products array
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-repeat directive
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-repeat directive
index.html
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-class directive
index.html
styles.css
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Directives
• ng-class directive
index.html
styles.css
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
FILTERS
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Filters
index.html
formats for
currency, date, …
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Filters
index.html
formats for
currency, date, …
app.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Bidirectional data binding!
When ng-click changes…
…the expression {{store.displayLimit}} (and limitTo) is
automatically updated!
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
ROUTING
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Routing ?
• Split a page in views and navigate between them.
About Us
View
ng-view
(placeholder)
Index.html
My App
Contact Us
View
#/About
#/Contact
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Routing with ngRoute
• Import angular-route.js
• Inject ngRoute into the module
• Define the routes
var app = angular.module('store', ['store-products', 'ngRoute']);
app.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/", {
controller: "StoreController",
controllerAs: "storeCtrl",
templateUrl: "/views/productsList.html"
})
.when("/product/:id", {
controller: "ProductController",
controllerAs: "productCtrl",
templateUrl: "/views/productView.html"
})
.otherwise({ redirectTo: "/" });
}]);
mysite.com/index.html#/product/1
mysite.com/index.html
everything else…
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Routing with ngRoute
• Get Route parameter in the controller
• Use ngView in your page
<body>
<div ng-view=""></div>
. . .
</body>
index.html
app.controller('ProductController', function ($routeParams,
dataService) {
dataService.getProductById($routeParams.id)
.then(function (product) {
. . .
products.js
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
SERVICES
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Services
• Shares functionality and data between
controllers
• Avoids code redundancy
• Implemented as singletons (single
instance)
• AngularJS comes with built-in services
($http, $route, $log, $q, $resource, etc.)
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
$resource and REST API
angular.module('store', ['ngResource'])
.factory('Product', function($resource) {
return $resource('/api/product/:id');
})
.controller('MainCtrl', function(Product) {
var vm = this;
// Get all products
vm.products = Product.query();
// Form data for creating a new product with ng-model
vm.productData = {};
vm.newProduct = function() {
var product = new Product(vm.productData);
product.$save();
}
});
also get(), remove(), delete()
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Angular Training: 3-day course in Canada!

More Related Content

What's hot

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaEdureka!
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninEzéchiel Amen AGBLA
 
Coders Workshop: API First Mobile Development Featuring Angular and Node
Coders Workshop: API First Mobile Development Featuring Angular and NodeCoders Workshop: API First Mobile Development Featuring Angular and Node
Coders Workshop: API First Mobile Development Featuring Angular and NodeApigee | Google Cloud
 
Smoothing the Continuous Delivery Path - A Tale of Two Teams
Smoothing the Continuous Delivery Path - A Tale of Two TeamsSmoothing the Continuous Delivery Path - A Tale of Two Teams
Smoothing the Continuous Delivery Path - A Tale of Two TeamsEqual Experts
 
Angular CLI : HelloWorld
Angular CLI : HelloWorldAngular CLI : HelloWorld
Angular CLI : HelloWorldnikspatel007
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0Tobias Meixner
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Angular 2 : le réveil de la force
Angular 2 : le réveil de la forceAngular 2 : le réveil de la force
Angular 2 : le réveil de la forceNicolas PENNEC
 
OSGi for outsiders - Milen Dyankov
OSGi for outsiders - Milen DyankovOSGi for outsiders - Milen Dyankov
OSGi for outsiders - Milen Dyankovmfrancis
 
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...ESUG
 
Contributing to Apache Projects and Making Profits
Contributing to Apache Projects and Making ProfitsContributing to Apache Projects and Making Profits
Contributing to Apache Projects and Making ProfitsHenry Saputra
 
Getting started with Angular CLI
Getting started with Angular CLIGetting started with Angular CLI
Getting started with Angular CLISasha Vinčić
 
React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)Michael Haberman
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2FITC
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2Dhyego Fernando
 
Waltz-Controls presentation for Canadian Light Source
Waltz-Controls presentation for Canadian Light SourceWaltz-Controls presentation for Canadian Light Source
Waltz-Controls presentation for Canadian Light SourceIgor Khokhryakov
 
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 TokyoAngular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 TokyoAlex Ivanenko
 
Angular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deployAngular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deployCorley S.r.l.
 

What's hot (20)

Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
Coders Workshop: API First Mobile Development Featuring Angular and Node
Coders Workshop: API First Mobile Development Featuring Angular and NodeCoders Workshop: API First Mobile Development Featuring Angular and Node
Coders Workshop: API First Mobile Development Featuring Angular and Node
 
Smoothing the Continuous Delivery Path - A Tale of Two Teams
Smoothing the Continuous Delivery Path - A Tale of Two TeamsSmoothing the Continuous Delivery Path - A Tale of Two Teams
Smoothing the Continuous Delivery Path - A Tale of Two Teams
 
Angular CLI : HelloWorld
Angular CLI : HelloWorldAngular CLI : HelloWorld
Angular CLI : HelloWorld
 
GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular 2 : le réveil de la force
Angular 2 : le réveil de la forceAngular 2 : le réveil de la force
Angular 2 : le réveil de la force
 
OSGi for outsiders - Milen Dyankov
OSGi for outsiders - Milen DyankovOSGi for outsiders - Milen Dyankov
OSGi for outsiders - Milen Dyankov
 
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...
Towards Modularity in Live Visual Modeling: A case-study with OpenPonk and Ke...
 
Contributing to Apache Projects and Making Profits
Contributing to Apache Projects and Making ProfitsContributing to Apache Projects and Making Profits
Contributing to Apache Projects and Making Profits
 
Getting started with Angular CLI
Getting started with Angular CLIGetting started with Angular CLI
Getting started with Angular CLI
 
React vs angular (mobile first battle)
React vs angular (mobile first battle)React vs angular (mobile first battle)
React vs angular (mobile first battle)
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Waltz-Controls presentation for Canadian Light Source
Waltz-Controls presentation for Canadian Light SourceWaltz-Controls presentation for Canadian Light Source
Waltz-Controls presentation for Canadian Light Source
 
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 TokyoAngular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
 
Angular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deployAngular coding: from project management to web and mobile deploy
Angular coding: from project management to web and mobile deploy
 

Viewers also liked

DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5Frédéric Harper
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
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
 
Maximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with SearchMaximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with SearchiProspect Canada
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 

Viewers also liked (7)

DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
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??
 
Maximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with SearchMaximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with Search
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Similar to Introduction to SPAs with AngularJS

Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework Yakov Fain
 
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
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines Dev Raj Gautam
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic ConceptHari Haran
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJsAhmed Elharouny
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSShyjal Raazi
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile AppsShailendra Chauhan
 
Angular patterns
Angular patternsAngular patterns
Angular patternsPremkumar M
 
Building share point apps with angularjs
Building share point apps with angularjsBuilding share point apps with angularjs
Building share point apps with angularjsAhmed Elharouny
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to ProtractorFlorian Fesseler
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JSKenzan
 
Novidades do ASP.NET e do Visual Studio 2013
Novidades do ASP.NET e do Visual Studio 2013Novidades do ASP.NET e do Visual Studio 2013
Novidades do ASP.NET e do Visual Studio 2013Jiéverson Maissiat
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 

Similar to Introduction to SPAs with AngularJS (20)

Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
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
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines
 
Angularjs
AngularjsAngularjs
Angularjs
 
AngularJs Basic Concept
AngularJs Basic ConceptAngularJs Basic Concept
AngularJs Basic Concept
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
 
Angular
AngularAngular
Angular
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
 
Get satrted angular js day 2
Get satrted angular js day 2Get satrted angular js day 2
Get satrted angular js day 2
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Building share point apps with angularjs
Building share point apps with angularjsBuilding share point apps with angularjs
Building share point apps with angularjs
 
Introduction to Protractor
Introduction to ProtractorIntroduction to Protractor
Introduction to Protractor
 
Why choose Angular 6?
Why choose Angular 6?Why choose Angular 6?
Why choose Angular 6?
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, the New Angular JS
Angular, the New Angular JS
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Novidades do ASP.NET e do Visual Studio 2013
Novidades do ASP.NET e do Visual Studio 2013Novidades do ASP.NET e do Visual Studio 2013
Novidades do ASP.NET e do Visual Studio 2013
 
Angular js
Angular jsAngular js
Angular js
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 

More from Laurent Duveau

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Laurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!Laurent Duveau
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Laurent Duveau
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular AppLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]Laurent Duveau
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Laurent Duveau
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Laurent Duveau
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursLaurent Duveau
 
Building apps for WP8 and Win8
Building apps for WP8 and Win8Building apps for WP8 and Win8
Building apps for WP8 and Win8Laurent Duveau
 

More from Laurent Duveau (20)

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
 
Windows App Studio
Windows App StudioWindows App Studio
Windows App Studio
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]
 
L'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeursL'opportunité Windows 8 pour les développeurs
L'opportunité Windows 8 pour les développeurs
 
Building apps for WP8 and Win8
Building apps for WP8 and Win8Building apps for WP8 and Win8
Building apps for WP8 and Win8
 

Recently uploaded

Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoUXDXConf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKUXDXConf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 

Recently uploaded (20)

Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 

Introduction to SPAs with AngularJS

  • 1. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Introduction to SPAs with AngularJS @LaurentDuveau AngularAcademy.ca
  • 2. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 I have been creating web sites for 20 years… 1995 My JavaScript won’t work in Netscape! 2015 Still doing JavaScript… … but with
  • 3. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Agenda • SPA ? • AngularJS ? • Setup and first project • Modules • Controllers • Directives • Filters • Navigation with Routing • Services • REST API
  • 4. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 SPA ?
  • 5. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Single Page Application Not an app with a single page… Different views loaded into a screen without reloading everything from scratch + routing, history, two-way data binding, dependency injection, … SPA are client-centric application… so coded with JavaScript … lots of JavaScript… rely on a Framework!
  • 6. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 AngularJS ? 100% JavaScript Framework Created in October 2010 by developers inside Google Final first version in June 2012 Open Source, MIT license Compatible with IE 9+ and others modern browsers
  • 7. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Wait… another Js framework ?
  • 8. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Another Js framework, really !?? “there are more JavaScript frameworks than JavaScript developers”
  • 9. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Js frameworks… Google Trends http://www.google.com/trends/explore?hl=en#q=backbone.js,+angularjs,+ember.js,+knockout.js &cmpt=q
  • 10. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 SETUP AND FIRST SAMPLE!
  • 11. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Setup index.html
  • 12. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 First sample index.htmlbinding directives
  • 13. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 The ng-* attributes Angular Directives • Custom HTML elements (standard!) • Ignored by browsers, processed by Angular • Manage events and DOM interactions • Can have its own controller and template
  • 14. © LDEX, 2015 JavaScript Open Day Montreal, November 2015
  • 15. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 MODULES
  • 16. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Modules • Angular code is written in modules • Better decoupling, maintenance and testability • A module can use other modules dependenciesmodule name AngularJS!
  • 17. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Modules index.html app.js
  • 18. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Modules index.html app.js runs this module when page load dependencies none, for now…
  • 19. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 CONTROLLERS
  • 20. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Controller • Behavior of the application specified in controllers with functions and variables controller in the module good practice: write your code in an Immediately Invoked Function Expression (IIFE) app.js
  • 21. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Controller index.html directive controller name alias controller scope binding app.js
  • 22. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Controller index.html directive controller name alias controller scope binding app.js
  • 23. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 DEMO!
  • 24. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 DIRECTIVES
  • 25. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-model directive
  • 26. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • Add a button with ng-click index.html
  • 27. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • Add a button with ng-click index.html
  • 28. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-disabled directive app.js index.html
  • 29. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-disabled directive app.js index.html
  • 30. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-hide directive index.html app.js
  • 31. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives products array app.js
  • 32. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-repeat directive index.html
  • 33. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-repeat directive index.html
  • 34. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-class directive index.html styles.css
  • 35. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Directives • ng-class directive index.html styles.css
  • 36. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 FILTERS
  • 37. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Filters index.html formats for currency, date, … app.js
  • 38. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Filters index.html formats for currency, date, … app.js
  • 39. © LDEX, 2015 JavaScript Open Day Montreal, November 2015
  • 40. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Bidirectional data binding! When ng-click changes… …the expression {{store.displayLimit}} (and limitTo) is automatically updated!
  • 41. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 ROUTING
  • 42. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Routing ? • Split a page in views and navigate between them. About Us View ng-view (placeholder) Index.html My App Contact Us View #/About #/Contact
  • 43. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Routing with ngRoute • Import angular-route.js • Inject ngRoute into the module • Define the routes var app = angular.module('store', ['store-products', 'ngRoute']); app.config(["$routeProvider", function ($routeProvider) { $routeProvider.when("/", { controller: "StoreController", controllerAs: "storeCtrl", templateUrl: "/views/productsList.html" }) .when("/product/:id", { controller: "ProductController", controllerAs: "productCtrl", templateUrl: "/views/productView.html" }) .otherwise({ redirectTo: "/" }); }]); mysite.com/index.html#/product/1 mysite.com/index.html everything else…
  • 44. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Routing with ngRoute • Get Route parameter in the controller • Use ngView in your page <body> <div ng-view=""></div> . . . </body> index.html app.controller('ProductController', function ($routeParams, dataService) { dataService.getProductById($routeParams.id) .then(function (product) { . . . products.js
  • 45. © LDEX, 2015 JavaScript Open Day Montreal, November 2015
  • 46. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 SERVICES
  • 47. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Services • Shares functionality and data between controllers • Avoids code redundancy • Implemented as singletons (single instance) • AngularJS comes with built-in services ($http, $route, $log, $q, $resource, etc.)
  • 48. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 $resource and REST API angular.module('store', ['ngResource']) .factory('Product', function($resource) { return $resource('/api/product/:id'); }) .controller('MainCtrl', function(Product) { var vm = this; // Get all products vm.products = Product.query(); // Form data for creating a new product with ng-model vm.productData = {}; vm.newProduct = function() { var product = new Product(vm.productData); product.$save(); } }); also get(), remove(), delete()
  • 49. © LDEX, 2015 JavaScript Open Day Montreal, November 2015
  • 50. © LDEX, 2015 JavaScript Open Day Montreal, November 2015
  • 51. © LDEX, 2015 JavaScript Open Day Montreal, November 2015 Angular Training: 3-day course in Canada!