https://github.com/tristanv0/angularframework
A Webpage for CPS530 Lab10 using the Angular Framework
https://github.com/tristanv0/angularframework
angular boostrap5 framework typescript
Last synced: about 1 year ago
JSON representation
A Webpage for CPS530 Lab10 using the Angular Framework
- Host: GitHub
- URL: https://github.com/tristanv0/angularframework
- Owner: Tristanv0
- Created: 2023-12-01T01:26:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T02:23:33.000Z (over 2 years ago)
- Last Synced: 2025-01-28T02:35:26.238Z (about 1 year ago)
- Topics: angular, boostrap5, framework, typescript
- Language: TypeScript
- Homepage: https://tristanv0.github.io/AngularFramework/
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular
This project is hosted using GitHub Pages! View the webpage here -> https://tristanv0.github.io/AngularFramework/
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.5.
## How To Use
To clone and run this application, you will need:
- Git
- Node.js
Once you have those, from your command line:
```shell
# Install Angular CLI globally
npm install -g @angular/cli
# Verify that Angular CLI has been installed successfully
ng version
# Clone this repository
git clone https://github.com/Tristanv0/Angular.git
# Go into the repository
cd Angular
# Run the following command to start the Angular development server
ng serve
# You can use Ctrl+C to end the development server
```
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component (e.g. `ng generate component navbar`). A new subdirectory will be created with component-name.component.{css,html,spec.ts,ts}
In `src/app/app.component.ts`, add the following code:
```typescript
# Assuming you did ng generate component navbar
import { NavbarComponent } from './navbar/navbar.component';
# inside the @Component add NavbarComponent in the imports array
imports: [CommonModule, RouterOutlet, NavbarComponent],
```
Now, to actually implement your component into your webpage, in `src/app/app.component.html`, just use the `app-navbar` selector to include your navbar component
```html
```