Journey to Angular Development: Angular the beginning

Complete series source code can be downloaded from GitHub.

Introduction

Hello Angular learners.

Now that we are done with all the necessary pieces of stuff its to get into some real business. Its time for Angular. We have crossed our Station 3 and way to Station 4. When you reach Station 4, you will be aware of how to create an Angular application and what all it involves

Are the words, station 3 and station 4 confusing you? It means that you are not following this series from the beginning.

This article is part of a series called “Journey to Angular Development”. We imagine this series as a train journey. Every time we reach a new station, we become competent in something.

Right now, we are in Station 3. Let’s start our journey to Station 4, and when you reach there, I assure you that you get well aware of TypeScript. You will understand why you need TypeScript and how it is essential.

Complete series (Index)

— — — — — — — — — — — — — — — — — — — — — — — — — —— — —

https://www.justcompile.com/

https://www.amazon.in/Journey-Angular-Development-Sukesh-Marla/dp/9391030149

— — — — — — — — — — — — — — — — — — — — — — — — —

What is Angular?

Let’s start understanding what the Angular is?
It’s a framework for building a “Single Page Application.” Well, if you are not still clear what is “Single Page Application” and why it is referred to as “framework,” then just relax. When reaching the end of this series, we will ask ourselves the same question again and let see what we get then.

How to create an Angular application?

First, I will explain to you the steps, and then I will create our very first application.

Before I start, one suggestion, don’t worry if you won’t get through these steps 100%. Just move on till you reach to next module where we create our first Angular application.

It involves three simple steps.

Let’s elaborate on each step.

Part 1 – Download and configure

Let’s list down all the steps we are supposed to finish this part.

Download and configure TypeScript

Angular applications are recommended to be developed in TypeScript, so the first thing we do is downloading TypeScript.

Next, we create the “tsconfig.json” file and do the initial configuration.

Download Angular Framework

Angular is a JavaScript framework created by Google, and we need to download it.
Now the most significant challenge we have in our hand is, its not one library. The Angular itself is written in a modular fashion.

The entire framework is broken down into seven individual modules – compiler, core, common, animation, forms, router, platform-browser and platform-browser-dynamic

We need to download each of them using npm.

The best way to do it is, create package.json and mention all dependencies in it so that you can skip the downloaded libraries from your version control and hence can reduce the total size of your app.

(Do you recollect the first article in this series where we discussed the advantages of package.json)

One relief is, we are not required to explicitly download “type definition files” of these modules because we get them as a part of the framework download itself.

Download Dependent Libraries

Angular is dependent on three libraries internally, “RxJs”, “tslib,” and “zone.js.”

“RxJs” is a reactive extension library for JavaScript.
“zone.js” provides the execution context for Angular.
“tslib” is a runtime helper of TypeScript that contains some helper functions.

Relax, don’t worry about these libraries. Angular is using them internally, and you need them to create an Angular application, and they can be downloaded again using “npm.”

Download and configure webpack

So far, we have not written a single line code, but soon we will, and trust me, we will write a lot. Although we write TypeScript end product is going to be JavaScript, and we already have libraries downloaded in the above step.
So better download and configure the “Module Bundler.”

5.Download and configure the web-server

It’s a web application, and we need a web-server to run it. You can use any you like, or you can even think of using dev-server provided my Module Bundler.

Part 2 – Write startup code

We have only started, and we are yet to talk about Angular fundamentals but just to give a headstart, In Angular application, we create components which are basic building blocks. One Angular application consists of lo of “Angular Components.” Those components are grouped into “Angular Modules.”

Relax, don’t worry much about “Components” and “Modules” for now. A detailed discussion is waiting for them. For now, just get the concept. Now, out of those multiple “Angular Modules,” one will be considered as the “Main or Root Module,” and similarly from all the components of that “Main Module,” one will be regarded as “Main or Root Component.”

You must be wondering how to do all those things. Well, the answer is by writing code, and that’s what “Writing startup code is all about.”

We also need an HTML file, which is going to be our startup file. Create it using any editor you like.

You must be feeling dizzy by now. 😊 So many startup things, startup file, a root component, and a root module.

