Angular Tutorial: Getting started with Angular 2+

Front-end frameworks define modern web development work due to the capabilities of their simple yet powerful components. Angular 2+ stands out from other frameworks by offering developers the most control over every detail of their app.

While more difficult to pick up than React, Angular's extensive tools and advanced features have made it a favorite for companies like Google and Amazon.

Today, we’ll help you get started with Angular, break down the essential elements of any Angular app, and walk you through Angular installation.

Here’s what we’ll cover today:

• What is Angular 2+?
• Angular vs. React
• Getting familiar with Angular elements
• Build your first Angular application
• What to learn next

Master Angular 2+ in half the time

Learn Angular fast using skimmable, hands-on courses.

A Hands-on Guide to Angular

What is Angular 2+?

Angular 2+ is a TypeScript framework used to build client-side applications with CSS, HTML, and TS. The primary building block of any Angular application are components with collections of code to execute specific behaviors.

Angular lets you use HTML as a template language and extend HTML's syntax as you build components. Angular apps work by reading the HTML of a page and interpreting the attributes as directives to bind the page to a model based on standard TypeScript variables.

Angular is beloved by frontend developers because it streamlined app creation with ready to use packages for common services, preview browser templates of code, back-end integration, and features like expressive HTML.

While not as beginner-friendly as other frameworks, Angular is the most mature front-end framework on the market with years of complete packages for you to take advantage of.

Angular's user base is still growing and has been long adopted by companies like Google and Amazon. As more companies move from Angular.js to Angular 2+ each day, 2021 is a great time to join the Angular community.

Key features of Angular

• MVC architecture (Model-View-Controller): Separates program components into buckets of Model, View, and Controller to separate the presentation layer from the business logic.
• Two-way Data Binding: Angular automatically synchronizes your HTML view with your code, allowing you to watch your view update to changes in real-time.
• Routing Support: Easily build single-page applications (SPAs) that provide a desktop experience when navigating across views.
• Dependency Injection: Allows code dependencies to be automatically injected with a dependency container, so no main() method is required.
• Form Validation: Improve user experience in CRUD applications with Angular's easy-to-implement form validation.

Angular vs React

The main competitor to Angular is Facebook's React framework. Each has its own advantages, disadvantages, and different design philosophies that define when they're used. Let's break down the primary differences to see where Angular shines.

React

React is designed to be lightweight and beginner-friendly but lacks the in-depth control possible with Angular.

Advantages

• Offers a simple JS design using a syntax that combines HTML and JavaScript. React also offers great documentation for initial learners. *React’s Virtual DOM implementation and rendering optimizations make it very fast
• Top-notch Progressive Web App (PWA) support, especially with its create-react-app template generator.
• Built for reusable and modularized code. This makes apps easier to maintain and build upon, allowing for complex infrastructure to be more easily developed and scaled.

Limitations

• React is a highly un-opinionated technology, which means that developers have to make their own design choices.
• React technology is constantly updating, so it can be difficult to keep with the latest documentation.
• React relies on JSX, which can be a learning barrier to some newer developers.

Angular

Angular is built with the opposite of React: maximize control at the cost of beginner-friendliness.

Once you master Angular, you have the tools to control and fine-tune every aspect of your app in a way you couldn't with React.

Advantages

• Angular is supported by Google, with detailed documentation and a large community. There are numerous high-quality resources provided to help you learn quicker.
• Angular-language-service speeds up development with advanced coding features like autocomplete for external HTML template files.
• Advanced MVC architecture for better division of responsibilities and code organization.
• Supports test-driven development with instant code-to-view updates and tools for both end-to-end and unit testing.

Limitations

• Harder to learn than React because Angular offers a variety of different structures like Injectables, Components, Pipes, Modules, and more. It takes time to learn the place for each of these structures rather than learning just components to React.
• Slower performance by default because it works with the real DOM. Requires additional work to perform as fast as React, such as manual control of the rendering process.

For more on the differences between Angular and top frameworks Vue and React, see our previous article: Angular vs Vue vs React: choosing the best framework in 2020

Getting familiar with Angular elements

To understand Angular, you need to break down an application into its different elements and understand how they interact.

Angular apps have collections of alike components called Modules. Components are a special type of Directive that decides the behavior of a particular UI element. Components reference each other and back-end resources using connectors called Services.

Finally, all this code is automatically displayed in real-time from Model to View components using Data Binding.

Modules

Modules are containers of similar components, directives, and pipes that all relate to the same functionality. These modules can be imported and exported all at once, allowing for easy reuse across the app. Each component can only be a part of one module.

