Download - SPA, Scalable Application & AngularJS
SPA, SCALABLE APPLICATION & ANGULARJS
Mitch Chen
WHAT IS SPA ?
SINGLE PAGE APPLICATION
SPA ECOSYSTEM CATEGORIES
SCALABLE APPLICATION
SA ARCHITECTURE
• Base Library (jQuery, Zepto.js etc.)
SA ARCHITECTURE
• Application Core (aka Application Controller)
✴ Manage Modules
✴ Handle Errors
✴ Enable Inter-Module Communication
✴ Extensible
✴ Can use Base Library
SA ARCHITECTURE
• Sandbox
✴ Facade for modules above the core (Security Guard)
✴ Interaction between modules via messages (events)
✴ Ensures a consistent interface
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
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
KEY FEATURES OF ANGULARJS•Declarative HTML approach
• Easy Data-Binding
• Reusable Components
•MVC/MVVM Design Pattern
• Unit Testing
• Routing
• Templating
KEY FEATURES OF ANGULARJS•Modules
• Services
• Expressions
• Filters
•Directives
• Form Validation
• $scope, $http, $routeProvider
LET’S ANGULARJS !!
Q & A