Create your first SPA with Angular - Tutorial

In this 4-part series we will look at how to create a MEAN application.
A MEAN application uses Mongo DB, Express JS, Angular and Node JS to create a full-stack application.
This first part of the series will create the foundations of our angular single page application.
We will create an application to store a personal diary that displays our posts in a table. We will be able to add, delete and update posts within the application and to store the data in an array.

🕒 Timestamps 🕒

00:00 - Introduction
00:41 - Setting up Angular
03:22 - Adding Bootstrap 3
04:27 - Creating a HTML Table
05:50 - Angular Shared Services
07:55 - Populating data from an array
09:02 - Adding action buttons to each entry
09:47 - Deleting diary entries
11:14 - Angular Subjects
13:39 - Angular Reactive Forms for adding entries
20:07 - Editing a Diary Entry

Link to source code:

Please like, subscribe and leave a comment to let me know what you think!

MongoDB Icon by Icons8

[KyleZhao-ry]

It's awsome. I learn a lot from your lectures. Thank you!

[nope]

this was such a magneficent tutorial even if it was a little hard to follow your actions(bc you are so good at coding that you are superfast), thank you so much for this video

[shayannafees]

best video... buddy.... just completed javascript html and css...started angular but don't know where to go...bcz i am a type of person who needs direction in every miunute. so what are your suggestion ???? how do i get familiar with angular???

[laynt]

For those following the tutorial with Angular version 17 or greater there's no more a file called app-routing.module.ts, now it's called app.routes.ts. Also you will need to import the RouterModule to the header.component.ts so it will look like this:

@Component({
selector: 'app-header',
standalone: true,
imports: [RouterModule],
templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export class HeaderComponent {

}

[navedpatel]

if you say it is simple app so far i cant imagine what will you call complicated, my head spins after hearing DiaryEntry also what is happening for me it is difficult to understand, I followed you until the end, but didnt understood anything . Should I giveup on learning angular or web dev. is it really me who find this difficult ?

[navedpatel]

it took 3-4 hours for me to complete a 26 min video