1. SPA, SCALABLE APPLICATION
& ANGULARJS
Mitch Chen

2. WHAT IS SPA ?

3. SINGLE PAGE APPLICATION

4. SPA ECOSYSTEM CATEGORIES

5. SCALABLE APPLICATION

6. SA ARCHITECTURE
• Base Library (jQuery, Zepto.js etc.)

7. SA ARCHITECTURE
• Application Core (aka Application Controller)
✴ Manage Modules
✴ Handle Errors
✴ Enable Inter-Module Communication
✴ Extensible
✴ Can use Base Library

8. SA ARCHITECTURE
• Sandbox
✴ Facade for modules above the core (Security Guard)
✴ Interaction between modules via messages (events)
✴ Ensures a consistent interface

9. SA ARCHITECTURE
• Modules
✴ Don’t know about each other, only about sandbox
✴ Call only own methods or sandbox methods
✴ DOM access only inside own box (But don’t use Base
Library)
✴ No access to non-native global objects, don't create global
objects
✴ Ask sandbox for anything you need, don't reference other
modules
✴ Preferably no access to base library, use pure JS

11. ANGULARJS ARCHITECTURE
• Base Library
✴ jQuery or AngularJS’s own jqLite implementation
• Application Core
✴ AngularJS itself
• Sandbox
✴ Scope passed to the controller
• Module
✴ AngularJS’s controller

12. KEY FEATURES OF ANGULARJS
• Declarative HTML approach
• Easy Data-Binding
• Reusable Components
• MVC/MVVM Design Pattern
• UnitTesting
• Routing
• Templating

13. KEY FEATURES OF ANGULARJS
• Modules
• Services
• Expressions
• Filters
• Directives
• FormValidation
• $scope, $http, $routeProvider

14. LET’S ANGULARJS !!

15. Q & A