Introduction to SPA with AngularJS

2,727 views

Published on

It's a talk that I gave on Talk.JS Singapore @ July 1st, 2013. Talking about introduction to building SPA with AngularJS.

I only have 2 weeks experience using AngularJS by the time I wrote this, so there might be a lot of missing gap about development best practices.

My trully intention is just to share my experience to a beginner like me.

Published in: Technology, Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,727
On SlideShare
0
From Embeds
0
Number of Embeds
759
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to SPA with AngularJS

  1. 1. Introduction to SPA Riki Pribadi
  2. 2. Riki Pribadi @flakeware Python Developer Source Code Example: https://github.com/rpribadi/example-spa-angular
  3. 3. I Hate JavaScript
  4. 4. So what is AngularJS?
  5. 5. Just another jQuery?
  6. 6. At some point, yes...but.... It's more than just that! It's something bigger! It's a framework! SPA!
  7. 7. SPA? This SPA?
  8. 8. Oh, you mean this SPA?
  9. 9. So, what is SPA? 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. 10. Why do we need SPA? Singlepageappbook.com "The main reason is that they allow us to offer a more-native-app-like experience to the user."
  11. 11. More-Native-App-Like Experience? Sadly speaking, yes! Just 'more'...it's not really native.
  12. 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. 13. So, IMHO... It's harder than the usual web apps It's duplicating validation step, but I guess it's quite normal nowdays
  14. 14. So, IMHO... Unless you have 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. 15. What does SPA look 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. 16. OK, so where should I start? AngularJS Home Page http://angularjs.org
  17. 17. That sounds nice! And here comes the famous Hello World example! Followed by simple TODO app! And suddenly they talk about modules, directive, dependency injection, service, factory....
  18. 18. I was like...
  19. 19. Rule of thumb Don't be like, "A solution tries to find a problem" Be like, "A problem tries to find a solution"
  20. 20. So what is the 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. 21. OK, let's set up the project You can manually setup your project folder OR You can use available project templates out there: - angular-seed - ng-boilerplate
  22. 22. The Angular Way
  23. 23. I use angular-seed
  24. 24. Identify requirements I will need: - dashboard page - CRUD page for category - CRUD page for todo item
  25. 25. New Project Layout
  26. 26. Main Page (index.html) <!doctype html> <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. 27. Index Category
  28. 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. 29. partials/organize/category/index.html <h1>Category List</h1> <table class="table"> <tr> <th>#ID</th> <th>Category</th> <th>Action</th> </tr> <tr ng-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. 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. 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. 32. Why do we need Service? It's all related to GLOBAL Global State Global Function Global Helper
  33. 33. That's all...

×