Introduction to SPAs with AngularJS
0 likes579 views
The document is an agenda for an introduction to single page applications (SPAs) using AngularJS. It begins with defining what an SPA is and then introduces AngularJS as a JavaScript framework for building SPAs. The agenda then covers setting up a first AngularJS project, using modules, controllers, directives, filters, routing, and services. It provides examples for each topic and emphasizes concepts like two-way data binding, dependency injection, and using AngularJS features to interact with REST APIs.
![© 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…](https://image.slidesharecdn.com/jsopenday-angular-151120151957-lva1-app6891/85/Introduction-to-SPAs-with-AngularJS-43-320.jpg)
![© 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()](https://image.slidesharecdn.com/jsopenday-angular-151120151957-lva1-app6891/85/Introduction-to-SPAs-with-AngularJS-48-320.jpg)
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!