Should I use AngularJS or React?

Initially released in 2009, the Google-backed AngularJS has since risen to become the incumbent JavaScript framework of choice for building dynamic single page applications (SPAs) on the web. On the other hand, React was developed and released by Facebook in 2013 and is the relative “new kid on the block.” It brings some revolutionary new innovations to the “view” component of the Model View Controller (MVC) architecture.

While there is indeed some overlap in function, the two technologies are as different as Google and Facebook themselves. AngularJS is a framework, while React is a library. Read on to explore some of the key differences between the two technologies and learn how you can use one or both for your next web project.

AngularJS vs react
AngularJS vs react


AngularJS is a comprehensive JavaScript framework that contains everything you need to set up the client-side of a website. Like all frameworks, it provides a programming pattern or structure (in this case MVC) that helps streamline and standardize the web development workflow.

Some of the key advantages that have helped AngularJS rise in popularity are listed below:

  • Angular directives (extension to HTML)
  • Dependency injection
  • Two-way data binding
  • A solid templating engine
  • On-board form validation

Since AngularJS is a full-sized framework packed with features, let’s focus on how it handles the “V” portion of MVC so that we can make a more appropriate comparison with React.

AngularJS manipulates the DOM (Document Object Model) by extending HTML with directives. Thanks to two-way data binding, any changes to the view are also reflected in the data and vice versa. This has the advantage of reducing much of the programming overhead involved with syncing up the view with the model, which speeds up development time.

While two-way data binding works great for many applications, there are times when it can really start to slow things down—particularly when it has to manipulate or render large blocks of data-heavy content, like a photo gallery or lists containing hundreds of items. For applications like these, you might want to take advantage of Angular’s modularity and swap out the “V” for a more formidable rendering engine like React.


React (also known as React.js or ReactJS) is an open-source JavaScript library for rendering views. While full frameworks like AngularJS provide the model, view, and controller, React is a library that caters only to the view. It uses one-way data binding, but with a unique twist that helps it gain a huge performance advantage over competing technologies.

Let’s take a look at some of the key tech differentiators that make React stand out from the rest:


This is the key piece of tech responsible for the magic behind React’s amazing rendering performance. Instead of manipulating the DOM directly (which can be error prone), React stores two copies of a Virtual DOM, the original and an updated version that reflects changes fed in from the view. The two versions are run through a React function that singles out the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed. As a result, time and resources are saved, as only the parts that are actually changing are affected by changes in the view.


JSX files go against the modern tendency to want to keep HTML and JavaScript code separate. This isn’t a bad thing with React’s sleek and simple syntax, however—you end up with a single self-contained component that tells you exactly how it will render in the view. It also helps that it’s optional, so those who are more accustomed to traditional programming paradigms don’t have to use it if they don’t want to.


Server-side rendering also goes against a relatively recent trend of rendering everything on the client-side. React can be rendered on both the client and server, giving greater coding flexibility and giving the Virtual DOM the breathing room it needs to really spread its wings.


Normally when you try to build an app for mobile devices using JavaScript, you have to rely on a cross-platform framework like Cordova or Ionic. While these frameworks can greatly speed up development time, they’ll never be as sleek and smooth as a native app. Enter React Native, a framework that enables you to build components for native UI widgets the same way you build them for HTML. React treats the view layer as a pure output of state, so switching its purpose from the web to mobile is as simple as swapping your tags for tags via thev React Native framework. It also means your mobile app benefits from the same principles that make React so blazingly fast for web applications. JavaScript code will never be as fast as the native code for a device, but for most tasks, React Native is more than capable of delivering a smooth user experience.


React shines when you have lots of dynamic content changing within the view. Most client-side solutions on the web today struggle with rendering large lists of items within a single view. This “struggle” may be on the order of milliseconds, but in this increasingly digital world, a half a second delay is all it takes to kill your user experience. It’s why sites that have a lot of dynamic, constantly changing, data-intensive content like Instagram or Facebook choose to power their applications with React.

As a library, you can also use React as the view component of AngularJS or other frameworks, because it does not tie you to a specific technology stack. That said, there’s a quickly growing community and a number of existing libraries and add-ons that can help you build an app from scratch. Consider Flux, the application architecture Facebook uses to create an application powered by React. React is also perfect for those familiar with ClojureScript and its immutable data structures—the Om project is the rising star for those looking to build dynamic applications using these technologies.


Development time is at a premium, and you need a full, comprehensive framework that will get you running quickly out of the box. As we mentioned earlier, comparing a library to a framework isn’t really a valid question, as you can always use one with the other.

The real question to ask is when shouldn’t you use React? React is not backwards compatible with browsers older than IE8. Also, the community is young, so it’s possible you’ll have to do a lot of “reinventing of the wheel” in order to get the specific features you’re looking for. It’s also up for debate whether or not installing React is worth the trouble if your project is either a simple webpage or if AngularJS is already more than capable of rendering your view.

