An Angular development approach. Simple demo example.

The evolution of Angular remains an interesting topic, so for the ones that want to analyze a technical approach over the differences between AngularJS and Angular 2, I will demonstrate how the same demo application can be developed using the latest versions of AngularJS and Angular2.

This can be considered as one of the final steps in the migration process of an old style AngularJS app to the new Angular2 approach. Taking this into consideration the AngularJS app is using the new features introduced to the framework in order to help developers do the transition to the new Angular2 much easier. Also both applications are using the following technologies: Typescript, ES6, Webpack and Bootstrap.

The application functionality is the same for both applications and it contains a simple login page and two pages that allows us to do CRUD operations on book entries as you can see in the following pictures.

Application UI

In order to easily start implementing the demo apps and not spend time to properly connect different technologies, these demo apps are using Angular CLI and the angular typescript webpack architecture from https://github.com/brechtbilliet/angular-typescript-webpack

The structure of the source projects are very similar as you can see in the pictures.

Project structure

Every component in Angular2 can have defined its own specific css styles avoiding this way any possible style conflicts. Also, a common css file can be applied to the entire application like it is the case for AngularJS app.

Another thing to mention is that the component’s template can be defined inline or into a separate file.

Even if the entry point for both apps is in the main.ts file where the apps are bootstrapped, the way it is done is totally different as we will see it in the next paragraphs.

Angular1 bootstrap

The AngularJS bootstrap function is used to manually start up the AngularJS application by compiling the document element into an executable application.

Notice that the “app” module needs to be created and loaded before passing it as a parameter to the angular.bootstrap function. It’s not possible to add controllers, services, etc. after an application bootstraps.

It is using the optional config argument “strictDi: true” in order to throw an error whenever a service tries to use implicit annotations. (more details here https://code.angularjs.org/1.5.8/docs/guide/di)

The AngularJS module is like a container for different parts of the application and as we can see it in the picture, the “app” module has as dependencies three other modules.

Depending on a module implies that the required module needs to be loaded before. Also, each module can only be loaded once, even if multiple other modules require it.

Angular2 bootstrap

On the other hand, in the above picture the Angular2 bootstrapModule function creates an instance of the AppModule for the browser platform. This way the Angular compiler compiles the application in the browser and then launches the app.

An Angular2 module is a class decorated with @NgModule metadata which in our case declares that the AppComponent is part of the AppModule and needs functionality from other modules defined in the import section.

The order of the modules from the import section is very important especially in routing functionality where the defined paths can be overriden by other modules.

The components are loaded by the Angular2 router. Also, the routing functionality can be defined in a single place in the AppModule or it can be splitted in their own modules.

Each application consists of a tree of components. As we can see it in both pictures the main app component is only a placeholder for the other components.

Both applications are using the same data model interfaces.

In our demo examples the routing mechanism is different for each app. The AngularJS app is using the “ng-route” while the Angular2 is using the new router.

As we can see in the following pictures the way the components are instantiated is different.

Router

Also, AngularJS and Angular2 template syntax and directives have some differences. For a detailed list of differences please check https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html

An important notice here is that if normally in AngularJS it is possible to modify data anywhere in the application through scope inheritance and watches, our AngularJS app component directives use an isolated scope like it is always the case for Angular2.

Both applications are using services for better separation of concerns and reusabillity. These services are using specific http modules to do the call to the REST services.

The Angular2 app is using angular-in-memory-web-api to process the http calls which is a tool very useful for demos and tests. In the case of the AngularJS app the CRUD operations are made directly using static data. Here, we also have the choice to create a mock backend for the CRUD operations as it is described in this article http://madebymunsters.com/blog/posts/creating-a-mock-backend-in-angular/

In both apps the service instance is lazily created and it is also a singleton.

Service DI

In Angular2 it consists in creation of the singleton class with @Injectable decorator which will be injected in the constructor. An essential step is registering the provider which provides the actual runtime implementation.

In AngularJS the $inject property annotation is an array of service names to inject. In this scenario the ordering of the values in the $inject array must match the ordering of the parameters in the constructor.

The rest of the code is pretty the same and it depends on the preferred choice of writing the code.

In conclusion, the new features added to the AngularJS framework in combination with a proper stack of technologies make the transition to the new Angular2 a viable solution.

This is recommended for the existing applications written in the old style and not for the new projects where the natural choice is to start developing from the beginning in Angular2. Even if it is possible to mix AngularJS with Angular2, this is not a common community choice.(here you can find details how to do it http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/)

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 3 =