Getting Started with Angular: A Quick Introduction

Hey there! I'm excited to start this Angular learning course with you. As someone who's new to Angular, I understand that starting can be a little intimidating. But don't worry, we'll get through this together!

In this post and first module, I'll cover the basics of Angular and show you how to set up your development environment to build and run your first Angular app.

If you're interested in more Angular content, make sure to subscribe to our newsletter. And for full access to the course, consider becoming a member to support indie publishing.

Let's dive in!

Learning Outcomes:

By the end of this module, you'll have a foundational understanding of Angular and be able to:

• Understand the basics of Angular and its key concepts.
• Set up a development environment for Angular development.
• Build and run an Angular app using templates and data binding.
• Deploy an Angular app to a web server.

Prerequisites:

To get the most out of this course, you should have:

• Basic knowledge of HTML, CSS, and JavaScript.
• Familiarity with a text editor and command-line interface.

Introduction to Angular - getting through the basics

Angular is a popular open-source web application framework developed by Google. It is designed to make it easier to build modern, dynamic, and responsive single-page applications (SPAs) by providing a powerful and flexible set of tools and libraries. Angular is built on TypeScript, a statically-typed superset of JavaScript, which enables better tooling, improved code quality, and easier refactoring.

In this module, I'll provide an overview of Angular and its benefits. You'll learn about the architecture of Angular and its key concepts, including modules, components, templates, and services. I'll will also explore some code samples to help you better understand these concepts.

Angular Architecture

Angular's architecture is based on a modular and hierarchical structure. The main building blocks of an Angular application are:

1. Modules
2. Components
3. Templates
4. Services

Modules

An Angular application is organized into modules, which are a collection of related components, directives, and services. The primary module is called the root module, and it is responsible for bootstrapping the application. Every Angular application has at least one module, the AppModule, defined in the app.module.ts file.

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

In this code sample, we define the AppModule by importing the required dependencies and using the @NgModule decorator. The AppModule declares the AppComponent and sets it as the bootstrap component, meaning it will be the first component to be loaded when the application starts.

Components

Components are the building blocks of an Angular application's user interface. They consist of a TypeScript class, an HTML template, and a CSS stylesheet. Components are responsible for managing the data and logic associated with a specific part of the application.

