Download as PDF, PPTX
![© 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)
![© 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/75/Introduction-to-SPAs-with-AngularJS-43-2048.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/75/Introduction-to-SPAs-with-AngularJS-48-2048.jpg)
Uploaded byLaurent Duveau
Introduction to SPAs with AngularJS
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.
More Related Content
Similar to Introduction to SPAs with AngularJS
![Xamarin.Forms [french]](https://cdn.slidesharecdn.com/ss_thumbnails/xamarinforms-150611014646-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![Windows 8: Live tiles, badges et notifications toasts [french]](https://cdn.slidesharecdn.com/ss_thumbnails/win8-tiles-badges-notifications-130619124528-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to SPAs with AngularJS
- 1. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Introduction to SPAs with AngularJS @LaurentDuveau AngularAcademy.ca
- 2. © LDEX, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015 Agenda • SPA ? • AngularJS ? • Setup and first project • Modules • Controllers • Directives • Filters • Navigation with Routing • Services • REST API
- 4. © LDEX, 2015JavaScript Open Day Montreal, November 2015 SPA ?
- 5. © LDEX, 2015JavaScript 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, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015 Wait… another Js framework ?
- 8. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Another Js framework, really !?? “there are more JavaScript frameworks than JavaScript developers”
- 9. © LDEX, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015 SETUP AND FIRST SAMPLE!
- 11. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Setup index.html
- 12. © LDEX, 2015JavaScript Open Day Montreal, November 2015 First sample index.htmlbinding directives
- 13. © LDEX, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015
- 15. © LDEX, 2015JavaScript Open Day Montreal, November 2015 MODULES
- 16. © LDEX, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015 Modules index.html app.js
- 18. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Modules index.html app.js runs this module when page load dependencies none, for now…
- 19. © LDEX, 2015JavaScript Open Day Montreal, November 2015 CONTROLLERS
- 20. © LDEX, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015 Controller index.html directive controller name alias controller scope binding app.js
- 22. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Controller index.html directive controller name alias controller scope binding app.js
- 23. © LDEX, 2015JavaScript Open Day Montreal, November 2015 DEMO!
- 24. © LDEX, 2015JavaScript Open Day Montreal, November 2015 DIRECTIVES
- 25. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-model directive
- 26. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • Add a button with ng-click index.html
- 27. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • Add a button with ng-click index.html
- 28. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-disabled directive app.js index.html
- 29. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-disabled directive app.js index.html
- 30. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-hide directive index.html app.js
- 31. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives products array app.js
- 32. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-repeat directive index.html
- 33. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-repeat directive index.html
- 34. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-class directive index.html styles.css
- 35. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Directives • ng-class directive index.html styles.css
- 36. © LDEX, 2015JavaScript Open Day Montreal, November 2015 FILTERS
- 37. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Filters index.html formats for currency, date, … app.js
- 38. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Filters index.html formats for currency, date, … app.js
- 39. © LDEX, 2015JavaScript Open Day Montreal, November 2015
- 40. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Bidirectional data binding! When ng-click changes… …the expression {{store.displayLimit}} (and limitTo) is automatically updated!
- 41. © LDEX, 2015JavaScript Open Day Montreal, November 2015 ROUTING
- 42. © LDEX, 2015JavaScript 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, 2015JavaScript 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, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015
- 46. © LDEX, 2015JavaScript Open Day Montreal, November 2015 SERVICES
- 47. © LDEX, 2015JavaScript 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, 2015JavaScript 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, 2015JavaScript Open Day Montreal, November 2015
- 50. © LDEX, 2015JavaScript Open Day Montreal, November 2015
- 51. © LDEX, 2015JavaScript Open Day Montreal, November 2015 Angular Training: 3-day course in Canada!