Introduction to SPAs with AngularJS

© LDEX, 2015 JavaScript Open Day Montreal, November 2015
Introduction to SPAs with
AngularJS
@LaurentDuveau
AngularAcademy.ca

I have been creating web sites for
20 years…
1995
My JavaScript
won’t work in
Netscape!
2015
Still doing
JavaScript…
… but with

Agenda
• SPA ?
• AngularJS ?
• Setup and first
project
• Modules
• Controllers
• Directives
• Filters
• Navigation with
Routing
• Services
• REST API

SPA ?

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!

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

Wait… another Js framework ?

Another Js framework, really !??
“there are more JavaScript frameworks
than JavaScript developers”

Js frameworks…
Google Trends
http://www.google.com/trends/explore?hl=en#q=backbone.js,+angularjs,+ember.js,+knockout.js
&cmpt=q

SETUP AND FIRST SAMPLE!

Setup
index.html

First sample
index.htmlbinding
directives

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

MODULES

Modules
• Angular code is written in modules
• Better decoupling, maintenance and
testability
• A module can use other modules
dependenciesmodule
name
AngularJS!

Modules
index.html
app.js

Modules
index.html
app.js
runs this module
when page load
dependencies
none, for now…

CONTROLLERS

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

Controller
index.html
directive controller name alias
controller
scope
binding
app.js

DEMO!

DIRECTIVES

Directives
• ng-model directive

Directives
• Add a button with ng-click
index.html

Directives
• ng-disabled directive
app.js
index.html

Directives
• ng-hide directive
index.html
app.js

Directives
products array
app.js

Directives
• ng-repeat directive
index.html

Directives
• ng-class directive
index.html
styles.css

FILTERS

Filters
index.html
formats for
currency, date, …
app.js

Bidirectional data binding!
When ng-click changes…
…the expression {{store.displayLimit}} (and limitTo) is
automatically updated!

ROUTING

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

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…

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

SERVICES

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.)

$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()

Angular Training: 3-day course in Canada!

Introduction to SPAs with AngularJS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Introduction to SPAs with AngularJS

Similar a Introduction to SPAs with AngularJS (20)

Más de Laurent Duveau

Más de Laurent Duveau (20)

Último

Último (20)

Introduction to SPAs with AngularJS