Single Page Application using AngularJS

A Single Page Application is what everybody want their web app to be these days, So, What is SPA exactly? It is a web application technology where  everything will be in a single HTML page with different routes provided in the module. it has many features like no page reloads, caching all the data, changing only needed data on a page dynamically,high level scaling.

This can be done by proving routes for each HTML page and the condition to satisfy in order to view the HTML page. The templateUrl of each route can also be given at the route and one can also be associated with each controller or same controller. Let us see this with an example,

SPA5

In the above example, myPinkSAP is my module. What is a Module? It is the one where all the services, directives, controllers are stored in. And I have associated this module with a variable name called myPinkSAPVar. Now, the variable is used to configure our routes by injecting provider. And the module has a dependency of ngRoute. The syntax of it is – .config(function(injectables) 

templateUrl and controller are the functions which returns the URL of the page we want to route and the controller we want to associate the page with.

All the business logic can be written in controllers, it can be written by having a $scope injected to the function. This scope can be used to add behavior to the controller, in this example I have created two different controllers – PartyController and Work Controller which display data associated to $scope.

SPA2

All the above code is written in a JavaScript file, this .js file included in a <script> tag in HTML page in which  angularJS  and angularJS-route is imported. This can be done as below-

SPA3

To associate this HTML tag with the module, use ng-app directive and use anchor tag to link the .html pages to the page. To view all the .HTML pages associated in a page use ng-view directive. One can use partial views to make it efficient.

SPA4

Simple, run the HTML code and view it to view your application. The whole code can be found here – https://github.com/sirishagavini/AngularJS—Single-Page-Application-

Being M.E.A.N is good! (MongoDB, Express, AngularJS, Node.js)

How on Earth, it can be a good thing when someone is being MEAN? In Web developing world, being M.E.A.N can take a web application to a whole new level. Well it is an acronym of MongoDB, Express, AngularJS, Node.js. It is nothing but using AngularJS on client side and Node.js platform with Express framework on the server side and having MongoDB as the database. But what is so special about bring MEAN stack when there are tons of web technologies of building a web app, M.E.A.N is special in its own way of being flexible in terms of Scalable and providing good quality for the web app.

MongoDB: It is  a NoSQL document database, it is a non-structured database where documents will be stored in JSON (easily parsed), which will be internally represented in a BSON format to support extra datatypes like BinData type.

      Wait, what is BSON?  It is a Binary JSON, a binary serialization format used to store documents.

      Why BSON? It is helpful in encoding and decoding the data in a better way.

Express: Express is a Node.js web application framework, which is known for its robustness for building web and mobile applications, data integrations and . There are many Node.js frameworks like hapi.js , koa.js, Mojito and many other frameworks but Express is widely chosen by many web application developers.

AngularJS: It’s been a blessing to all web developers since its release. It helps in avoiding writing thousands of lines of code and allows to write it in MVC (Model View Controller) . It has many features like data binding, dependency injection, directives, filters and many more. It is used as a front end (Client Side) in the MEAN stack. It makes AJAX calls to retrieve data from the API, as the data is in JSON format it is very easy to retrieve the data to the front end.

Node.js: It is used to build  server side web applications with scalability and cross-platfrom compatability.  Best part of Node.js is its support for Single Page Applications, it never waits for an API to retrieve a data which makes it that it will never buffer. It is on Server side of the application usually with Express framework.

Testing: We can run simple task runners like GRUNT or GULP to test by running the test scripts but it also many testing frameworks like Karma, Mocha are available for testing MEAN Stack.

Using MEAN is still a naive practice as it need some bold migration from a traditional practices of storing data and accessing it from the server but it is slowly getting into the big race, many big Organizations like Netflix, Paypal use MEAN stack.