Blog

Getting Started With Angular: A Guide For Beginners

Tags: , , , ,
You are currently viewing Getting Started With Angular: A Guide For Beginners
Image source

What is Angular? Why should you use it for your project? What advantages does it provide? And how to get started with Angular? In this article, you will find all the answers and helpful tips to make your journey easy and effective.

What Is Angular?

It’s a platform that is built on TypeScript that is suitable for developing projects of different complexity from single-developer to enterprise-level apps and includes:

  • A component-based framework
  • A collection of well-integrated and exhaustive libraries that contain various features like routing, client-server communication, forms management, etc.
  • A package of tools for developing scalable apps, testing, and updating the code, and many more.

According to the statistics, Angular is used by 0.4% of all the websites designed on JavaScript. Such heavy-hitters as Google, The Guardian, General Motors, HBO, Netflix, ING, Nike, PayPal, Sony, and other organizations and businesses use Angular.

In 2010, AngularJS was rolled out by Google as an open-source project written in pure JavaScript to let the developers turn HTML-based documents into dynamic content. In 2014, the creators began rewriting AngularJS to design a more robust framework with new features and tools on offer.

In 2016, the totally new version — Angular 2 was released with numerous changes generated:

  • It was rewritten in TypeScript;
  • It supported mobile;
  • The architectural style switched to component-based;
  • It received a new in-built compiler;
  • The syntax was changed;
  • The application size was reduced.

Herewith, AngularJS and Angular are different frameworks. Currently, there are a lot of new versions of Angular in its modern form, which includes versions from 2 to 9, which was launched in February 2020. Angular and all the further versions (Angular 2+) have many benefits over AngularJS like more intuitive project structure and programming paradigms, Angular CLI, more structured coding language, and so on.

Essential Skills For Angular Web Developers

Today it’s not enough to know the programming language. Being a successful Angular web developer requires different skills. Here is a list of essential hard skills a good Angular developer must have to build a robust application.

  1. npm (Node Package Manager) is the primary tool not only for Node.js development but for others as well. It’s used for installing thousands of client-side web development packages.
  2. Angular CLI (Command Line Interface) is the very first package to be installed with npm that makes the process of writing code for the app much easier and faster by allowing the developers to add new components, modules, services to both new and existing apps.
  3. HTML and CSS. Though fast and functional apps can be developed using the Angular framework, the applications must nevertheless be rendered in a browser. Therefore, the developer is to build a user interface with HTML and CSS.
  4. Angular framework. A good developer should have a solid understanding of the framework so that he/she could effectively use the tools and advantages of the framework to simplify and hasten the process.
  5. TypeScript is a superset of JavaScript that is used to write client-side web apps. The key features of TypeScript are:
    • Increased ability to confidently refactor the code so that you can update and change the app wherever it’s needed without fear of breaking any existing functionality;
    • Reduced bugs because, thanks to the strong typing, the development team uses variables and functions as they were intended to be used.
  6. RxJS is a library that is created for reactive programming with observable streams. Though it exists independently, the library is bundled with Angular. It’s commonly used to make HTTP requests for data and to provide a consistent API for asynchronous tasks. So it’s better for the developer to have familiarity with the library.
  7. Git allows the developers to experiment with new features and coding techniques with confidence. Using it, the team of developers can return to a previous version of the code quickly and easily. So that Git helps the engineers evolve the apps safely with no fear of breaking existing functionality.

Angular Elements Overview

To build an application, it’s crucial to break it down into the elements to understand how they interact and then just do what the user expects. Each Angular application contains a collection of components or modules. In their turn, components are a special type of Directive that dictates the behavior of a particular UI element. Services maintain the reference between the components of each other and of back-end resources. Using Data Binding, all this code is displayed in real-time from Model to View components. Below you’ll find examples of how each part of the code looks like.

Modules

It’s something like a hybrid between containers and classes. Modules contain similar pipes, components and directives of the same functionality. The highlight of the modules is that the developers can export and import that all at once, enabling engineers to reuse the modules across the application. Yet, consider the fact that each component can be a part of one module only.

Here’s how modules look like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AssessmentsModule } from './assessments/assessments.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, AssessmentsModule, CoreModule, SharedModule, FormsModule, BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Source

Components

It’s a basic building block used for an Angular application. Each component includes:

  • A TypeScript class with a @Component() decorator;
  • An HTML template;
  • Styles.

A so-called view is a part of the user interface that is controlled by a definite component. As the user navigates through the application, components are created, updated, destroyed. Besides, such components can contain dynamic elements that respond to different events such as mouseover, clicks, and others.

Here’s an example of a component and how it can look like:

