https://github.com/kelvintechnical/angularappointmentapp

Angular Appointment App
https://github.com/kelvintechnical/angularappointmentapp

angular angularjs javascript web webdevelopment website

Last synced: 4 months ago
JSON representation

Angular Appointment App

• Host: GitHub
• URL: https://github.com/kelvintechnical/angularappointmentapp
• Owner: kelvintechnical
• Created: 2024-11-05T02:14:08.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-12-04T17:35:30.000Z (over 1 year ago)
• Last Synced: 2025-03-30T23:13:08.950Z (about 1 year ago)
• Topics: angular, angularjs, javascript, web, webdevelopment, website
• Language: TypeScript
• Homepage: https://scintillating-kashata-20c0aa.netlify.app/
• Size: 144 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Angular Appointment Application


Description

Angular Appointment Application is a web application developed in Angular to manage and display appointments. The application structure includes core components and routing for ease of navigation. It allows users to schedule, view, and edit appointments seamlessly.


Prerequisites

To run this project, make sure you have Node.js and Angular CLI installed on your system.



    


Install Angular CLI: Run the following command to install Angular CLI globally:

        
npm install -g @angular/cli

    



Installation



    


Step 1: Clone the Repository

        


            
Clone the repository to your local machine:

            

git clone https://github.com/yourusername/AppointmentApp.git

            

Navigate into the project directory:

            
cd AppointmentApp

        

    

    


Step 2: Install Dependencies

        


            
Install the required npm packages by running:

            

npm install

        

    

    


Step 3: Start the Angular Development Server

        


            
Start the Angular server by running:

            

ng serve

            

Once the server is running, open your browser and navigate to http://localhost:4200/.

        

    



Features



    


Appointment Management: Allows users to create, edit, and delete appointments.

    


Routing and Navigation: Uses Angular’s Router for smooth navigation between components.

    


Responsive Design: Adjusts layout for both desktop and mobile devices.



Code Overview


Angular Component Structure

The main component, AppComponent, serves as the entry point and controller of the application, defining core settings like the application title.


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


@Component({

  selector: 'app-root', // This tag renders the component in HTML

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'AppointmentApp';

}



Explanation:



    


Selector: The custom HTML tag <app-root> that represents this component.

    


Template URL: The HTML file associated with this component.

    


Style URL: The CSS file providing styles for this component.



Testing

The project includes unit tests using Angular’s testing utilities to ensure the main component behaves as expected. Below is an example test suite for AppComponent:


import { TestBed } from '@angular/core/testing';

import { RouterTestingModule } from '@angular/router/testing';

import { AppComponent } from './app.component';


describe('AppComponent', () => {

  beforeEach(() => TestBed.configureTestingModule({

    imports: [RouterTestingModule],

    declarations: [AppComponent]

  }));

  it('should create the app', () => {

    const fixture = TestBed.createComponent(AppComponent);

    const app = fixture.componentInstance;

    expect(app).toBeTruthy();

  });

  it('should have as title "AppointmentApp"', () => {

    const fixture = TestBed.createComponent(AppComponent);

    const app = fixture.componentInstance;

    expect(app.title).toEqual('AppointmentApp');

  });

  it('should render title', () => {

    const fixture = TestBed.createComponent(AppComponent);

    fixture.detectChanges();

    const compiled = fixture.nativeElement as HTMLElement;

    expect(compiled.querySelector('.content span')?.textContent).toContain('AppointmentApp app is running!');

  });

});



Explanation:



    


Test Case 1: Checks if the app initializes correctly.

    


Test Case 2: Verifies that the title is set to "AppointmentApp".

    


Test Case 3: Confirms that the title renders in the DOM as expected.



Usage

After starting the server, navigate to http://localhost:4200/ in your browser to access the Appointment Application.


What I Learned



    


Angular Basics: Setting up an Angular project, defining components, and adding routing.

    


Unit Testing: Wrote test cases for component verification using Angular's testing utilities.

    


Template Binding: Used data binding to dynamically display the app title.



Future Plans



    
Add appointment filtering by date and time.

    
Improve UI/UX with better styling and animations.

    
Implement backend integration to save and retrieve appointment data.



Support & Feedback

If you found this project helpful, please consider leaving feedback to support my growth as an Angular developer. Suggestions are always welcome!




   

       Follow Me on X