0–100 in Angular: Part 1

Hello, this is a series of Angular tutorials to get you off your feet in angular and skyrocket you to the next level. In this series, we would start from the very basic to advanced concepts in Angular making it as simple as possible to understand.

For this tutorial, we need the following things:

1. Node js: you can install it from here. Please make sure you install version 10.16 and above because that’s the minimum required version
2. NPM: This usually comes together with node js. So if you have installed node correctly, you should have this also.
3. Angular CLI To install this, we open our command line or terminal and run the command

npm install -g @angular/cli

If you are using GNU/Linux, you might want to give it root access so type the command

sudo npm install -g @angular/cli

supply your password and just like that you are a professional Angular developer. Just kidding, we still have a milestone to cross.

Now that we have Angular all set up, let’s get this party started.

To create a new project, we open our terminal in the environment we wish to create the project. I’ll call my project vannila and I’ll create it in my JavaScript folder. So I’ll navigate to the JavaScript directory, open my terminal there and run the command

ng new vannila

This would ask you bunch of questions like if you would want routing and style sheet format you want. Well, I’ll pick yes because I want my app to have routing capabilities (I’ll explain this later) and I’ll also select CSS (though you can select any stylesheet format you are comfortable with). Then press enter and watch angular create bunch of files for you in the vannila directory it just created, after that it would install all the necessary dependencies and start your server. But what are dependencies? well, dependencies are libraries that your application is dependent on and needs it to run smoothly. Angular has a bunch of those eg @angular/core, @angular/forms, etc.

In case for some reason you angular CLI failed during installation thus not starting your server, no need to panic. We just navigate into the directory with the command

cd vannila

then we manually install the dependencies with the command

npm install

This would install all the dependencies stated in you vannila/package.json file. After that’s complete, run the command

ng serve -o

This command is simply telling Angular to serve your application and the -o tells it to open in the default browser.

And by default, Angular starts on port 4200 but if you wish to specify a new port you can run

ng serve -o --port=3000

This would start it on port 3000. Now we have our Angular set up, let’s understand what the different files/folders are.

You should have a folder structure that looks like this

e2e: This is where our e2e test are kept for running test

node_modules: This folder contains all our dependencies

src: Here we have our assets folder for keeping assets like images, CSS, javascript, etc. We also have the app folder that has our app.routing file for our routing, app.component.css for our CSS, app.component.html for the Html, app.component.ts for out typescript app.component.spec.ts for testing and app.module which groups all our related components, pipes, services, etc. This would be explained in details later with more examples. Other things to note in the src folder is the index.html and the style.css. The index.html is the entry point for our application. So if we need to add bootstrap CDN to our app, we just need to put it in the index.html and it would reflect in every other part of the application. While the style.css is the general styling, though every component has there style, the style.css would also affect every component in the application. Eg if you want every p tag to have a colour of red in the app, just specify that in your style.css

We also have a bunch of files like .gitignore which ignores files or folders when pushing to git, angular.json for our angular configuration, tsconfig.json for our typescript configuration (since Angular uses typescript), package.json to keep track of our packages, to specify start script and do other cool stuff, Readme.md file for adding a readme with markdown.

Next up, we would start building cool stuff with our Angular project.