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