@Component({
  selector: 'app-child-one',
  templateUrl: './child-one.component.html',
  styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent{ }

Source

Directives

The behavior of any HTML element can be extended by directives. There are 2 main types of directives:

  • Attribute directives allow the developers to extend the appearance or behavior of the elements inside the template. For example, NgStyle is a commonly used attribute directive that enables software engineers to change the style of several elements at once.
  • Structural directives help developers work on the layout of the data like applying conditions or looping through it, and many more. An asterisk (*) is used before the directive name.

*ngFor and *ngIf are the commonly used structural directives.

  • *ngIf acts as an if:
<div *ngIf="showElement">
  <div>This element is based on the showElement condition</div>
</div>

Source

  • *ngFor acts as a for loop for looping through an array:
<table class ="table table-striped" >
  <tr *ngFor="let u of users">
    <td>
      {{u.id}}
    </td>
    <td>
      {{u.name}}
    </td>
    <td>
      {{u.model}}
    </td>
  </tr>
</table>

Source

Services

This is what connects components to their data source. Services are required for components to fetch data to display. Services use a dependency injection system to keep track of which classes (export class) depend on which data sources (providedIn).

Here is an example:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }
}

Source

How to Create an Angular Application

In the very first step of developing the web application using Angular, you need to install the framework and all the required tools. Below you will find a step-by-step instruction on how to create an Angular application.

Install All The Necessary Tools

First and foremost, the Angular CLI is required. It’s an essential tool to be installed so that you can create new projects, generate elements, open documentation, build, serve, debug, deploy, and so on. However, prior to the installation of Angular CLI, Node.js, and npm are needed:

  1. Visit the Node.js website;
  2. Download and install Node.js with npm included.

Run the next commands to verify if Node.js is installed: 

node --version

npm --version

After that, run the following command to install the Angular CLI:

npm install -g @angular/cli

By running the following command, you’ll verify if the installation was successful:

ng --version

Build An Application Using Angular CLI

Straight after the installation is finished, you can generate a new project by running the command:

ng new <app-name>

Replace `<app-name>` with your project name to start building out your application.

You will be prompted to include Angular routing and CSS format for use in your project. Feel free to pass these as arguments in the `ng new` command. 

Run Angular App Locally

Click Download Project in the left menu to download your files —  the source code from your StackBlitz. After that you need to create a new Angular CLI workspace by using the ng new command, where my-project-name is the name of your project:

ng new my-project-name

Then you need to replace the /src folder with the /src folder from your StackBlitz download in the newly CLI-generated application.

Run the application locally by using the following CLI command:

ng serve

Go to http://localhost:4200/ to see the app in the browser. In case the default port 4200 is not available, you can specify another port, for example:

ng serve --port 4201

You can edit the code and check for automatically updated changes in the browser. Press Ctrl+c to stop the ng serve command.

Deploy Your Angular App

The final step is the deployment of your application. There are a lot of ways to host web apps and how this can be done: AWS, Azure, GCP, Netlify, GitHub Pages, Firebase Hosting, and more. Besides, you can spin up Apache or Nginx servers for hosting the files.

However, you need to compile and package all the elements into a single application. Use the following code to package all the needed items into a single HTML file, a few CSS and JavaScript files, and other assets (videos, images, GIFs, etc.) and upload all that to the deployment platform:

ng build --prod

After that, a few files right within the project directory will be created and added in a folder called `dist/`. 

There is an even easier way to choose. You can use one of the tools that enable you to use the command `ng deploy` and the service will compile, build, package, and deploy your Angular application. So that there is no need to upload necessary files manually.

What to Learn Next 

All that is only the very beginning of your Angular journey. Now you are familiar with basic components and have a general idea of how it works. Move onto more advanced concepts, learning the following aspects:

  • Forms and their validations to improve user experience in CRUD applications;
  • Routing support for building single-page applications (SPAs);
  • Dependency Injection to automate code dependencies injections and avoid using main() method;
  • Using CRUD and APIs operations.

Getting Started With Angular: Final Thoughts

Choosing Angular for developing your application, you will get the following advantages:

  • Cross-platform compatibility;
  • High app performance;
  • High load speed;
  • Clean and strong code;
  • Code reusability;
  • Easy updates;
  • MVC architecture (Model-View-Controller);
  • Two-way Data Binding;
  • Routing Support;
  • Dependency Injection;
  • Form Validation, and many more.

However, it’s not the easiest way to go. Angular has a steep learning curve. So, you should be ready to spend some time learning the features, tools, and other options of the platform. Yet, it’s an open-source platform with tons of extensive libraries on offer. Thus, it’s worth the efforts because Angular helps you to build highly scalable and robust applications pretty fast that can be easily modified and updated to meet the demands of the end-users.