![The URL Conf: js/app.js angular.module('myApp', ['CategoryModule.controllers']). config(['$routeProvider', function($routeProvider) { $routeProvider.when( '/organize/category/index', { templateUrl: 'partials/organize/category/index.html', controller: 'CategoryIndexController' }); }]);](https://image.slidesharecdn.com/introductiontospawithangularjs-130701101555-phpapp01/75/Introduction-to-SPA-with-AngularJS-28-2048.jpg)
![js/organize/category/controllers.py angular.module('CategoryModule.controllers', ['CategoryModule.services']). controller('CategoryIndexController', ['$scope', '$$category', function($scope, $$category) { $scope.categories = $$category.all(); $scope.del = function(id) { $$category.del(id); $scope.flash = "Category Deleted."; }; }]) ...](https://image.slidesharecdn.com/introductiontospawithangularjs-130701101555-phpapp01/75/Introduction-to-SPA-with-AngularJS-30-2048.jpg)
![js/organize/category/services.js angular.module('CategoryModule.services', []).factory('$$category', [function() { var categories = {}; var latest_id = 1 var factory = {}; factory.all = function() { return categories; }; factory.del = function(id) { if (categories.hasOwnProperty(id)) { delete categories[id]; return true; } return false }; return factory; }]);](https://image.slidesharecdn.com/introductiontospawithangularjs-130701101555-phpapp01/75/Introduction-to-SPA-with-AngularJS-31-2048.jpg)
Uploaded byRiki Pribadi
Introduction to SPA with AngularJS
This document provides an introduction and overview of single page applications (SPAs) using AngularJS as an example framework. It discusses what SPAs are and why they are used, including how they allow a more native-like user experience. It then walks through setting up a sample SPA project for managing todo lists and categories using AngularJS, including creating routes, controllers, services and templates to support basic CRUD operations. The goal is to help understand the key concepts and setup needed to build a basic SPA.
Introduction to SPA with AngularJS
- 1. Introduction to SPA RikiPribadi
- 2. Riki Pribadi @flakeware Python Developer SourceCode Example: https://github.com/rpribadi/example-spa-angular
- 3.
- 4. So what isAngularJS?
- 5.
- 6. At some point,yes...but.... It's more than just that! It's something bigger! It's a framework! SPA!
- 7.
- 8. Oh, you meanthis SPA?
- 9. So, what isSPA? Singlepageappbook.com "Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models."
- 10. Why do weneed SPA? Singlepageappbook.com "The main reason is that they allow us to offer a more-native-app-like experience to the user."
- 11. More-Native-App-Like Experience? Sadly speaking,yes! Just 'more'...it's not really native.
- 12. So, IMHO... If GMAIL(web version) is not a SPA, will it really matter? If you wait 2 seconds longer, will it really matter?
- 13. So, IMHO... It's harderthan the usual web apps It's duplicating validation step, but I guess it's quite normal nowdays
- 14. So, IMHO... Unless youhave a damn good reason to build it as SPA, maybe, just maybe......deep down inside, you are a masochist developer OR We just love to challenge ourselves!
- 15. What does SPAlook like? Notice the URLs! https://mail.google.com/mail/u/0/#inbox https://mail.google.com/mail/u/0/#drafts https://mail.google. com/mail/u/0/#inbox/13f93d5835e1d04a ...
- 16. OK, so whereshould I start? AngularJS Home Page http://angularjs.org
- 17. That sounds nice! Andhere comes the famous Hello World example! Followed by simple TODO app! And suddenly they talk about modules, directive, dependency injection, service, factory....
- 18.
- 19. Rule of thumb Don'tbe like, "A solution tries to find a problem" Be like, "A problem tries to find a solution"
- 20. So what isthe problem (goal)? I want to create a SPA where: 1. I can manage my todo list 2. I can manage category of my todo list 3. Normally, I only need to see the dashboard page where all my todo list is group by category and I can check/uncheck the list items
- 21. OK, let's setup the project You can manually setup your project folder OR You can use available project templates out there: - angular-seed - ng-boilerplate
- 22.
- 23.
- 24. Identify requirements I willneed: - dashboard page - CRUD page for category - CRUD page for todo item
- 25.
- 26. Main Page (index.html) <!doctypehtml> <html lang="en" ng-app="myApp"> <body> <article ng-view></article> <footer>Let's learn AngularJS</footer> <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/organize/category/controllers.js"></script> <script src="js/organize/category/services.js"></script> <script src="js/organize/todo/controllers.js"></script> <script src="js/organize/todo/services.js"></script> </body> </html>
- 27.
- 28. The URL Conf:js/app.js angular.module('myApp', ['CategoryModule.controllers']). config(['$routeProvider', function($routeProvider) { $routeProvider.when( '/organize/category/index', { templateUrl: 'partials/organize/category/index.html', controller: 'CategoryIndexController' }); }]);
- 29. partials/organize/category/index.html <h1>Category List</h1> <table class="table"> <tr> <th>#ID</th> <th>Category</th> <th>Action</th> </tr> <trng-repeat="(id, category) in categories"> <td>{{ id }}</td> <td>{{ category.name }}</td> <td> <a href="#/organize/category/save/{{ id }}">Edit</a> <a ng-click="del(id)">Delete</a> </td> </tr> </table>
- 30. js/organize/category/controllers.py angular.module('CategoryModule.controllers', ['CategoryModule.services']). controller('CategoryIndexController', ['$scope','$$category', function($scope, $$category) { $scope.categories = $$category.all(); $scope.del = function(id) { $$category.del(id); $scope.flash = "Category Deleted."; }; }]) ...
- 31. js/organize/category/services.js angular.module('CategoryModule.services', []).factory('$$category', [function(){ var categories = {}; var latest_id = 1 var factory = {}; factory.all = function() { return categories; }; factory.del = function(id) { if (categories.hasOwnProperty(id)) { delete categories[id]; return true; } return false }; return factory; }]);
- 32. Why do weneed Service? It's all related to GLOBAL Global State Global Function Global Helper
- 33.