Trying out Angular as a 'React Developer': A Small Tutorial: Part 1

The war between which is the better javascript framework has been a never-ending topic for many web developers, is it React? The number of downloads sure tells so that it is the most used. Is it Angular? All major enterprises use it for highly scalable and large scale projects. For me it was a simple question that never made sense:

Why is Angular hated so much?

My Background:

I am currently pursuing a bachelors degree in engineering and have been a programmer for over 5 years now. I have worked with many different languages ranging from 'Java and Python' to 'C++ and Javascript'. I have been using React.js for the past 2 years and have been primarily building websites using next.js. After a sudden spark inside me, I decided to work on the most controversial framework for any web developer. I met with a bit of backlash from my group of friends, "Respect--" or "Why are you using that ugly framework?" which only made my brain question more,

"How can people hate a framework without even trying it?"

Day 0:

After reading about angular from a few unbiased content creators, I got to know the difficulty curve that Angular has makes a lot of developers dislike using it. But at the same time, Angular has a really powerful CLI and a highly structured file system. This made me realise one of the biggest problems with react comes when you start working with other developers, due to the highly free-flow structure of React.js everyone has their own best practices that makes it difficult for some second-person to understand the code without proper documentation. This felt like a strong start for Angular for me, I went up to the official documentation and globally installed the Angular CLI and was ready to start!

Prerequisites:

Basic Knowledge of these technologies will help:

1. HTML
2. CSS
3. JavaScript

Knowledge of TypeScript is helpful, but not required.

Now to install Angular CLI you will need a node to be installed in your system along with NPM.

So now let's install Angular globally using Node! Open a terminal and run the following command to install angular CLI globally using the -g flag.

$ npm install -g @angular/cli

Day 1:

To Create an Angular Project you have to use the following command in your CLI:

$ ng new my-app

You will get a few questions concerning how you want to set up your application, one of the interesting ones I noticed was the inbuilt support for styling with:

• CSS
• SCSS
• Sass
• Less

Providing these options right from the get-go makes it easier for the developers to not get lost in the documentation on how to install 'SCSS' in later stages.

Where new-app will the name of the directory which will have a bunch of files preconfigured for you. Right out of the bat you will notice these few things inside your code editor:

• The number of files created is huge. Compared to React, this is highly intimidating and the point of having a steep learning curve made sense.

• It's all typescript! Yes, Angular has been made in a way that it can utilize typescript to its full extent. This allows Angular to help you with lots of bugs that can come during development.

• OOPs, the word that is hated and also loved across the web development community. Yes, angular heavily focuses on OOPs concepts and you will need a good handle on it if you wanna learn Angular properly.

