Better Understanding of Angular JS, React JS and Node JS

danguu

We all know we are in next generation of JavaScript, where we are getting everything customized as per user requirements. For the same thing we have Angular JS, React JR and Node JS. These are three most useful programming language of current years. Here is  the overview of Angular JS, React JS and Node JS:

screen-shot-2016-11-27-at-5-15-15-pm

Here is the description of all three new technologies.

 

Angular JS: Some of Angular Devs developed Angular JS with the primary purpose of addressing single page application creation challenges. Angular JS simply works with MVC platform, where it simplifies development by providing a reliable. Angular JS follow some guidelines, like- Angular data binding In Angular JS, the model and the view are linked to allow automatic data synchronization between the two.

In angular JS Any changes to the view are instantly propagated on to the model and vice versa. This property makes Angular app development less demanding as the programming model is simplified for the coder. Angular modular development Building modular rich client-side applications that are well structured is now possible with Angular. Modules are created in separate Js files and are essential in the separation of logic. They play a vital role of keeping the code organized. Examples of Angular Js modules include controllers, applications, and services. Every part of the application is kept in a separate container to keep the code clean.

Let’s discuss with an Example (Create an expression in Angular):

 

<html>

         <head>

         <script src=” https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js”>

         </script>

         </head>

         <body>

                  <div ng-app>

                  <p> Expression {{10+10}} </p>

                  </div>

         </body>

</html>

 

Angular code creates a module. Here we can define

Here we can define <div ng-app=”myApp”> … </div>

And can add script: var app = angular.module(“myApp”, []);

For More Visit: https://angularjs.org/

 

React JS: Again a revolutionary platform, it provides us high-performance client and server side rendering with a one-way flow for data binding, This is my favorite technology. When I work on this feel like flying in sky. React JS is based on building reusable components of code base which makes app very light weight, more of a library, which makes it quite easy to work with. I think React is more of a library than a framework. It can best be described as an application view that allows the programmer to utilize reusable components again and again. It is composed of its own React libraries, tools, and solutions that developers can use to build their own JS framework.

See the code:

1

See the benefits in above table and Read more, know more about react JS :

https://facebook.github.io/react/

 

Node JS: This is the platform, where I’ve not worked a lot, but this is the time when I am learning Node JS. It is a JS run time platform powered by Google chrome V8 Javascript engine. Node JS can be described as Javascript that has been given the ability to run on the computer, instead of the browser, like normal JS. This is made possible by the V8 JavaScript run time engine.

Based on a module architecture, Node simplifies the development of complex applications. It is works on an event-driven non-blocking IO model and is adapted for developing server side applications in JavaScript. It allows you to build Utilities that you can concatenate and create JavaScript files with on your machine.

See the code:

 screen-shot-2016-11-27-at-5-45-44-pm

See the benefits of Node JS in above list, Also read more know more abote Node:

https://nodejs.org/en/

So there are 3 different tools, bound by their common dependence on Javascript. Start working with these tools and learn As much as you can.

Create a new AngulaJS controller

Controllers are the heart and most important component of an AngularJS Application. AngularJS controllers are not always clearly defined in some JavaScript client side frameworks, and that tends to confuse programmers who have good experience in MVC. So this never happens with AngulaJS, AngularJS always defines controllers.

Everything in an AngularJS application passes through a controller. Dependency injection is used to add the needed dependencies. See given example.

This tells how to create a new controller:

/* Comment */

Screen Shot 2016-05-03 at 2.13.47 AM

  • In above code first I created a new model : addonsController (Using call to module method of angulaJS)
  • Then I created a new controller: addonsCtrl (By Calling the controller of above module)
  • So we created all controllers which will be added in addonsControllers module.
  • Here we have used JSON.stringify method. This line log the JSON that’s returned from the web service to the JavaScript console. We can simply access the JS console to troubleshoot REST service issue by seeing the JSON logged in success call back function.

This controller plays an important role in the Application. It represents many dependencies. It also has some primary responsibilities, which will explore in next article.

So this is the simple method by which we can create a new controller in AngularJS.