Angular JS Javascript Design Patterns

1. Angular JS

2. Prototype Pattern
• Every JS object has a prototype. The prototype is also an object.
• All JS objects inherit their properties and methods from their prototype.
Ex:
new Object() – inherit from a prototype called Object. prototype
new Date() – inherit from a prototype called Date. Prototype
• Functions loaded into memory once
• Variable/functions taken out of global namespace
• Comprised of a constructor and a prototype
• Override functions/properties
Ex: Calculator.prototype.add = function( x, y){………………….};

3. Prototype Pattern Structure
Constructor
Method will be loaded only once

4. Namespace to avoid name collisions

5. Module Pattern
• Variable/functions taken out of global namespace
• Expose only public members while hiding private members
• Functions may be duplicated across objects in memory
• Not easy to extend.

6. Module Pattern Structure

7. Revealing Module Pattern
• Similar to Module Pattern
• “Cleaner” way to expose public members

8. Revealing Module Pattern Structure
Lower Case : Bcoz don’t need to use new keyword
Self Executing Function

9. Revealing prototype pattern
• Combines Prototype + Revealing Module
Pattern
• Functions loaded in memory only once
• Extensible

10. Revealing prototype pattern structure

11. Framework Vs Library
• Library : A set of function to call.
• Each function does some work, and returns the
control back to you.
• You are in charge
• Framework : Has a behavior built in
• We plugin into it, register our classes and the
framework code is calling our code in a point in
time
• You are not in charge

12. Why AngularJS?
• Modularity – application to grow / add features painlessly
• Reusability – Reuse/ share components across projects
• Readability
• Embeddable – plug-in functionality
• Learning curve – embrace web standards - HTML, CSS, JavaScript
• Testable – Minimum effort
• Extendable – add new/replace functionality to framework
• Services – packed with collection of core services
• Flexibility – Choose own folder structure / model data my way
• Community
• Open Source
• Video Resources : Codeschool , egghead.io

13. Features
• Directives
• 2 Way data binding
• Model-View-Controller
• Modules
• JQLite
• Routes
• Services

14. Modules
• Container
• To keep code clear
• To keep code separated
• To easily include all need parts
angular.module(‘myApp’,[]);

15. Directives
• Cool way to extend HTML – attributes,
elements and comments
• Ex: ngApp , ngModel, ngBind or {{}}, ngIf,
ngRepeat,ng-src, ngController, ngClick,
ngSubmit etc

16. Scope
• Watch for changes to models
• Apply changes to models
• Hierarchical in a similar fashion to DOM
elements
• Glue between controller (imperative logic) and
DOM (declarative logic)

17. Controllers
• Imperative logic (a testable unit)
• Creates a new scope
• Use the controller method instead of global
scope
• Business logic for a single view
• No DOM manipulation
• Should not be stateful – use services for this
• Should not maintain the lifetime of other
components

19. Services
• Participate in dependency injection
• Swappable with mocks/stubs for testing
• Must be registered with a module
• Lazy instantiation
• Data can reside in the scope hierarchy,
functionality should reside in the service
• Popular Angular services $http, $location,
$window, $q, $log

20. Routing
• Key to “SPA” functionality
– The page can change without using the server
• The ngView is often used to render a template
– HTML templates loaded when needed
– Can also be preloaded as script with type=“text/ng-template”
• The $routeProvider service is used to configure
the route
• The $location service can be used to navigate

21. DEMO