Inside the directory that was created with the above command, you will find an 'src' folder, this is where the main code of your application will be stored, opening it will lead to an 'app' sub-folder which holds the main 'services' and 'components' that needs to be rendered. (We will come back to what services and components are don't worry).

The first file that you need to find is the 'app.module.ts', this file controls the flow and the libraries of all the other components inside your App. It controls which 'Components' has been declared and can be used, which imports are valid and what 'Services' user can subscribe to.

Now we have been referring to 'Components' for quite a while but what really are components? Well, Angular works with components as its building block. Each component in angular has 4 files associated with it:

• 'component.css': Contains the styles which can be exclusively used for that component only.
• 'component.html': The main HTML template for that component will go inside this file.
• 'component.ts': The connection between all these files and the TypeScript logic goes inside this file.
• 'component.spec.ts': Provides the ability to perform unit tests on components in an isolated environment.

Each Angular project has a main 'app' component, very much like React. This component can be found inside the same 'src/app' directory. You The second file you should see is 'app.component.ts', inside the file you will find a Component import and an override of '@Component' containing these parameters:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

As you can probably guess, the 'selector' is the name by which you will be rendering your component in other files, the 'templateUrl' stores the path where the HTML file for the component can be found and rendered from and the 'styleUrls' will hold the CSS file for the same.

You will also find an export class AppComponent below the declaration, this is where the TypeScript logic goes and all the functions can be directly used inside the HTML file.

Let's try to render a variable inside our HTML app, make a variable title inside AppComponent and give it any value you want.

export class AppComponent {
  title = 'Angular is pretty solid';
}

Now go to 'app.component.html', this file may hold tons of boilerplate based on the version of angular you are using regardless delete everything inside the HTML and write the following HTML code inside of it.

<h1>This will be my program</h1>

<p>The varible stored will be displayed here => {{title}}</p>

You can already see that we use {{}} to transfer variables from the TypeScript file to the HTML file. Now let's run our application using the CLI and see what we get output. To serve your application on the local system, you can use the following command from the project directory.

$ ng serve -o

Here, ng stands for using the Angular CLI. Serve tells the CLI to host the application on your local machine and -o is just a flag to open the page in your default browser automatically when your compilation is completed. The output will look like this:

You can try changing the variable or trying multiple variable rendering inside the same HTML, this allows you to explore and understand the working of Angular better. But what if I want to change the value of the 'title' variable in run time? Let's work on that then shall we, what if I want a button on my HTML that when clicked will change the value of the title variable to "Angular is better than I expected"?

For this, we will first make a function inside our TypeScript file:

changeTitle() {
    this.title = 'Angular is better than I expected';
  }

Notice we are using 'this.title' and not 'title' as Angular follows a Class system making it easier to keep the variables from different classes organized.

Now we have to find a way with which we can bind our function to a button from HTML, for this we first have to make a button with an on click event listener. With vanilla javascript, this is really difficult to perform, but angular makes it easy for us.

<button (click)="changeTitle()">Click me to change title</button>

Angular allows you to use (click) in any HTML element of your desire, the (click) will be equal to a string holding the name of the function from the TypeScript File which needs to be executed when the event takes place. Don't Forget The Parenthesis () After The Name.

The application will refresh automatically and the changes should be visible to you. Now when the user will click the button, it will automatically change the HTML text!

Hooray, you have been doing great so far, you can continue playing further with adding more functions and tags to make your website better and better, but don't you think if you fit everything into the 'app.component' files it will get really crowded and difficult to manage? What if I wanted to transfer this whole paragraph and button to a separate component? Well, Angular is built for component-based structure so let's see understand how we can take advantage of that!

Firstly we need to make a new component, for this go back to the terminal inside the project directory and run the following command.

$ ng generate component title-change

This will create a new directory inside your app folder named, 'title-change' and will have the similar 4 file structure we have been discussing so far. Now copy the 'title' variable and 'changeTitle' function from app.component.ts and copy them inside class TitleChangeComponent. The 'updated title-change.component.ts' will look something like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-title-change',
  templateUrl: './title-change.component.html',
  styleUrls: ['./title-change.component.css'],
})
export class TitleChangeComponent implements OnInit {
  constructor() {}
  title = 'Angular is pretty solid';

  changeTitle() {
    this.title = 'Angular is better than I expected';
  }
  ngOnInit(): void {}
}

Now copy the paragraph and button tag from the 'app.component.html' to 'title-change.component.html'.So the updated HTML file for the 'title-change' component will look like this:

<p>The varible stored will be displayed here => {{ title }}</p>

<button (click)="changeTitle()">Click me to change title</button>

If you will save the files, you will notice that now your project does not render the paragraph and button! What is wrong? Don't panic, every angular component needs to be called using its selector to be rendered and the main component that always renders is the app component. To make sure your new component shows up you have to call it inside the app.component.html, to do this simply use the selector provided to the title-change component as a tag inside of your app HTML. And Voila! Your application is working as desired again.

Wrap up:

Congratulations on getting so far in the tutorial, with the knowledge so far you should be able to create a basic one-page application. In the later tutorials, we will dive deeper into some advanced Angular concepts, feel free to follow along or check out the documentation yourself to explore. Happy Programming.

Thoughts on Angular:

So far I feel the hate towards Angular is more of a herd mentality and it's unjustified as a lot of people hate on it without even giving it a try. I have been heavily impressed by the structured approach it provides to the developers and coming from a background where I heavily use OOPs concepts, it was a great way to get back into class-based programming. I will continue to explore more about Angular and make a major project to solidify all my knowledge on it. So far I have to say I would highly recommend it for people who find the JSX HTML confusing and want to take a more traditional approach but don't want to give up on all the new-age web technologies.

Liked The Post?

I hope you enjoyed reading this tutorial! I am actively looking for ways to contribute to this amazing developer community we have and will highly appreciate it if you can help me by sharing this with your friends and contacts! Also, feel free to comment down below what you think about Angular.js and any advice on how I can improve these posts?

Feel free to contact me on Twitter: Version0Chiro

And find all the other projects I am working on at my GitHub: Version0Chiro