Tutorial: Getting Started with Angular

Introduction

In this tutorial, we aim to introduce you to Angular, a robust JavaScript framework used for building dynamic web applications. By the end of this tutorial, you'll have an understanding of Angular's core concepts, and you'll set up your first Angular application.

You will learn:
- What Angular is and its main features.
- How to set up your development environment.
- Angular's key concepts, such as components, modules, and services.
- How to create a basic Angular application.

Prerequisites:
- Basic knowledge of HTML, CSS, and JavaScript.
- Familiarity with TypeScript is helpful but not mandatory.

Step-by-Step Guide

Setting up the Development Environment

First, you need to install Node.js and npm (Node Package Manager) in your system. You can download them from the official website.

Once installed, you can install Angular CLI (Command Line Interface) globally using npm:

npm install -g @angular/cli

Creating a New Angular Project

To create a new Angular project, you can use Angular CLI command:

ng new my-first-app

This command creates a new directory named my-first-app and sets up the initial Angular application.

Understanding Angular's Key Concepts

Angular's primary building blocks are components and modules.

Components: These are the basic building blocks of an Angular application. A component controls a part of the UI (User Interface) that you see in the browser.

Modules: Angular apps are modular. An Angular module, or NgModule, is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

Running Your App

To run your app, navigate to your project directory and run:

cd my-first-app
ng serve

This will start a development server. You can view your application by opening http://localhost:4200/ in your browser.

Code Examples

Creating a Component

Let's create a new component named hello-world:

ng generate component hello-world

This will generate a new component with four files: hello-world.component.ts, hello-world.component.html, hello-world.component.css, and hello-world.component.spec.ts.

Here's what hello-world.component.ts might look like:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  title = 'Hello World!';
}

In this code, we're creating a new component named HelloWorldComponent and setting its title property to 'Hello World!'.

Summary

In this tutorial, you have learned what Angular is, how to set up your development environment, the basics of Angular components and modules, and how to create a simple Angular application.

For further learning, you can explore more about Angular's Directives, Services, Dependency Injection, and Routing.

Practice Exercises

1. Exercise 1: Create a new Angular component and display it on the screen.
2. Exercise 2: Create an Angular module and include your component in it.
3. Exercise 3: Add a method to your component and call it on a button click.

Solutions

1. Solution to Exercise 1:
2. Use ng generate component <component-name> to create a new component.
3. In your component's HTML file, add some text or HTML content.
4. Reference your component in app.component.html.
5. Solution to Exercise 2:
6. Use ng generate module <module-name> to create a new module.
7. In your module file, add your component to the declarations array.
8. Solution to Exercise 3:
9. In your component's TypeScript file, add a method.
10. In your component's HTML file, add a button and use Angular's (click) event to call your method.