We will look into that code later. For now, just understand that this is what we are supposed to do.

  1. Create the first “Angular Module.”
  2. Create first “Angular Component” and make it part of the above “Angular Module.”
  3. Make above “Angular Module” a “Root Module.”
  4. Make above “Angular Component,” a “Root Component.”

Part 3 – Create the bundle

Now it’s a natural step. Use the “Module Bunder” downloaded in Part 1 and bundle everything into one JavaScript file.

Part 4 – Use the Component

Now it involves two steps.

  1. Using Component
    As I said, I will explain to you “Component” in much detail later in this series. For now, keep one simple thing in mind. That is when we create a “Component,” we create a new HTML tag.
    In the startup file, first, include the bundled JavaScript file and then inside “body” tag use the above Component created. If you are wondering how to use it, then I already said, creating a new “Component” means creating a new HTML tag, and I believe you know how to use tags in HTML.
  2. Run the server
    Launch the web-server and access the Startup HTML file.

Simple 4 step process. 😉

Creating First Angular Application

So finally, its time to follow the above steps and create our first application.

Or maybe I can teach you a simplified way to do it.
All the steps mentioned above are encapsulated inside a command-line interface called “Angular CLI.”

So follow the below steps.

Step 1 – Install Angular CLI

For that, execute below command in some folder in your machine.

npm install @angular/cli -g

Step 2 – Create the first project

Once the above command completes its execution, you will get “ng.” Using it, create a new project, “myApp” as follows.

ng new myapp

It will ask a question in between. Let’s ignore this question for now. Press “N” and then enter.

It will be continued with another prompt. Ignore it and enter.

The installation will take some time.

Once the installation is done, you will notice a new folder gets created “myapp,” and inside it, you will see a couple of files.

You must be wondering what just happened. The simple answer is, out of the four steps we mentioned above, the first two steps are done, and that is “Download and configure” and “Write startup code.”

Now you must be feeling relieved. Then I suggest getting into the next step.

Step 3 – Execute the project

Navigate to the “myapp” folder and then execute the below command.

ng serve –open

You will notice something like above, and in the end, you will see a browser automatically get launched with the following output.

Are you wondering what happened? Part 3 and Part 4 happened.

With “Angular CLI,” creating the first Angular project, is a piece of cake.

Where is Hello World?

I am sure if you an old person like me, then you are missing “Hello World.” The first sample of any new technology.

I won’t disappoint you. Before we start exploring the project created above first, let’s bring our “Hello World” back.

Wait, before you proceed, do you have a proper editor with you. Trust me, everyone, having a “perfect editor,” is like having a “perfect wife” (where I am lucky enough). It makes life a lot easier.

A prefer Visual studio code that you can download from the following link.

https://code.visualstudio.com/

Now let’s get our “Hello World.”

Make sure “ng serve” is still executing. Don’t close it.

Open the “app.component.html” file located in the “myapp/src/app” folder.

You will notice a lot of things written inside it. Delete everything and put the following HTML.

<h1>Hello World</h1>

Save the file, and that’s it. No need re-execute “ng serve” command and no need even refresh the browser as it will auto-refresh. Switch to your browser, and you will notice updated output.

The Root Component

Now, lets a take a look at our Root Component first.

Please note, we will discuss both “Component” and “Module” in much detail further in this series. As of now, let’s explore our first project.

Inside the app folder, you will find “app.component.ts” and “app.component.html.” Those two files together make our Root Component.

Let’s open the TypeScript file and study it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';
}

For now, let’s remove the “styleUrls.” We will have a separate discussion for the same. Remove it, and the output will be the same.

Three points worth to be discussed.

  • We have a TypeScript class called “AppComponent,” which is decorated with a decorator called “Component,” which is a part of “@angular/core.”
  • Once again, repeating the same statement about “Component,” creating “Component,” means creating a new HTML tag, and by writing above code, we created a new HTML tag called “app-root.”
  • On using the “app-root” tag, we will get the contents of “app.component.html” in response, and that is our “Hello World.”

Next, you must be thinking if a new HTML tag is created then where it is used.
In the “src” folder, you will find an HTML file with the following contents.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

