Introduction to SPAs with AngularJS

© LDEX, 2015 JavaScript Open Day Montreal, November 2015

Introduction to SPAs with

AngularJS

@LaurentDuveauAngularAcademy.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, dependencyinjection, …

SPA are client-centric application… so coded withJavaScript

… 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

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

dependenciesmodulename

AngularJS!


Modules

index.html

app.js


Modules

index.html

app.js

runs this module when page load

dependenciesnone, 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

controllerscope

binding

app.js


Controller

index.html

directive controller name alias

controllerscope

binding

app.js


DEMO!


DIRECTIVES


Directives

• ng-model directive


Directives

• Add a button with ng-click

index.html


Directives

• Add a button with ng-click

index.html


Directives

• ng-disabled directive

app.js

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-repeat directive

index.html


Directives

• ng-class directive

index.html

styles.css


Directives

• ng-class directive

index.html

styles.css


FILTERS


Filters

index.html

formats for currency, date, …

app.js


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 productsvm.products = Product.query();

// Form data for creating a new product with ng-modelvm.productData = {};vm.newProduct = function() {var product = new Product(vm.productData);product.$save();

}});

also get(), remove(), delete()




Angular Training: 3-day course in Canada!

Technology

Introduction to SPAs with AngularJS