Angular Getting Started

How To Get Started with Angular in 2019 – From a Beginner’s perspective!

God yet another Angular for Beginners post? Don;t judge the post by the title. This is a journey of a guy who just knew HTML, CSS and some pretty basic JavaScript to being a pretty confident Angular Developer. So If you are really passionate about web development and exploring new things, then this is for you.

The “war” among Web Frameworks?Javascript Web Frameworks

The world of JavaScript is so big and it is popular than ever. You can see something new and interesting every day. This is one of the main thing i love about JS. You have so many options and things to try out. There is no one someone can get bored when so much is happening around them.

Among web frameworks, there is a huge debate going on in every corner of the community. I don’t want to get into this or even say my opinion on this. I don’t consider myself a complete developer to say about this topic.

The main web frameworks that we have now are: Angular, React and Vue among the top 3 positions and there are a lot more like ember, stencil, svelte (a compiler and not a framework).

So why Angular and not others?

In my case, I just started with Angular and that’s it.¬† I would like to try others when i have the time. You don’t really judge others without having in-depth knowledge on them. The one thing I personally liked about Angular is the level of segregation it provides.

In Angular, the files are separated. You have 4 files when you create a component:

  1. Layout which is a html file
  2. Controller which is typescript file
  3. Styles file which can be SCSS/CSS/LESS etc
  4. Test file which is again a typescript file

I find it easier when it comes to managing things. I know that many of the developers totally dislike this and its not a surprise. The learning curve for Angular is very high compared to other frameworks or libraries. Angular is the whole deal, you have everything you need from best practices to routing to testing.

Angular uses TypeScript which is the best! I personally love TypeScript and started using it for writing both Front-end and Back-end. It is a beautifully crafted language and it is so functional that nobody can not fall in love with it. It is that amazing.

Getting Started with Angular in 2019

So if you are beginner in the world of JavaScript, then you are at the right place. But if you are thinking, that there are tons of Angular Videos and Tutorials out there, why bother reading this boring article. Blogs are always the best way to get to know about things. Tutorials will definitely get you started with Angular very fast.

Your mind start processing things better when you read and then try it on. Also this will not be like a in-depth tutorial on Angular, but it will walk you through How to get started with Angular and How to actually get going. I would also link to some of the best resources that helped me learn Angular.

I am not a complete Angular expert in any way, but I think there is no pain in sharing my journey. The point of time where i got stuck, the topics which i couldn’t get my head over at first and many more.

This is just a beginning….

I will be adding a lot of articles on the way, about getting things done the right way, how to get things done, and many more. Stay tuned.

Things You Need To Install on Your System

There are some piece of software that needs to be installed on your system before you can start working with Angular. You need to make sure everything that you need for building great web application is installed properly. Sometimes installing things can be cumbersome and also very problematic.

But you are coder! You have the patience to bear with problems. If you don’t have the patience, its never too late to start building a connection with problems as you will be getting into trouble quite a lot. This is very common and If you don’t have troubles on your way, you will forget the way you took.

People, If you are not using Linux, then it is a good time to switch to Linux OS like Ubuntu, Kubuntu, Mint etc.

Linux is the best Operating System for a Developer. So If you really want to have a pretty good developer experience I strongly recommend installing and using a Linux OS. You can start with Ubuntu.

I always say keep your problems close and try to find the solution yourself. This makes you understand things better. If you write code or just copy paste something from the internet and it runs, the chances are you are not going to take time to look into the code and understand it.

Lets get to work.

Node JS and NPM (Node Package Manager)

NodeJS is a run-time environment for JavaScript. Let me make it simpler. NodeJS is bascially your Chrome browser without all those browser characteristics. It runs JavaScript code, that all.

NodeJS uses V8 which is the JavaScript Compiler that is used by Google Chrome. It is fast. It is very fast and so it can be used to write super cool applications and server programs.

How to Install Node on your system
  1. Visit the NodeJS Download Center
  2. Download the corresponding version for your OS. Make sure you stick with the LTS version.
  3. Once you install NodeJS, you can open your terminal and check if it is installed properly.
Check if Node and NPM is Installed Properly?

Enter the command to see the version of Node that is currently installed. If you are able to see the version, you are good to go.

node -v

Now try entering the following command to check if the Node Package Manager (NPM) is installed properly. NPM comes with Node,

npm -v

Angular Command Line Interface (CLI)

This is a great tool that can help you in creating Angular applications. It is your companion, your buddy which is always by your side. The Angular is so good and is really helpful in setting things up.

You can install the Angular CLI with the following command:

npm i -g @angular/cli

