angular-ngrx-socket-frontend - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #golang #android #nodejs #macos #awesome #security #mcp #openai #open-source

angular-ngrx-socket-frontend

(★ 180)

Angular Ngrx Socket.IO Example

File Explorer

Download Latest Version (.zip)

- app.e2e-spec.ts
- app.po.ts
- tsconfig.e2e.json
- - app-routing.module.ts
  - app.component.html
  - app.component.spec.ts
  - app.component.ts
  - app.module.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- styles.css
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- typings.d.ts
.angular-cli.json
.editorconfig
.gitignore
karma.conf.js
LICENSE.md
package-lock.json
package.json
protractor.conf.js
README.md
tsconfig.json
tslint.json

# Installation Guide

1. Get the code

git clone https://github.com/avatsaev/angular-ngrx-socket-frontend

Downloads the entire project code from GitHub to your computer.

cd angular-ngrx-socket-frontend

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

-----------------

# This repository is no longer maintained, please refer to https://github.com/avatsaev/angular-contacts-app-example

--------------

## Angular Ngrx Socket.IO Example

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

This Angular project demonstrates the implementation of a simple real time Notes app, with Socket.IO's asynchrnous 2-way event streams, combined with Ngrx/Store library for single state management à la Redux, and Ngrx/Effects to mange the side effects.

![](http://i.imgur.com/IUArcBH.gif)

Backend available here: https://github.com/avatsaev/angular-ngrx-socket-backend

## Ngrx + Effects with a simple REST Service

![](http://i.imgur.com/bpIbJrd.png)

## Ngrx + Effects with Socket.IO

![](http://i.imgur.com/F7k2Iyj.png)

## Project's file structure:

![file structure](https://i.imgur.com/IbGUfzi.png)

## Application's central state tree:

![](http://i.imgur.com/7DiuGH6.png)

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.1.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).