AngularJS is based on the three layers — Model, View, Controller, which offers standard services, factories, controllers, and directives. We split app code into several files that can reuse template or component in a different part of the website.
ReactJS helps us update the View for the user and, with Flux, can control the application workflow. React offers freedom, but it comes at the cost of additional time spent designing the structure of an application.
Angular uses two-way data binding; it enables us to write less boilerplate code to foster interactions between components (the View and the Model). But Angular automatically creates a watcher for each binding and we may come to a point when an app is packed with too many watchers for bound elements.
On the other hand React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It is easier to debug self-contained components of large ReactJS apps than the large AngularJS applications.
Angular creates a watcher for each binding to track changes in the DOM. Once the View updates, Angular compares the new value with the initial value and runs the loop. It then checks not only values that have an actually change, but also all others values that are tracked through watchers. This is why there will be a dip in the performance if your application has too many watchers. Also AngularJS applies changes in the real DOM in the browser. When it gets upgraded, the browser has to change several internal values to represent a new DOM. This also has a cynical impact on application performance. But it does not mean that we cannot create a swift application in AngularJS.
React’s virtual DOM has an upper hand over Angular: ReactJS creates a lightweight DOM; with new data, new virtual DOM is created and compared with the former one. It rebuilds the virtual DOM once again, but with the changed HTML.
AngularJS uses a basic OOP pattern which is called as dependency injection, when we write dependencies in a distinct file. Dependency injection inherits any standard functions that we declare for an Angular factory or service. We only pass dependencies as parameters in any order in our functions.
React does not offer any concept of a built-in container for dependency injection. You can use Browserify, RequireJS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.
Directives and Templates
With AngularJS we can access the DOM only through directives – standard and self-created ones. Own directives are a powerful way to work with the DOM and to insert data into templates.
ReactJS does not offer division into templates and directives or template logic. The template logic should be written in the template itself.