This will install the latest stable version of Angular in your system. It is advised to stay with a particular version for sometime and not upgrade whenever a new version comes. Current latest version of Angular is v8.

What the command does:

The above command looks up the NPM registry and finds the package specified and installs it in your system. The “-g “flag in the command specifies that we need to install it globally in the system. When you install an npm module globally, It will be accessible from any folder.

How to Install Particular Version of Angular CLI?

To install a particular version of CLI, you can use this following command. This is not necessary, but it doesn’t hurt to know that you can do that. I will try to add things like these along the way.

npm i -g @angular/[email protected]

This particular command will install Angular version 7.0.1 on your system.

Now that we have installed it, you can check the installation by entering the following command in your terminal

ng --version

You can see the details of Angular and its sub packages.

I’m Getting “Error: EACCES: permission denied”

If you are getting this error, this means there is no permission to access a particular folder on your main system partition. You can fix this by running the terminal with administrative privileges in Windows or adding sudo command before the command in Linux.

In Linux:

sudo npm i -g @angular/cli

A brilliant IDE – Visual Studio Code

I would recommend Microsoft’s best IDE ever Microsoft Visual Studio Code. This is the best IDE you can ask for. It is Open Source, comes with tons of great features and customization and a very deep integration with TypeScript. What else can someone ask for?

Visual Studio Code is so popular and is super easy to use. So let’s get that installed. Visit the Official website of VS Code and Download the installer for your Operating System.

Now once you have installed everything, we get to the next step.

How to customize VS Code for Angular Development?

Visual Studio Code is really amazing and I can praise it all day along. I have personally tried many IDEs until i finally settled for VS Code. It offers some great customization and features out of the box. A programmer should know his tools well. You should be comfortable with your IDE.

Before starting coding, setup your IDE for your liking. I will give you some pointers on How to customize Visual Studio Code for Angular Development. There are specific plugins that can be great help in writing Angular applications.

  1. Angular Essentials by John Papa
  2. Angular Snippets by John Papa
  3. Bracket Pair Colorizer by CoenraadS
  4. Debugger for Chrome by Microsoft
  5. HTML CSS Support by ecmel
  6. Dark The Shit Out Theme by Me ūüė¨ (Self promotion)

Just go to the extensions page in VS Code and type in these names, and Install them.

More Extensions and Themes will be coming in a dedicated article, So stay tuned.

Now that you have all the prerequisites taken care of, we can jump into How to get started with learning Angular.

Getting to know Angular and How it works

You just have to know atleast some basic things about what Angular is and why is it used. Angular is a JavaScript framework for creating modern web applications which runs on the client. All the code you write will be packaged and it is run on the client. It is used for creating Single Page Applications. Now that i mention SPAs, we can see what an SPA is.

What is a Single Page Application or SPA?

A Single Page Applications, as the name suggests has only a single HTML page. What? Then how do we show different views and pages? This is were JavaScript comes in. The JavaScript will actually tear-down the page and construct it again based on the users interaction.

This means that you will have a single Index HTML file, which is like a canvas were JavaScript creates its art. Components are created or removed based on user interaction or data coming from the server.

Just open a SPA on your web browser, click on “View Page Source”. You will be able to find some basic HTML tags and that’s it. There is now HTML for the components inside the page because JavaScript is dynamically creating it. Also one peculiar thing you can notice¬† is that the page is never changing or refreshing, hence you won’t be able to see the loading icon in your browser’s tab.

Gathering the resources for studying Angular

You have tons of resources on the internet which can help you get started with learning Angular. Keep one thing is mind.

Always make sure you visit the official documentation quite often and spend some time reading through it.

The Official documentation of Angular is available on Angular.io website. The documentation is pretty good, but not the best I’ve seen. You should try reading through the documentation and make it a habit. This is not only for Angular, but for any framework or language you wish to learn.

I will give you some tips on where to start and how to proceed.

First start with the architecture of Angular. Please don’t skip this part. Just read through this post to you will come to know what are the main things to look out for. Main things you should note are:

  1. Modules
  2. Components
  3. Bindings
  4. Services and Dependency Injection

These names can be giving you chills, but hey, Let me say this….Its not that bad. You will be able to grasp all of these within some time. Everything takes time….

Start Coding – Create Your First App

Don’t jump into coding, take some time to study about the framework and then dive into coding. I use to jump directly into the code. But now i try to get some insights and i read about things and then write code. The advantage is that you will have more idea of how things work.

You can write your first Angular application by using the Angular CLI:

ng new my-first-app

