It’s been long since I first stumbled upon Angular.js. Having a background from document.getElementById(), to the slightly better jQuery’s selectors and their corresponding set counterpart in every damn logic, two way data binding offered by Angular.js was a killer feature. Code became a lot cleaner and the number of lines reduced drastically. It was the superheroic framework it claimed to be. Backed with excellent documentation, getting started and creating POCs became easy. Soon as the projects grew bigger, I would run into the infamous $scope issues. But by then I was attracted towards other upcoming frameworks like Vue & React.

Fast forwading several years, I got the time to explore Angular 10 and I must say that it is nothing like what I felt with Angular.js. Whether it’s a good experience or a bad one, I’m not sure. But it certainly is different. And one difference is that, Angular is no longer a quick start framework. There are lots of concepts and architectural design patterns that are very unique. Though the steep learning curve is expected from a framework built for complex frontend apps, I wasn’t able to find a crisp guide that took lesser time to follow. So here is my attempt to create that missing quickstart guide.

Contents

• Angular cli
  • • Wait, what and why ‘—routing’?
    • I forgot to add routing while creating project, what to do?
• Ah… Typescript
• The jargon
  • Component
  • Service
  • Module
  • Dependency Injection
  • This is so confusing… where is the code???

Angular cli

Gone are the days where just a <script> tag would do the job (We can still do that in Vue and that’s why Vue is my favourite). We need Angular cli to scaffold the project. Though technically it is possible to do so without the cli, it is just very painful and a utter waste of time. So better install node and angular cli.

npm i -g @angular/cli

To create a new project

ng new myAwesomeApp --routing

Wait, what and why ‘—routing’?

Any practical app would need navigation, and navigation without the routing module is like driving a car without steering wheel. By default it is off, hence we pass this paramter to explicitly enable it without the prompt.

I forgot to add routing while creating project, what to do?

You can add it via

ng generate module app-routing --flat --module=app

Ah… Typescript

Before anything, Angular is meant to be used with Typescript. Though technically typescript transpiles into javascript, ultimately there is no easy way to directly code angular project in vanilla js and even if there’s a way its not recommended. I’m not a big fan of typescript and IMO typescript reeks of Java style - obsession with classes, interfaces and the lot. But that would be a very poor way of looking at things. Even if you are a good programmer, strict types do indeed help identify certain issues early on. Additionally more than just to avoid errors, typescript is meant to increase productivity by providing autocomplete feature which is difficult in dynamically typed languages like vanilla js.

Just browse through TS for the new programmer, use vscode and treat it like good old es6, that should be fine.

The jargon

This is a pretty big topic and there are lots of jargons that must be understood before you can get into something like a POC.

List of jargons we need to cover

1. Module
2. Component
3. Service
4. Dependency Injection
5. AuthGuard
6. Router
7. Token Interceptor

Component

A component is an independent piece of view. It has html, css, js along with other angular jargons baked into it.

A component can be made up multiple components. Example, a calculator component = keypad component + input field component

Service

A service is a piece of code that does a particular thing, eg. getting data from api, managing the localstorage, or clearing the input values.

Module

This is a logical piece of the project. A module can contain components, services, etc.

Angular modules are quite deep and an exact understanding can be skipped for POC purposes (because a no understanding is better than a wrong understanding).

However, what you must know are

1. The entire app is a module known as the app module.
2. App module is the entry point, angular engine loads app module by default - platformBrowserDynamic().bootstrapModule(AppModule)
3. All dependencies - services, components and other modules that are required should be declared before hand in the app module

Angular modules are the heart of the jargon called dependency injection.

Dependency Injection

This is another confusing topic, borrowed from the likes of Java and Spring I guess.

Dependency injection is nothing but I'm too pro to instantiate the classes I use

In better terms, if you say, I want a banana, somebody will give you a banana - yellow, green, red, or maybe even the Blue Java, as long as it is within the reach.

In Angular terms, you declare your fruit basket at app module, and you can request a particular fruit anywhere within the app - be it component, or services.

This is so confusing… where is the code???

So lets take a detour and do a little coding.

Step 1: Create the app and cd into the directory

ng new todoApp --routing
cd todoApp

Note: This will ask a couple of questions, just keep pressing enter

Then use this command to start the local server

ng serve

If everything went well, you should see a message

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Open http://localhost:4200 in your favourite browser and you should see a welcome page.

Congratulations on your first angular 10 app!!

I shall post the next steps in another post. Do check again later!