Difference between AngularJS vs Angular 2
- Code production was incomparably fast
- Every piece of application was easily testable
- Google was behind the project
All of these advantages led more and more companies to rewrite their apps from their own solutions built on top of other libraries to AngularJS.
AngularJS is a great way to kickstart an app or MVP. With a rising popularity and more and more features coming to the core, the Angular team decided to rewrite the original framework, introducing Angular 2. Some say Angular 2 and AngularJS share only one thing: the name. There is a migration path (called
ng-upgrade) from AngularJS to Angular 2. However, Angular 2 is still a brand new framework sharing only some concepts of its predecessor.
The whole concept of application structure has changed in Angular 2. Previously it was the MVC framework that allowed you to create applications in the pattern of rather tightly coupled entities like controllers, views, services, etc. The whole architecture of AngularJS looked like this:
img – ng1 architecture
Now, the concept of directives has been pushed further to be much closer to the Web Components’ standard and React’s way of structuring the application. It is all about components in Angular 2. It means the whole application is now a component, which contains another set of components (which can be routable). It ends up with a tree-like structure:
img – ng2 architecture
The purpose of the Angular 2 application architecture is to create components that don’t depend on each other, which are as loosely coupled as possible.
The important thing is to introduce two ways of creating the components:
- Smart components: They know about application state, and they can communicate with services to fetch or modify data.
- Dumb components: They should only have inputs and outputs. They are ready to be placed anywhere in the system (or even outside it) when providing proper values to the input, and they should not know about application state existence.
Having such a tree of components makes a big difference in performance. The purpose with AngularJS wasn’t to create the most efficient framework, but instead the easiest one to write in. As performance became more of a problem, Angular 2 was introduced to solve the issue. AngularJS had a digest cycle, which allowed changes to trigger updates up and down. Angular 2, on the other hand, has a directional graph of components that is always being checked once (due to one traversal path from the root to the leaves). According to the Angular core team members, these changes made Angular 2 applications work 3-10x faster than the same apps created with the latest AngularJS.
Angular is now more than ever considered a framework. The tool that the Angular team gave us is a complete solution. This is the opposite of React (which is just a library for rendering a component), but here we are able to create whole applications without using any third-party solutions. The framework provides us with the following blocks to use:
- Component – The main and the most important one. Angular 2 is about components and modularization. These are the main blocks to create apps with. It contains logic and the view.
- Directive – It is very similar to the component, but does not contain a template (view). It just makes additional operations to the existing DOM elements.
- Pipe – Gives you the ability to process variables in templates in a specific manner.
- Service – Injectable class used to share logic between components. Usually (and preferably) it is a layer between the component and the API.
- Forms – A complex solution for handling forms in the app. This time you can choose between two styles: template driven and model driven.
- HTTP – A service built on top of the observables to handle the connection between the front end and the API.
- Router – Now routing directly to the components.
- Testing – A whole bunch of tools for both unit and end-to-end testing, ready to handle scenarios with all of the blocks above.
- Angular Universal – server-side rendering.
- Angular CLI – command line interface for kickstarting a project.
- NativeScript 2 – native mobile apps.
- Ionic 2 – mobile apps using web-view.
- Codelyzer – linting specific for Angular 2.
- ngrx – reactive programming.
It all makes Angular not only a framework, but a whole platform.
Is Angular 2 the right choice for my project?
We mentioned how Angular 2 is a first citizen framework. This is incredibly powerful, but has its own drawbacks. The problem is mainly zone.js, which is interfering with most of the asynchronous operations that are taking place in the browser. It can break your existing code if you’re trying to merge it with another framework or library. Due to this inconvenience, you should be very careful when trying to upgrade your existing non-Angular app step-by-step (but it is possible). On the other hand, it’s highly recommended you upgrade your AngularJS app (ng-upgrade will be helpful), and we cover this topic later in the book.
Now you should be convinced that there are two easy paths to start with Angular 2:
- upgrading an existing AngularJS 1.5 app (based on components)
- starting an app from the scratch
Another good question is: it is good for my team? As you can probably see, we’re going deeper and deeper trying to introduce even more tools and concepts. They make a small barrier at the beginning of a project, but they are beneficial in the long run. It also makes Angular 2 a solution to use with a big team. Most of the conventions that are there help with the maintenance of a complex application. It also makes Angular 2 a better tool for long-term projects.