Let's take a look at a simple example of a component:

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

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello, {{name}}!</h1>
  `,
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  name = 'Angular';
}

In this code sample, we define a HelloComponent using the @Component decorator. The component has a selector 'app-hello', which can be used as an HTML tag to include this component in other templates. The template displays a greeting message with a data-bound property 'name'. The component's CSS styles are contained in the 'hello.component.css' file.

Templates

Templates in Angular are written in HTML and provide the structure for the application's user interface. They can include data bindings, directives, and other elements that help create a dynamic and interactive experience.

In the HelloComponent example above, the template is defined as a string within the @Component decorator:

<h1>Hello, {{name}}!</h1>

Here, we use double curly braces {{ }} to bind the 'name' property from the component's TypeScript class to the template. This is called interpolation, and it allows the template to display dynamic data from the component.

Services

Services in Angular are singleton objects that can be used to share data and functionality across multiple components. They are typically used for tasks like fetching data from APIs, user authentication, and other common application features.

Here's an example of a simple service that fetches data from an API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://api.example.com/data';

constructor(private http: HttpClient) { }

getData(): Observable<any> {
return this.http.get(this.apiUrl);
}
}

In this code sample, we define a DataService using the @Injectable decorator. The service uses the Angular HttpClient to fetch data from the 'apiUrl'. The getData() method returns an Observable, allowing components to subscribe to the data stream and update their state when new data is received. To use the DataService in a component, we first need to inject it into the component's constructor:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getData().subscribe((data) => {
      this.data = data;
    });
  }
}

In this example, we import the DataService and inject it into the DataComponent's constructor. In the ngOnInit() lifecycle hook, we subscribe to the getData() method and update the component's 'data' property when new data is received.

The corresponding template for the DataComponent could look like this:

<div *ngIf="data">
  <h1>Data List</h1>
  <ul>
    <li *ngFor="let item of data">{{ item.name }}</li>
  </ul>
</div>

This template uses the *ngIf directive to conditionally render the content when the 'data' property is available. The *ngFor directive iterates over the 'data' array and renders a list item for each element.

Setting up the Development Environment

Installing Node.js

Angular requires Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js allows you to run JavaScript outside of the browser, and it comes with a package manager called npm (Node Package Manager), which will be used to install Angular CLI and other project dependencies.

To install Node.js, visit the official Node.js website and download the appropriate installer for your operating system. I recommend using the LTS (Long Term Support) version for stability.

After installing Node.js, open your terminal or command prompt and run the following command to verify the installation:

node -v

This command should display the installed Node.js version.

Installing Angular CLI

Angular CLI (Command Line Interface) is a powerful tool that simplifies the process of creating, building, and deploying Angular applications. To install Angular CLI globally on your system, run the following command:

npm install -g @angular/cli

After the installation is complete, you can verify the installation by running:

ng version

This command should display the installed Angular CLI version and some additional information.

Creating a New Angular Project

To create a new Angular project, use the ng new command followed by the name of your project:

ng new my-angular-app

Replace my-angular-app with the desired name for your project. The CLI will prompt you to choose options for your project, such as whether to enable Angular routing and which stylesheet format to use (CSS, SCSS, etc.). Once the project is created, navigate to the project's root folder using the cd command:

cd my-angular-app

Understanding the Project Structure

When you create a new Angular project using the Angular CLI, it generates a default project structure with several folders and configuration files. Here's a brief overview of the main files and folders:

• src/: This folder contains the source code of your application, including components, templates, styles, and assets.
• src/app/: This folder contains the root module and the main component of your application. You'll add more components, services, and other code files to this folder as you develop your application.
• src/index.html: This is the main HTML file that gets loaded when the application starts. It includes the root component's selector tag, which is the entry point for your application.
• angular.json: This configuration file contains settings and options for the Angular CLI, such as project metadata, build configurations, and additional scripts and assets.
• package.json: This file manages your project's dependencies and scripts. It lists all the npm packages required by your application and includes scripts to run, build, and test your application.

Running the Application

To start a local development server and run your application in the browser, use the ng serve command:

ng serve

This command will compile your application, start a development server, and open the application in your default web browser at http://localhost:4200/. The development server automatically watches for changes in your code and refreshes the browser when you save changes.

Congratulations! You've successfully set up a development environment for Angular, installed the Angular CLI, and created your first Angular project. You now have a solid foundation to start exploring Angular concepts and build your own applications. As you progress through the earning journey, you'll encounter more advanced features and techniques to help you create even more sophisticated applications.

Generating Components, Services, and More

The Angular CLI provides several commands for generating components, services, directives, and other building blocks of an Angular application. To generate a new component, use the ng generate command followed by the type of building block and its name:

ng generate component my-component

This command will create a new folder named my-component inside the src/app folder, along with the TypeScript, HTML, and CSS files for the new component. You can also use the shorthand version of the command:

ng g c my-component

Similarly, you can generate services, directives, and other building blocks using the same syntax. For example, to generate a new service:

ng generate service my-service

Or, using the shorthand version:

ng g s my-service

Building and Deploying your Application

When you're ready to build your application for production, use the ng build command:

ng build --prod

This command will generate a production-ready version of your application in the dist/ folder by default. The --prod flag enables optimizations like minification, dead code elimination, and ahead-of-time (AOT) compilation, which result in smaller bundles and faster load times.

To deploy your application, you can simply copy the contents of the dist/ folder to your web server or use one of the many hosting services that support Angular applications, such as Firebase, Netlify, or GitHub Pages.

Setting up a development environment for Angular is a straightforward process. By installing Node.js and Angular CLI, you'll have access to powerful tools for creating, building, and deploying Angular applications. Understanding the project structure and configuration files will help you navigate and manage your application as it grows. As you continue learning Angular, you'll discover more advanced features and best practices to build robust and scalable applications.

Building and running your first Angular App

In this section, I'll go over how to create an Angular component, use templates and data binding, and build and run the app locally. By the end of this section, you'll have hands-on experience in creating an Angular app and understanding the basic concepts involved.

Creating a new Component

Let's start by creating a new component called greeting. Open your terminal or command prompt, navigate to your Angular project's root folder, and run the following command:

ng generate component greeting

This command will create a new folder named greeting inside the src/app folder, along with the TypeScript, HTML, and CSS files for the new component.

Understanding the Component Files

The generated component files include: