Building an Angular 17 Fancy Notes Application
In this tutorial, we will build a Fancy Notes application using Angular 17. We will create a simple note-taking application where users can add, edit, and delete notes.
Setting up the project
First, make sure you have Node.js installed on your machine. Then install Angular CLI by running the following command:
npm install -g @angular/cli
Now, create a new Angular project by running the following command:
ng new fancy-notes
Next, navigate to the project directory and install the necessary dependencies:
cd fancy-notes
npm install @angular/common @angular/core @angular/forms @angular/http @angular/router
Creating the notes service
Let’s create a notes service that will handle our HTTP requests to a backend server. Create a new folder called ‘services’ inside the ‘src/app’ directory. Inside this folder, create a new file called ‘notes.service.ts’ and add the following code:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class NotesService {
private apiUrl = 'http://localhost:3000/notes';
constructor(private http: HttpClient) {}
getNotes() {
return this.http.get(this.apiUrl);
}
addNote(note) {
return this.http.post(this.apiUrl, note);
}
updateNote(note) {
return this.http.put(`${this.apiUrl}/${note.id}`, note);
}
deleteNote(id) {
return this.http.delete(`${this.apiUrl}/${id}`);
}
}
This service defines methods for fetching, adding, updating, and deleting notes using Angular’s HttpClient module.
Using the notes service in a component
Now, let’s create a new component called ‘notes-list’, which will display a list of notes. Inside the ‘src/app’ directory, create a new folder called ‘components’. Inside this folder, create a new file called ‘notes-list.component.ts’ and add the following code:
import { Component } from '@angular/core';
import { NotesService } from '../services/notes.service';
@Component({
selector: 'app-notes-list',
templateUrl: './notes-list.component.html',
styleUrls: ['./notes-list.component.css']
})
export class NotesListComponent {
notes: any[];
constructor(private notesService: NotesService) {}
ngOnInit() {
this.notesService.getNotes().subscribe((data: any) => {
this.notes = data;
});
}
addNote() {
const note = { title: 'New Note', content: '' };
this.notesService.addNote(note).subscribe(() => {
this.notes.push(note);
});
}
editNote(note) {
this.notesService.updateNote(note).subscribe();
}
deleteNote(note) {
this.notesService.deleteNote(note.id).subscribe(() => {
this.notes = this.notes.filter((n) => n !== note);
});
}
}
Now, create a new file called ‘notes-list.component.html’ inside the ‘src/app/components’ directory and add the following code:
My Notes
Finally, import and declare the NotesListComponent in the ‘app.module.ts’ file:
import { NotesListComponent } from './components/notes-list.component';
@NgModule({
declarations: [
NotesListComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [NotesService],
bootstrap: [NotesListComponent]
})
export class AppModule { }
That’s it! You have now created a Fancy Notes application using Angular 17 and implemented services using HttpClient. You can further enhance this application by adding features like user authentication, search functionality, and more.
Need source code bro
dear sir make a video use multiple layout in a project