Basic Concepts in Angular

Angular is a client side framework. It is a front-end JavaScript framework used to build single page applications.

In Angular everything is a component (the basic block of an Angular application), which represents one area of a functionality. Generally, a component is composed of three files:

• an HTML template which displays the view. It contains HTML directives and data bindings;
• a CSS file used to style the UI;
• a decorator (a logic file written in TypeScript)

By convention, the root component is Angular is called AppComponent.

Angular keywords

• export – means that other component in the application can use it, if required.

Benefits of Angular framework:

• Angular is cross platform – you can develop the application for web, mobile and desktop;
• Angular can be used to create progressive web apps (PWAs) – the application can be installed on mobile phone like a native application.
• Angular has a powerful CLI
• Angular relies on TypeScript and came with scalability built-in.

Let’s get started

To work with Angular you must have node and npm installed on your machine. This post assumes that you already have them installed on your machine and jump right into the creation of the angular application.

You also need to have the angular cli installed. You can install it with the command:

For new version of angular CLI use:

The reader should spent more time reading Angular CLI concepts in details at https://cli.angular.io/.

To check if the angular CLI is installed type: ng -v

Starting an Angular application

My preferred way to start an angular project is from the command line, with the following command:

This command will create a new directory named app-name, which contains the application files. You can replace app-name with whatever name you want for your application. Examine the newly created files, you can see the application is initialized with a git repository (files are already staged):

Next step is to add the project to you preferred IDE. In this case, my IDE of choice is eclipse for java ee, with the angular eclipse plugin. To do so, use File -> Import -> Project from folder or archive.

Now that you have an angular sample application, you can start it with the following command:

npm start

The above command is going to run the typescript compiler and lunch a simple server called lite server. The lite server will load the index.html page into your browser, and also it will refresh the application into the browser whenever you change any project file.

Add new components to your application

You can add other components to your application with the

The above command will create the websites-list component.

Add new class to your application

This command will create the website class.

Add new services to your angular application

This command will create the websites service.

Create routers in an angular application

import router model: import { RouterModule } from ‘@angular/router’;