1. Introduction

In this tutorial, we will primarily focus on setting up your first Angular application. The goal is to give you a hands-on experience on Angular's core concepts like modules, components, and templates. By the end of this tutorial, you will have a working Angular application.

Prerequisites
Before we get started, you should have a basic understanding of HTML, CSS, and JavaScript. Knowledge of TypeScript is not mandatory, but it will be helpful since Angular is written in TypeScript.

2. Step-by-Step Guide

First, you need to install Node.js and npm (Node Package Manager) on your machine. After you've installed Node.js and npm, you can install Angular CLI (Command Line Interface), which is a tool that allows you to create and manage Angular applications.

To install Angular CLI, open your terminal and run:

npm install -g @angular/cli

After installing the CLI, you can now create a new Angular project:

ng new my-first-app

This will prompt you for some information about the features you want to include in your new project. For now, you can stick with the defaults.

Navigate into your new project:

cd my-first-app

And start your application:

ng serve

Now, if you go to http://localhost:4200/ in your browser, you should see your application running.

3. Code Examples

Let's take a look at the structure of an Angular application:

The src/app folder contains the actual logic of your application. It's where you'll spend most of your time.

src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts

app.module.ts is the entry point of your application. It imports the modules that your application needs.

// app.module.ts
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 { }

app.component.ts is the root component of your application. It contains the logic for your app's main page.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-first-app';
}

app.component.html is the template for the root component. It contains the HTML that will be rendered on your app's main page.

<!-- app.component.html -->
<h1>Welcome to {{ title }}!</h1>

4. Summary

In this tutorial, we have learned how to set up an Angular application. We have also looked at some of the core concepts of Angular like modules, components, and templates.

As next steps, you could explore more about Angular's modules, components, directives, services, and routing.

5. Practice Exercises

1. Modify the AppComponent to include a new property and display it in app.component.html.
2. Create a new Angular component and include it in your AppComponent.
3. Use Angular CLI to generate a new service and include it in your app.module.ts.

Remember, practice is key when learning a new framework. Keep experimenting with different features of Angular to get a good grasp of the framework.