Think of Modules as a hybrid between classes and containers.

Here's an example of an Angular Module:

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 { }

• The bootstrap array contains the first component that will be initialized and rendered with the startup of the Angular application.
• The declarations array contains a list of components, pipes, and directives that are defined in the module.
• The imports array contains all the modules that our app will import from other libraries or Angular modules.
• The exports array allows us to share components, pipes, or directives from this module to others.

Components

Components are the most basic building block for any Angular application. Each component controls a section of the user interface called a view.

These components can have dynamic elements defined in the component's class that respond to events like clicks or hovering over.

Components are updated, created, and destroyed as the user navigates through the application.

Here's what a component looks like:

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

• The selector sets the name of the component. Modules and directives use the name to reference this component.
• The templateUrl attribute declares which HTML file this component will reference for its behavior. You can also create an inline HTML template using template: followed by your code.

template: `
<h1>Hello from App Component</h1>
`

• The stylesUrl attribute declares which CSS file this component will reference. As above, you can also inline your CSS style using:

styles:['div { font-weight: 600; }']]

Directives

Directives extend the behavior of any HTML element. The behavior is often things like a change in layout or appearance. Apart from Components, there are two other main types of directives.

Attribute directives

These directives help us extend the behavior or appearance of the elements inside the template. The most commonly used attribute directive is NgStyle, which allows you to change the style of several elements at once.

Structural directives

Structural directives are the most widely used directive in Angular apps. These directives help us work on the layout of the data, for example looping through it, applying conditions on the data, etc. The convention for a structural directive uses an asterisk (*) before the directive name.

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

• *ngFor acts as a for loop that allows us to loop 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>

• *ngIf acts as an if statement for conditional rendering of data:

<div *ngIf="showElement">
  <div>This element is based on the showElement condition</div>
</div>

Services

Components need Services to fetch data to display. This data can be directly from the backend or another unrelated component. You can think of services as the couriers that connect components to their data source.

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

Services use Angular's dependency injection system to track which classes (export class) depend on which data sources (providedIn).

Keep learning about Angular.

Learn the Angular 2+ skills you'll need at your next interview. Educative's text-based courses are easy to skim and give you live, hands-on practice with today's most demanded skills.

A Hands-on Guide to Angular

Installing Angular

Before you get started, you'll need to use the command line to install Angular. You'll also need an updated version of Node.js and npm package manager.

First, install the Angular CLI by entering the following command into your terminal window:

npm install -g @angular/cli

The CLI allows you to create projects, generate application/library code, and implement tasks like testing and deployment.

Next, you'll need to create an Angular workspace and initial application.

In your terminal, enter the CLI command:

ng new my-app

You'll be prompted to enter information about the new app, but for now, simply accept the defaults.
Finally, find the newly created workspace folder my-app and run these commands:

cd my-app
ng serve --open

This will set up a responsive local app server and open it in your browser to localhost:4200. The webpage will provide several resources to continue learning or options like + New Component that will get you developing.

What to learn next

Congratulations on completing your first step towards mastering Angular 2+. Now that you know the basic components, you’re ready to move onto more advanced concepts and build your first app. The next steps to continue your learning are:

• Forms
• Routing
• Dependency Injection
• Using APIs and CRUD operations

To help you learn Angular 2+, Educative has created A Hands-on Guide to Angular. This course takes you from beginner to advanced concepts with tons of hands-on examples and interactive demonstrations. In the final sections, you'll use your skills to build your own e-commerce app to put in your portfolio.

By the end of the course, you'll have the skills to build efficient and responsive Angular applications sure to impress any interviewer.

Happy learning!

Continue reading about front-end app development

• Angular vs Vue vs React: choosing the best framework in 2020
• Build an app from scratch with Vue.js ?
• Node.js vs React.js: which to choose for your web app project

Comments

[Niklas]

I think what you talk about in this article is Angular 2.
Please be aware that AngularJS angularjs.org and the modern Angular (also called Angular 2) angular.io are two different frameworks. There happened a lot of changes between AngularJS and Angular 2+. Especially in terms of syntax.

When using npm install -g @angular/cli you will install the Angular 2+ version of the CLI.

Don't feel offended, but the difference can save some headaches in finding information about Angular 😄

[Pini Cheyni]

I was thinking who in 2021 will still choose to post an article about AngularJS (I know there are legacy projects).
Anyway, it's AngularCLI.

[Ryan Thelin]

You're right, thanks for the heads up! I've corrected the article now, a silly mistake on my part 😅

[FrontEndWebDeveloping]

Good article. Thanks!