As you can see, the “app-root” tag is used inside the body tag.
“Angular CLI” is internally using “Webpack” and “Webpack-dev-server.” It dynamically injects the bundled in-memory file into this HTML file on execution. Don’t worry about the deployment and all for now. We will see it in action very soon.

Let’s do one small experiment. Remove the “app-root” tag from this HTML file and check the output. We will get nothing but a big white screen as the body tag is empty now. But the strange thing you will notice in the developer console of your browser.

It is a must to use “app-root” in the “index.html” as “AppComponent” is a Root Component.

Many of you must be wondering about “AppComponent” being a Root Component.
Now, as you know, an Angular application comprises many components, and considering that fact, it’s a big question as of now, why “AppComponent” is a Root Component.

For that, let’s look at our Root Module.

The Root Module

In the same “src” directory, you will see a file “app.module.ts” it contains our Root Module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Three points worth to be discussed.

  • We have a TypeScript class called “AppModule,” which is decorated with a decorator called “NgModule,” which is a part of “@angular/core.”
  • Can you see the “declarations” section? Its an array, and inside it, you will notice “AppComponent” is mentioned. It means “AppComponent” is part of “AppModule.” Remember the previous statement. An Angular application comprises a lot of “Components” grouped into “Angular Modules,” and this is the section using which we make a “Component” part of an “Angular Module.”
  • Similarly, there is another section called “bootstrap.” It represents the “Components,” which are going to be used directly in the startup HTML file that is “index.html.” In short, it represents the “Root Component.” Technically we can have any number of “Root Components,” but as a best practice, we should have only one “Root Component.”

We will talk about other things inside “NgModule” later in the series.

Startup execution

Now, the question which can be thought of is, how come “AppModule” became the “Root Module.” An Angular project can have more than one “Angular Module.” Then how come “AppModule becomes “Root Module.”

The answer is hidden inside the “main.ts” file in the “src” folder.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
  • This TypeScript file contains statements which will start executing line by line.
  • Look at the last line, that’s what made “AppModule” a Root Module.

Ignore everything inside this file for now.

Bundling starts from this file, and then all the dependencies are identified,transpiled, and finally bundled into one.

Deployment

It’s much simpler than you think. Execute the below command.

ng build –prod

Once the above command completes its execution, you will find a new folder get created called “dist.”

Inside that folder, you will see the “Index.html” file and a couple of JavaScript files. That’s what we have to deploy.

You will find three kinds of JavaScript files.

  1. Runtime – It’s the Angular runtime.
  2. Main – It’s the custom code we wrote.
  3. Polyfill – Internally, Angular is built on the latest standards of the web platform, and all browsers won’t support them. To make it work polyfills are used. You can take it as a code that will fill the gap between old browsers and some new features.

Other files in the project

Other files are self-explanatory.

  • package.json – managing dependencies, metadata, and “npm scripts.”
  • tsconfig.json – TypeScript configuration files. You will notice multiple versions of these files.
    • tsconfig.json – contains common typescript settings.
    • tsconfig.app.json – extends “tsconfig.json” and defines an additional setting for development mode.
    • tsconfig.app.json – extends “tsconfig.json” and defines an additional setting for testing mode.
  • angular.json – It’s a configuration file for “Angular CLI.”Based on the settings defined in this file, your “ng” command behaves. You will see it in action from time to time.

Conclusion

We have crossed the first step of Angular learning and reached Station 4.

In the next couple of articles, we will explore other fundamental concepts of Angular.

I hope you have enjoyed this writing.

Stay tuned and practice well. Please drop comments and clap. It helps us to stay motivated to write more such series.

You can check me out on twitter @sukeshmarla.

In case you are looking for customized mobile or web application development, exclusive technical consulting for architecting your project, or want to train your people in advanced technologies, you can visit my company Just Compile or contact SukeshMarla@Gmail.com for details.

Sending
User Review
5 (3 votes)

You May Also Like

Avatar

About the Author: Sukesh Marla

I am a passionate programmer and a founder of Just Compile. My company is specialized in consulting, customized application development, and training. You can find me on twitter @sukeshMarla

Leave a Reply

Your email address will not be published. Required fields are marked *