Design Pattern in Angular JS Application - Full Stack Solutions

April 03, 2018 0 Comments

Design Pattern in Angular JS Application - Full Stack Solutions

 

 

In this series of blog of Design Pattern in Large Scale JavaScript Applications, you have bit clear to the concept of Object Oriented JavaScript Design Patterns and how to use them though.

An Angular JS Application uses the Design Pattern that’s much popular DI (Dependency Injection)** . In this article we take a look how Angular JS adopt the traditional Design Pattern of JavaScript that are composed with Angular JS Components.

For the encapsulation code should be segregated,for the Low Coupling and High Cohesion (Dumb rule).

– partials
– controllers
– directives
– services
– filters

Partials In Angular JS there are different HTML files not like React applications where we render the HTML string from the Component itself and angular expression are like the mediator for connecting the controller to the view.

controllers are responsible for the handling user – interaction events.

directives  are used for handling Dom manipulation in the UI.

Filters  are required for formatting data.

Services are the piece of components that belong to the components so basically it consist of logic that’s persistence like $http,XHR,Sockets

Model in Angular JS follows the Singleton Design Pattern.So Models are the way where we can unit test our piece of data.

As model should encapsulate some logic in terms of data and state, it should architecturally restrict access to its members thus we can guarantee loose coupling.

Each Service uses the Singleton , because each service is instantiated no more than a single time.This way services are Singleton but not implemented through the Singleton Pattern.

It’s really hard to test code that uses singletons.

Typically, the code you want to test is coupled strongly with the
singleton instance. You can’t control the creation of the singleton
object because often it is created in a static initializer or static
method. As a result, you also can’t mock out the behavior of that


Singleton instance

Model in Angular JS follows the Singleton Design Pattern . So Models are the way where we can unit test our piece of data.

As model should encapsulate some logic in terms of data and state, it should architecturally restrict access to its members thus we can guarantee loose coupling.

All these MVW frameworks use 3 layers:

 

But there are two fundamental issues with this when it comes to clients:

  • The model is partial, stale and doesn’t persist.
  • No place to put application logic.
  • Javascript MVC are a bit of a departure from traditional MVC as the server-side interpretation of MVC doesn’t translate 1:1 to the client-side

The real deal here is the application business rules layer (Use cases), which often goes amiss on clients.

Promising Data in Services By combing multiple asynchronous processes it will generate callback loop by nesting all the callbacks.

$.get(‘api/mytest/42’, function(mytest) { $.get(‘api/mytest1/’ + gizmo, function(mytest1) { $.get(‘api/mytest2/’ + foobar, function(mytest2) { doSomethingWith(mytest, mytest1, mytest2); }, errorCallback); }, errorCallback); }, errorCallback);

For handling nesting callbacks the solution is the Promise that is pretty simple .

source: http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semantics

Deffered will react like a signal to start the work.

A Promise is the output having certain state like pending, rejected.

Just like that you assign a handler that should be called once a promise is getting resolve or rejected.AngularJS uses its own implementation of the Promises spec, the [q service](“The Angular.$q service”), which in turn is a lightweight implementation of the Q library.




Tag cloud