https://github.com/asif1325/angularconcepts
Angular e-commerce app using NgRx, RxJS, two-way binding, routing with lazy-loaded feature modules, AuthGuard (CanActivate), and a dynamic cart UI. Built with modular architecture and reactive state management for scalability and maintainability
https://github.com/asif1325/angularconcepts
angular angular-cli angular-components angular-material angular5 authguard concept directives javascript lazy-loading ngrx-store pipe pipes-and-filters rxjs
Last synced: 8 months ago
JSON representation
Angular e-commerce app using NgRx, RxJS, two-way binding, routing with lazy-loaded feature modules, AuthGuard (CanActivate), and a dynamic cart UI. Built with modular architecture and reactive state management for scalability and maintainability
- Host: GitHub
- URL: https://github.com/asif1325/angularconcepts
- Owner: Asif1325
- Created: 2025-05-06T05:33:23.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T07:16:51.000Z (9 months ago)
- Last Synced: 2025-05-06T08:29:56.987Z (9 months ago)
- Topics: angular, angular-cli, angular-components, angular-material, angular5, authguard, concept, directives, javascript, lazy-loading, ngrx-store, pipe, pipes-and-filters, rxjs
- Language: TypeScript
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngularConcepts: E-commerce Application
  
Welcome to the **AngularConcepts** repository! This project showcases an Angular e-commerce application that employs advanced features such as NgRx, RxJS, and lazy-loaded modules.
## Table of Contents
1. [Introduction](#introduction)
2. [Features](#features)
3. [Technologies Used](#technologies-used)
4. [Getting Started](#getting-started)
5. [Usage](#usage)
6. [Project Structure](#project-structure)
7. [Routing](#routing)
8. [State Management](#state-management)
9. [Dynamic Cart UI](#dynamic-cart-ui)
10. [Authentication](#authentication)
11. [Contributing](#contributing)
12. [License](#license)
13. [Releases](#releases)
## Introduction
This project is designed to demonstrate the core concepts of Angular development, focusing on e-commerce functionalities. It includes two-way data binding, routing with lazy-loaded feature modules, and a dynamic cart interface. The application uses a modular architecture, making it easy to scale and maintain.
## Features
- **NgRx for State Management**: Utilize reactive state management to handle complex data flows.
- **RxJS for Reactive Programming**: Implement observables to manage asynchronous data streams.
- **Lazy Loading**: Load feature modules on demand to improve performance.
- **AuthGuard**: Protect routes using CanActivate for secure navigation.
- **Dynamic Cart UI**: Create an interactive shopping cart that updates in real-time.
- **Two-Way Data Binding**: Facilitate seamless data synchronization between the model and the view.
## Technologies Used
- **Angular**: Front-end framework for building single-page applications.
- **NgRx**: Reactive state management for Angular applications.
- **RxJS**: Library for reactive programming using observables.
- **TypeScript**: Superset of JavaScript that adds static types.
- **HTML/CSS**: For structuring and styling the application.
## Getting Started
To get started with this project, you will need to clone the repository and install the necessary dependencies. Follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/Asif1325/AngularConcepts.git
```
2. Navigate to the project directory:
```bash
cd AngularConcepts
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
ng serve
```
Now, open your browser and navigate to `http://localhost:4200` to see the application in action.
## Usage
This application allows users to browse products, add them to their cart, and proceed to checkout. The dynamic cart updates as users add or remove items.
## Project Structure
The project follows a modular architecture. Here’s a brief overview of the folder structure:
```
/src
/app
/core
/shared
/features
/products
/cart
/auth
/store
/assets
/environments
```
- **core**: Contains services and utilities used throughout the app.
- **shared**: Holds shared components and directives.
- **features**: Contains feature modules for products, cart, and authentication.
- **store**: Holds NgRx store-related files.
## Routing
The application uses Angular's routing module to manage navigation. The routes are defined in the `app-routing.module.ts` file. Here's a sample of how routes are structured:
```typescript
const routes: Routes = [
{ path: '', redirectTo: '/products', pathMatch: 'full' },
{ path: 'products', loadChildren: () => import('./features/products/products.module').then(m => m.ProductsModule) },
{ path: 'cart', loadChildren: () => import('./features/cart/cart.module').then(m => m.CartModule) },
{ path: 'auth', loadChildren: () => import('./features/auth/auth.module').then(m => m.AuthModule) },
];
```
## State Management
NgRx is used for state management in this application. It helps in managing the state of the cart and products efficiently. Actions, reducers, and effects are set up to handle state changes and side effects.
### Example of an Action
```typescript
export const addToCart = createAction('[Cart] Add Item', props<{ product: Product }>());
```
### Example of a Reducer
```typescript
const cartReducer = createReducer(
initialState,
on(addToCart, (state, { product }) => ({
...state,
items: [...state.items, product]
})),
);
```
## Dynamic Cart UI
The cart UI updates in real-time as items are added or removed. This is achieved using Angular's two-way data binding and NgRx store.
### Example of Cart Component
```typescript
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
})
export class CartComponent {
items$: Observable;
constructor(private store: Store) {
this.items$ = this.store.select(selectCartItems);
}
}
```
## Authentication
The application includes an authentication module that uses AuthGuard to protect routes. Users can log in and log out, and their authentication state is managed using NgRx.
### Example of AuthGuard
```typescript
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private store: Store) {}
canActivate(): Observable {
return this.store.select(selectIsAuthenticated);
}
}
```
## Contributing
We welcome contributions! If you want to help, please fork the repository and submit a pull request. Make sure to follow the coding standards and add tests for new features.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Releases
For the latest releases, visit the [Releases section](https://github.com/Asif1325/AngularConcepts/releases). You can download and execute the files from there to get the latest updates.
---
Thank you for checking out the **AngularConcepts** repository! We hope you find it useful for your Angular development journey. If you have any questions or suggestions, feel free to reach out.