My Beginning with Angular
Having worked with React for almost a year and getting the nuances of the library was a refreshing experience as it was my first client-side library. Coming from a background in C++ and working with desktop applications for the first 3 years of my career and then jumping to the amazing world of the web itself had blown me. No knowledge of any JS library, I got my hands dirty directly with ReactJS and it was an incredible journey.
Working in a startup has its own perks, one of them is to work in different domains and libraries, frameworks. Changing times(clients) gave me an opportunity to learn the newest player in town (not including its predecessor) Angular. By the time I started working with it, the framework had already gone through 5 major releases. Our team decided to pick the latest for our client. Who wouldn’t?
Now before I start writing about Angular, I would like to tell a little about the history of the 3 major players in town. Vue, React and Angular. It all started in 2009 when AngularJS came into our lives and changed the way we viewed web development. Bringing along with it the biggest game changer called the 2-way data binding.
2013 marked the entry of React by Facebook. It was introduced as a component-based view library, starting the phenomenal concept of writing view into separate components and reusing it in different parts by embedding it into other components. Next year marked the entry of Vue, a progressive framework. It introduced new features along the way as and when needed, making the learning curve truly progressive in nature. Angular2 was released in the year 2016, a complete rewrite of its predecessor. It also introduced components as a view. It can be described as an opinionated framework. I feel it’s a good thing as I don’t need to think what is the best solution as we can use the one suggested by the Angular core team. It has vast community with around half a million members and around 800 meetups up until now. Performance wise all three are great, you can refer the following website to check their individual performances. With respect to the bundle size Angular tops the chart. Now if you are wondering why I am talking about React or Vue in an Angular blog, the reason behind it being why we chose Angular in the first place. It wasn’t a majority, I can tell that, it became the ultimate choice by a close margin. The important point to understand is that it didn’t win because its better, we chose it as it fulfilled our needs better. As we were working with our client’s internal development team and as it sort of enforces to code in a particular way, we found it more reasonable for our collaboration. People tend to like one and dislike others, but my advice would be to get your hands dirty with all the 3. They are all great and the people behind it have done a lot of hard work to make it where they stand.
Now as I have covered why Angular, now where to start with Angular. The advantage of having a vast community, it has several tutorials and a vast number of blogs covering topics ranging from beginners to advanced level. I started my learning from one of the popular website “Udemy”. It has an excellent course on Angular which is updated to the latest version of Angular6( during the time of writing this blog). The tutor is great at its crafts and his knowledge about his courses are on par. Having told about the perks now about the cons, according to me it has only one that it’s not free, well as they say good things aren’t. I understand that you surely would like to test the waters before diving in and the best way would be the tutor’s YouTube course which is free and gives a complete introduction.
As mentioned there is a ton of material, thus I would not want to explain the framework to you. But I would like to share my learnings. To start it is important to have a basic understanding of TypeScript. Angular uses it extensively and can be reflected in its documentation. It is the superset of Javascript and finally, it does compile to a plain javascript file. TypeScript enables static type checking of your JS code thus avoiding unnecessary errors at runtime. The best part of TypeScript is that it supports latest JavaScript features, including those from ES2016.
The other library that Angular depends on heavily is RxJS. As stated in their documentation ‘RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code’. Angular uses it to handle all of its asynchronous activities and it would be of great help if you go through it once. A basic understanding is enough to get started with Angular.
I will go through some basic features that are important for any beginner to get yourself thorough with. I will also provide links to blogs or tutorials where you can learn more about it.
Angular is a component-based framework that uses TypeScript decorators to declare Components. Components are basically JS classes that are provided metadata using @Component() decorator. The Angular application can be referred as a tree of components with a parent-child relationship between the components. Under the hood, it uses Views that can be defined as the smallest collection of HTML elements which are created and destroyed together. The relationship between the View and the Component is straightforward — One View for One Component and vice-versa.
Component based frameworks depend on 2 important things
— sending data to the child components.
— listening to events emitted from it.
Angular achieves this through @Input() and @Output() decorators, whereas the name suggests @Input decorator is to send data to the child components and @Output is for emitting events to the respective parent component.
For sending input it should be defined with square brackets [] and for output (events) it should be in parenthesis.
Other important feature of a Angular component are its lifecycle hooks that enable us to perform a certain task at a particular lifecycle event. The lifecycle hooks are:
- ngOnInit: called once when the components is initialized (only once).
- ngOnChanges: called when the @Input property changes. Also called on component initialization before ngOnInit.
- ngDoCheck — Called every time the input properties of a component or a directive are checked and it enables us to incorporate our custom checks with respect to the input properties.
- ngAfterContentChecked — called after content is checked
- ngAfterContentInit — called after content is initialized ( only once)
- ngAfterViewChecked — called after view is checked
- ngAfterViewInit — called after view is initialized ( only once).
- ngOnDestroy — called before the component is destroyed in other words removed from the DOM.
Another feature is Services that can be used as singleton classes to handle all your asynchronous activities like making API calls and creating a subscription for communication between components that are not directly related to each other. It also provides us with abstraction with the use of NgModule decorator, and also brings in the feature of lazy loading with it. We need to register a component using declarations in a module. It can also be exported to other modules using the export feature of the modules.
The last important feature I would like to cover is Dependency Injection. No Angular application is complete without it and it’s popularly known as the DI. Let’s separate both the words and cover it one by one. Firstly what is Dependency, supposedly there are 2 modules say A and B. When module A requires module B to run, we say that B is a dependency of A. The injector is a function which when passed a token returns a dependency (or a list of dependencies. A token can be defined as something that uniquely identifies we want to be injected. A dependency of our code. A detailed description can be found on https://codecraft.tv/courses/angular/dependency-injection-and-providers/overview/ .
