Your SlideShare is downloading. ×
Introduction to SPA with AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to SPA with AngularJS

1,878

Published on

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

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
1,878
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to SPA Riki Pribadi
  • 2. Riki Pribadi @flakeware Python Developer Source Code Example: https://github.com/rpribadi/example-spa-angular
  • 3. I Hate JavaScript
  • 4. So what is AngularJS?
  • 5. Just another jQuery?
  • 6. At some point, yes...but.... It's more than just that! It's something bigger! It's a framework! SPA!
  • 7. SPA? This SPA?
  • 8. Oh, you mean this SPA?
  • 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. 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. 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 harder than the usual web apps It's duplicating validation step, but I guess it's quite normal nowdays
  • 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. 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. OK, so where should I start? AngularJS Home Page http://angularjs.org
  • 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. I was like...
  • 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. 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. 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. The Angular Way
  • 23. I use angular-seed
  • 24. Identify requirements I will need: - dashboard page - CRUD page for category - CRUD page for todo item
  • 25. New Project Layout
  • 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. Index Category
  • 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> <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. 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 we need Service? It's all related to GLOBAL Global State Global Function Global Helper
  • 33. That's all...

×