You will asked two questions by the CLI:

  1. Would you like to add Angular Routing?
  2. Which stylesheet format would you like to use?

For the first one, just enter Y to continue. I will talk more about it later on.

For the second question, it is basically asking which format would you use to write you stylesheet in. If you are not familiar with others, just select CSS or select SCSS and we can learn that as we go. SCSS, Less etc are CSS Preprocessors which has some great features. These styles will be later compiled to CSS for the browser to understand.

Now it will show some progress and finally you can see your application bootstrapped. Go into the application folder by using cd command in terminal

cd my-first-app/

Now you can fire up your IDE and get coding. Just use the command to open IDE in the current folder

code .

Get to know the Folder Structure

Angular organizes the project into folders and you need to know what these folders do. Lets break it down.

Angular Folder Structure

 

  1. e2e folder houses the files for End to End testing. You write e2e test for testing the functionality of the application.
  2. node_modules folder contains all the node packages that is required by Angular to work. Disclaimer! It is going to be huge.
  3.  src folder is were all the main source files are. This is were we will be spending most of our time in. Inside the src folder, we will have some files and folders.
  4. .gitignore file is used by GIT to check which files to exclude while pushing to a repository.
  5. angular.json files contains all the configurations for our angular application.
  6. package.json file is the file were the we have details about the application and its dependencies.
  7. package-lock.json don’t bother about the file at this moment of time.
  8. README.md file is the markdown file which will be displayed on the repository when you first visit it.
  9. tsconfig.json file is the configurations for the TypeScript compiler.
  10. tslint.json file is housing some lint rules for proper writing of code.

Lets now dive into the Source Folder(src):

Angular Source Folder

This is what you will find inside the src folder. Wow that is a lot of things inside the folder. There is quite a lot of files that is there inside, but i will walk your through some folders and files which you really need to know when you want to get started with Angular.

  1. app folder houses the files related to the App Component which will be discussed below.
  2. assets folder is were you will add your assets like images, font files, etc.
  3. environments folder contains configuration for running the app with different configurations.
  4. browserlist file is the configuration for browser compatibility.
  5. favicon.ico is the favicon that will be used by the browsers
  6. index.html is the main index file which i talked about in the SPA section
  7. karma.conf.js is the configuration for Karma test runner (you will come to know about it soon).
  8. main.ts is the entry point of the application. This is were the app bootstraps from.
  9. polyfills.ts files is were you can add polyfills to support legacy browsers.
  10. styles file is the global stylesheet file (it will be styles.css for you if you selected CSS in the ng new command).
  11. test.ts file is used to specify the test files for the applications unit testing.

Lets now see what is inside the App folder:

Angular App Folder

This is how your app app folder will look like.

  1. app-routing.module.ts file is the file were we mention the routes in our application. Remember we entered Yes when we were asked about Would you like to add Angular Routing?.
  2. app.component.html file is were we write all the html in.
  3. app.component.scss file is the stylesheet file were we write all the styles in.( Again it will be .css if you choose css).
  4. app.component.spec.ts file is the testing file. People don’t talk about this file much, but let me tell you that it is a really important part of an angular application. It is the file were we write test cases in.
  5. app.component.ts file is were we write the functions
  6. app.module.ts is the module file were things will be set up first for the app.

Out of these files, when you create a new component using the CLI, you will see 4 files namely:

Files inside a new Angular Component

  1. app.component.html
  2. app.component.css
  3. app.component.ts
  4. app.component.spec.ts

Exploring the Framework

Now that you have gotten to know about How to get started with Angular, you have to explore more about it. The best way to learn is to bring up some idea for an application which can be a complex application even though you are just starting. And then slowly creating that application by learning things one by one.

This the method which I follow when starting with a new framework or library. I usually try to get some idea cooking in my mind and I try to get it working. In this will you will also learn to design things compared to just simple coding things. Also when you are following tutorials, don’t just simply follow the instructor and make the same application that is being shown in it.

When you are learning something don’t try to learn the syntax of the language or framework but give more time in understanding how things are to going to be done. For syntax there is no shame in referring to the documentation. Once you start writing code, you will automatically memorize the syntax.

Learning the Syntax is not what you should do, but concentrate more on the core working of the framework

Final Thoughts

This article is not complete as I cannot include everything about Angular in one place as it is so vast and this is already too long. So I would be bringing in some articles on some of the issues that I faced while learning Angular along with some great coding tutorials and code snippets that will help you in your coding journey.

I would also like to share some of the best practices that I follow so that you too can write good code.

See you guys in the next one!

Please don’t forget to share your thoughts and share it among your friends and foes.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.