With the recent release of Angular 2.0 on May 2, 2016, Angular devotees have another reason to stick with their framework of choice. Angular 2.0 shipped with a huge performance boost, including support for server-side rendering and a similar approach to using one-way data binding to only manipulate the parts of the DOM that need to be changed. However, Angular 2.0 also involved a major rewrite of the framework, so whether you choose to install React or upgrade to the next generation of Angular, there’s still going to be a learning curve to overcome.

Angular Material Autocomplete Example with Ajax Request

Hello Friends,

Today I am going to show you how to make a search page with Auto complete component of Angular Material JS.

So problem statement will be, I need to created an Single Page App where i can search for Movie Poster on basis of Movie Name.


Inorder to create a Single Page App, I have used AngularJS, Angular Material JS, Angular Animate for Animation , Angular Aria and Angular Message.

For CSS i have used default css of Angular Material

<link rel="stylesheet" href="">
      <!-- Angular Material requires Angular.js Libraries -->
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

  <!-- Angular Material Library -->
  <script src=""></script>

Firstly I have created a template using Default template Code of Angular Material Autocomplete

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
      <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          placeholder="What is your favorite US state?">
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
          No states matching "{{ctrl.searchText}}" were found.
          <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
      <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
      <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
      <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
      <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>

for JavaScript

