The basic building blocks of an Angular application are:

1. Components
2. Modules

Component

It is the combination of Data, HTML template, and Logic for showing the data.

Component=Data+HTML Template+Logic

Module

Container of a group of related components

There are three steps for creating a component

• Create a component
• Register it in a Module
• Add an element in HTML mark up

We will walk you through each step in creating a component and using it in the angular application.

Creating a Component using Command Line
Command to use:

ng g c Books

ng stands for Next Generation, g stands for Generate, c stands for Component and Books stands for the name of the Component

Tip: When you create a component the naming convention is important. We can use camel casing when typing the name of the component in the command window, and once the component is created each capital letter will be replaced by a dash(-). this is applicable to folder name as well as file names.

Register Component in Module

When you create a component it creates a folder and adds necessary files related to that. It also does the second step of registering the component in the module. this is the advantage of using Angular CLI. if we are creating a component manually then we need to register it by adding the component name in the declaration section inside Module.

Add element in HTML markup

Once the component is registered we can use the selector inside the component to add the HTML mark up in the main file.

Component Structure

 Once we create a component the contents of it will as shown below.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.scss']
})
export class BooksComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

• selector- it is used to identify this component using the html markup. for example, the above component will be called in the main index.html file as below:

<app-books></app-books>

• templateUrl-it specifies the file path of  the html content used in this component. Mostly it will be inside the same folder. we can also add html content inline in the component.ts file itself, but it depends upon the purpose and use of the component. if you are using inline html, the keyword should be template, and is used is as below

...
template:'<h2>Books Component </h2>
...

• styleUrls- It specifies the file path of the styles for this component. the style we add inside this css or scss file will reflect inside our component only. we can have multiple css files so it is denoted by an array.

...
export class BooksComponent implements OnInit {
  message:any;
  constructor() { }

  ngOnInit() {
    this.message="Message from Component ts file!";
  }
...

<p>Books Works!</p>
<p>
    {{message}}
</p>

Below we explain the basic structure of an angular application. We give a brief idea about what is the purpose of each folder and files.

e2e [Folder]
Used for writing end-to-end tests in the application. Mainly used for automated tests that stimulates a user browsing process on a web page.e2e test is done by using a library called Protractor. As an angular developer he doesn't need to worry about this folder, mostly comes in picture when we are doing testing in our application.

-protractor.conf.js [File]
It has all the setting for running test

-tsconfig.json [File]
It has settings for the compiler when running e2e tests.

-src [Folder] > app.e2e-spec.ts [File]
All our test cases are written in this file. The test code is written using Jasmine.

-src [Folder] > app.po.ts [File]
We write code in this file to identify elements on our page.

node_modules [Folder]
It contains all third party libraries which are used for development purpose only. During compiling the contents of this folder are bundled. We will not deploy the node_modules folder to the production server.

src [Folder]
Inside this folder our actual source code is present.

-app [Folder]
Here basic building blocks of angular applications like components and modules are present. Every application has at least one module and one component.

-assets [Folder]
we store all images and static files inside this folder.

-environments [Folder]
We store configuration settings for the different environments in this folder. Mostly it has two files environment.prod.ts,environment.ts

-main.ts [File]
This is the starting point of our application.it bootstraps the main module of the application and then the angular will load this module and the rest of the functionality works from there.

-polyfills.ts [File]
It is a bridging file to fill the gap between features that are supported in browsers and features need for the angular application to work.mainly it imports some javascript.

-styles.scss [File]
We add global styles in this file.

-test.ts [File]
It has settings for the testing environment.

.editorconfig [File]
It contains the settings for the code editor. when working in a team on the same project all developers should have the same setting on this file.

.gitignore [File]
It is used in version control to ignore files when checking out files to the repo.

angular.json [File]
It contains standard configurations for the application.

karma.conf.js [File]
Karma is a test runner in javascript. All settings are present in this file.

package.json [File]
It is a standard file present for all applications. It specifies what all libraries our application is depending upon.it has two sections: devDependencies -dependencies for the developer machine and those libraries are not needed to upload to production, and the other one Dependencies-core libraries needed for the main application.

tsconfig.json [File]
It has settings for the typescript compiler.

tslint.json [File]
It is a static analysis tool for typescript code.it checks the code for readability and functionality errors.

Angular is basically a framework for building client applications using HTML, CSS, Javascript, or Typescript.

Angular itself is written using Typescript. When compiling angular application transpiles to Javascript code. Transpiling is a process of converting the typescript code to javascript.

Need for Angular
When we build a complex application using Javascript, it is very difficult to structure, maintain, and test the application. To address these issues we use modern front end frameworks like Angular, React or Vue.js

Benefits

• Helps to have a clean structure for application
• Easy to Unit test
• Reusable Code
• Traditional javascript are difficult to manage.

The architecture of Angular Application
The angular application works in front only. Data storing is not the headache of angular. It is the back-end service that helps in data storing. Angular uses API(Application Programming Interface) to interact with backend.

First, you can install the typescript and then start setting up your first angular project
Install typescript
Setting up your first Angular Project

If you face any issue during the set up of your angular application, kindly drop in the comments section.