Getting Started with Angular -Part 1

Learn how to become an Angular App Developer from the scratch

In this tutorial series, I will be taking you through the Angular app development from the beginning. If you do not know anything about Angular, do not worry; I will be discussing everything from the very beginning. All you need to do to become an Angular app developer is, have the willingness to learn Angular and the determination to continue on this tutorial series.

Photo by Aral Tasher on Unsplash

In this first part, I will be talking about the background of Angular and how to set up an Angular on your computer to get started with Angular app development. So, without any due, let’s get started.

Angular Vs AngularJS

You might have heard both these terms but, may not know the difference between Angular and AngularJS. Sometimes you might refer to both these terms using the term Angular.

AngularJS is the initial version of Angular which was released by Google in 2010 and Angular is the next version of AngularJS which is known as version 2.0 and was released in 2016 by the Angular Team at Google.

AngularJS is based on JavaScript while Angular is based on Typescript which is a superset of JavaScript. AngularJS and Angular can be used to build Single Page Applications(SPA).

Today, Angular is the widely used and most upgraded version of these two. Angular is open-source platform and a framework that helps to build Single Page Applications using HTML and TypeScript. Angular is more suitable for large-scale applications than AngularJS.

Now, you know the difference between Angular and AngularJS. Let’s briefly see what is TypeScript before we set up Angular on our computer.

TypeScript

As previously discussed, TypeScript is used for Angular applications.

TypeScript is known as a superset of JavaScript; therefore, it supports all JavaScript libraries. TypeScript is an open-source, portable, object-oriented programming language which is maintained by Microsoft.

When you write a TypeScript code, it cannot directly run on the browser; therefore, it has to be compiled into JavaScript before running. This process is known as Transpilation. When you write a code in TypeScript it should be saved with the .ts extension.

Now, we have the background knowledge of Angular and TypeScript. Let’s move to setting up Angular on our computer.

Setting up Angular on our Computer

Before, setting up Angular we need to install Node and Node Package Manager(NPM) on our computer.

For this tutorial, I’m using a Mac computer; so that I could use Homebrew to install Node, NPM and Angular CLI on my computer. [For Mac users, if you don’t have Homebrew installed on your computer yet, you can download Homebrew from this link].

But if you’re using a Windows computer, you don’t need to install Homebrew on your computer. You can directly download Node along with NPM from the below website. Make sure you download the LTS version of Node to your computer.

Download | Node.js

Even if you use a Mac computer, I recommend you to download Node from the above website instead of installing it via Homebrew[because sometimes node version might get conflicted with the Angular CLI compatibility].

Before proceeding make sure you have the root privileges in your account. Once you download Node, please go through each step properly and install the software to your computer. Once you completed the installation, you can run below commands on your terminal [CMD for Windows users] to verify whether you correctly installed Node and NPM on your computer. If you get both Node and NPM versions as outputs, then you’re good to go to the next step.

node -v

npm -v

Next, we can install Angular CLI on our computer. For that, use the command below on your computer.

npm install -g @angular/cli

If you’re using a Mac computer, you can use either the above command or Homebrew for this [When I first run the above command on my Mac computer, I got an error so that I prefer installing Angular CLI via Homebrew]. On you Mac computer, use the below command on your terminal.

brew install angular-cli

For Windows users, if you got an error by running npm install -g @angular/cli command, please go through the Angular official documentation to fix it [or else you can comment below your issue so that others could help you installing the Angular CLI].

Once you completed the installation process, you can runng version command to verify whether you successfully installed Angular CLI on your computer. If you could get an output as below, you have successfully installed Angular CLI on your computer and you can start building your first Angular App.

Screenshot by the Author

Create you first Angular Application

Now, you’re ready to create your first Angular application. For that, open up terminal and run the below command.

ng new <your-project-name>

ex: ng new my-first-app

Then type y to enable Angular routing on your application and select css as your stylesheet format. Then it will start installing necessary npm packages to your project and once this process is completed you can open your project using an IDE.

For this tutorial series, I’m using VS Code as the IDE but you can choose any of your favourite IDEs as you follow along with me. If you prefer VS Code, you can download it using the link below.

Download Visual Studio Code - Mac, Linux, Windows

Once your Angular app is created successfully, open it using an IDE. You will be able to see something like this.

Screenshot by the Author

In this Part 1, I’m not supposed to describe about these configuration files but in later parts as we proceed, I will introduce each of these files.

Now, it’s time to run our app on the browser and see the output. Open your terminal and navigate to your project directory using cd commands. Once you’re in the project directory, run the command below to open your app on the browser.

ng serve

Screenshot by the Author

Next, open your browser and go to http://localhost:4200 to see your app. You will see and output as below.

Screenshot by the Author

Conclusion

Congratulations 🎉

You have successfully built and ran your first Angular application. To get familiar with creating Angular apps, you can create another app and try to see the output on the browser. I can’t wait to see you creating new apps using Angular. Also, don’t forget to comment your experience below.

Let’s meet again in the Part 2.

Thank you for reading.