84 lines
3.4 KiB
Plaintext
84 lines
3.4 KiB
Plaintext
# Angular Clarity Boilerplate
|
|
|
|
This project is an Angular boilerplate application that uses the [Clarity Design System](https://clarity.design/) by VMware. It serves as a starter template for building modern, responsive, and feature-rich web applications.
|
|
|
|
This boilerplate is pre-configured with a standard project structure and includes essential modules and components to kickstart your development process.
|
|
|
|
---
|
|
|
|
## 🚀 Features
|
|
|
|
* **Angular:** The latest version of the Angular framework.
|
|
* **Clarity Design System:** A comprehensive set of UX guidelines, HTML/CSS components, and Angular components.
|
|
* **Responsive Layout:** A responsive navigation and layout structure.
|
|
* **Scalable Architecture:** A well-organized and scalable project structure.
|
|
* **Theming:** Easily customizable themes (light and dark).
|
|
|
|
---
|
|
|
|
## 🛠️ Getting Started
|
|
|
|
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
|
|
|
|
### Prerequisites
|
|
|
|
Make sure you have [Node.js](https://nodejs.org/) and the [Angular CLI](https://angular.io/cli) installed on your system.
|
|
|
|
```bash
|
|
npm install -g @angular/cli
|
|
|
|
## Installation
|
|
|
|
Install the dependencies:
|
|
npm install
|
|
|
|
Running the Application
|
|
Run the following command to start the development server:
|
|
ng serve
|
|
|
|
The app will automatically reload if you change any of the source files.
|
|
|
|
|
|
## DEPENDENCIES
|
|
|
|
This project includes the following main dependencies:
|
|
|
|
@angular/animations: The Angular animations library.
|
|
@angular/common: Commonly needed services, pipes, and directives.
|
|
@angular/compiler: The Angular template compiler.
|
|
@angular/core: Core Angular framework.
|
|
@angular/forms: Angular's form validation and handling library.
|
|
@angular/platform-browser: Everything needed to run Angular in a web browser.
|
|
@angular/router: The Angular router for navigation.
|
|
@cds/core: Clarity Design System core components.
|
|
@clr/angular: Angular components for Clarity.
|
|
@clr/ui: HTML/CSS components for Clarity.
|
|
rxjs: Reactive extensions for JavaScript.
|
|
zone.js: A signaling mechanism for Angular that allows it to detect when to run change detection.
|
|
|
|
|
|
📂 Project Structure
|
|
/
|
|
├── .vscode/ # VSCode settings
|
|
├── node_modules/ # Node.js modules
|
|
├── src/ # Application source code
|
|
│ ├── app/ # Application components and modules
|
|
│ │ ├── core/ # Core module (singleton services, guards, etc.)
|
|
│ │ ├── shared/ # Shared module (common components, pipes, etc.)
|
|
│ │ ├── app-routing.module.ts
|
|
│ │ ├── app.component.html
|
|
│ │ ├── app.component.scss
|
|
│ │ └── app.module.ts
|
|
│ ├── assets/ # Static assets (images, icons, etc.)
|
|
│ ├── environments/ # Environment-specific configuration
|
|
│ ├── index.html # Main HTML file
|
|
│ ├── main.ts # Main entry point
|
|
│ └── styles.scss # Global styles
|
|
├── .editorconfig # Editor configuration
|
|
├── .gitignore # Git ignore file
|
|
├── angular.json # Angular CLI configuration
|
|
├── package.json # Project dependencies and scripts
|
|
├── README.md # This README file
|
|
└── tsconfig.json # TypeScript configuration
|
|
|