(function () {
  'use strict';
      .module('autocompleteDemo', ['ngMaterial'])
      .controller('DemoCtrl', DemoCtrl);
  function DemoCtrl ($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled    = false;
    // list of `state` value/display objects
    self.states        = loadAll();
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;
    self.newState = newState;
    function newState(state) {
      alert("Sorry! You'll need to create a Constituion for " + state + " first!");
    // ******************************
    // Internal methods
    // ******************************
     * Search for states... use $timeout to simulate
     * remote dataservice call.
    function querySearch (query) {
      var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
    function searchTextChange(text) {
      $'Text changed to ' + text);
    function selectedItemChange(item) {
      $'Item changed to ' + JSON.stringify(item));
     * Build `states` list of key/value pairs
    function loadAll() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';
      return allStates.split(/, +/g).map( function (state) {
        return {
          value: state.toLowerCase(),
          display: state
     * Create filter function for a query string
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);

Now in above javascript code snippet, there is function “loadAll” which loads all the hard coded state value from variable “allStates” in the array objects.

Now we don’t require hard code value, we need something dynamic like an AJAX request which will request an api for the values.

So, let us modify “loadAll” function, according to our need

I am using OMDB Api for getting Movie Name and Movie Poster.{keyword}

Creating an http Service,

app.factory('AutocompleteSearchService', ['$http', function($http){
    return {
        get: function(text) {
            return $http.get("autocomplete.php?keyword=" + text);

Using that service in loadAll Function and modify it

  function loadAll(query) {
    AutocompleteSearchService.get(query).success(function(data) {
      var loadItems = [];
      loadItems ={
        return {
          value: obj.title.toLowerCase(),
          display: obj.title
      self.states = loadItems;

Update the self.state variable to empty array object.

before : self.states        = loadAll();

after  : self.states = [];

Call “loadAll” function in “querySearch” function and pass query object to “loadAll” function,

function querySearch (query) {
        var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
         return deferred.promise;
      } else {
        return results;

Now hit, CTRL+f5 and check whether Autocomplete is working or not.I hope it will work. if not you can refer example  link .

Now Autocomplete is done, displaying result on selecting the Autcomplete value is remaining, let us finish that also.

update <Body> html below html snippet

<md-card  ng-if="ctrl.displayResult">
 <img ng-src="{{ ctrl.result.image }}" class="md-card-image" alt="{{ctrl.result.display}}" >
   <p>Card content</p>
   Card footer

Update md Autocomplete Template,

          md-items="item in ctrl.querySearch(ctrl.searchText)"
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

if you check mdAutoComplete snippet, you will find a small change which is,


displaySearchedResult(item)” is a function need to be create in a controller, by default “mdAutoComplete” directive will pass the selected item in “displaySearchedResult” function.

function displaySearchedResult(selectedItem) {
       self.displayResult = true;
       self.result = selectedItem;

Now hit CTRL+F5 and you are done.

So we have completed our problem statement successfully.In case you are not able to achieve it. I am providing a link of an example.

Thank for Reading.


ReactJS Fundamentals – 100% free Online Course


This course is for front-end developers who want to get a head-start in ReactJS by learning the fundamentals as quickly as possible.

Students who take this course will learn to use React components, JSX and React’s top-down design methodology to build interactive interfaces while cutting down on code complexity.

The course is presented in a series of videos, quizzes and coding exercises. Students can choose to code along with the lectures, or download sample code provided with each lecture.

The course dives straight into a simple demonstration application to provide an overview of React concepts, all of which are explored later in the course in detail as students build the second, larger example application.

If you want to get up to speed in ReactJS as quickly as possible, this is the course for you!

What are the requirements?

  • You should have a basic understanding of Javascript.
  • You should be understand how HTML, Javascript and CSS work together.
  • You should be comfortable typing code in a plain text-editor and running it in a browser.

What am I going to get from this course?

  • Create web interfaces using React components and JSX
  • Understand the advantage of using React
  • Understand how JSX becomes HTML and Javascript
  • Create reusable components using JSX
  • Reduce code complexity using React’s event model
  • Understand how pages render using React’s virtual DOM

What is the target audience?

  • Developers who understand Javascript
  • Front-end developers who have worked with other JS frameworks in the past (e.g. Angular)
  • It is NOT for developers who wish to use React with server-side Javascript
  • It is NOT for developers who with to learn a workflow using broserify/gulp/grunt etc and ReactJS

Take it now!

AngularJS vs. Ember.js: Which JavaScript Framework Is Best For You?

A lot has changed since the early days of the web when a website would make a single request to the server, which would respond with the entire webpage to be displayed. Back then, the client-side of an application was a paper-thin veneer of HTML, query parameters, cookies, and request headers—and servers did all the heavy lifting.

It’s a very different story today. The front-end of modern websites is now complex enough to handle much of the magic that allows single page applications (SPAs) to deliver the sleek “desktop-like” user experiences that make them so popular. In this article, we’ll look at two of the most popular JavaScript frameworks available for building SPAs—AngularJS and Ember. Both are open-source frameworks based on the model view controller (MVC) design pattern that use wildly different design philosophies to achieve their goals.

Angularjs Vs EmberJs

Read on to learn more about these two competing frameworks.

What Is AngularJS?

AngularJS is a comprehensive, open-source JavaScript framework that solves the problem of developing SPAs by extending the functionality of HTML with directives. AngularJS famously describes itself as “what HTML would have been, had it been designed for building web apps.” The framework places an emphasis on simple modular code and test-driven development.

Some of the key technical features that differentiate AngularJS from Ember are:

Simplified syntax by using vanilla JavaScript objects for modelsDOM-based templating with directivesDependency injectionMore flexible opinionation

AngularJS places an emphasis on getting your app up and running quickly. It opts for syntactic simplicity by using JavaScript objects for models. However, this comes with the performance tradeoff of relying on “dirty checking,” in which a deep comparison on all models within the view must be performed.

Angular developers must be wary of the number of bound objects within the view in order to avoid bogging down the application’s digest cycle. This isn’t usually an issue for most SPAs, but it is the major reason the newly released Angular 2.0 added server-side rendering and one-way data binding, among other major rewrites.

What Is Ember?

Ember combines proven concepts from native frameworks like Apple’s Cocoa with the lightweight sensibilities of open-source frameworks like Ruby on Rails and Backbone.js to create an open-source JavaScript framework that can scale with an entrepreneur’s ambitions. Like AngularJS, Ember is a full-featured framework that specializes in making dynamic, beautifully rendered SPAs. Let’s take a look at some of the key factors that differentiate Ember from AngularJS:

Avoids “dirty checking” by using accessorsString-based templating system with HandlebarsHigh degree of opinionationMore powerful routing at the expense of added complexity

Ember emphasizes scalability—it’s meant for apps that plan to scale into much bigger projects, and like a concerned parent, it enforces stricter rules on how you write your code to ensure that your application avoids bottlenecks and is primed for growth.

By opting for a string-based templating system like Handlebars, it’s possible to achieve quicker boot times by pre-compiling templates on the server. Server-side rendering also has the SEO (search engine optimization) advantage of natural indexing by Google crawlers—AngularJS by comparison must boot an entire browser environment called PhantomJS, which can really put a drain on resources. The tradeoff? The code is more complex.

Which Framework Is Right for Your Needs?

Both AngularJS and Ember serve a similar singular purpose—to make the development of dynamic SPAs with engaging UI/UX faster and easier for the developer. That means both offer perks like two-way data binding, DOM manipulation, easy unit testing, modular code, and the benefits of the MVC architecture. Where they differ is in their design philosophies and goals.

Use AngularJS If…

You’re starting a new project from scratch, time is at a premium, and your application is a small to medium-sized app. These applications are unlikely to run into the “dirty checking” bottleneck, meaning you’ll be able to take full advantage of the simplicity and coding speed that comes with using vanilla JavaScript objects as models. AngularJS is also a good choice if you like the feel of manipulating the DOM with an extended HTML syntax or wish to take advantage of the much larger community.

Even if you’re feeling ambitious, it’s worth noting that with the release of Angular 2.0 it’s now possible to take advantage of server-side rendering and avoid the pitfalls of “dirty checking,” provided you’re willing to tackle the learning curve that comes with a major rewrite.

Use Ember If…

You’ve got big plans for your app and want to make sure you build your SPA right from the bottom up. Frameworks exist to help developers work in accordance with best practices and avoid coding themselves into a bottleneck. Ember was designed with the mindset of “standing on the shoulders of giants” and it really shows within the careful (albeit verbose) syntax of this framework.

Other reasons to consider Ember—even if your application is to remain smaller—is that it offers faster boot times and inherent stability. With the recent release of Ember 2.0, the framework has been modified to bring out the best of Glimmer, Ember’s blazingly fast rendering engine.

A Brief Word About 2.0

While Ember 2.0 has been out since 2015, Angular 2.0 was just released on May 2, 2016, so be sure to give it a little more time to mature. We’ll cover the next generation of Ember and Angular in a future post once these new releases have had a chance to grow into themselves.