9elements / angular-workshop

Learning Angular: From component state to NgRx

Angular Counter Component

📖 This example is part of the free online book: Testing Angular – A Guide to Robust Angular Applications . 📖

Overview

This repository builds a simple counter with Angular in three ways:

• CounterComponent: Counter that manages its own state. Has an Input and an Output.
• ServiceCounterComponent: Counter that stores the state in shared service.
• NgRxCounterComponent: Counter that uses NgRx to manage the count and NgRx effects to persist them on the server.

Related projects

• Angular Flickr Search – a more complex example app
• Angular testing workshop

Development server

• Clone the repository, change into the angular-workshop directory
• npm install
• npm install -g @angular/cli
• ng serve
• Navigate to http://localhost:4200/

Running unit & integration tests

Run ng test to execute the unit & integration tests with Karma and Jasmine.

Running end-to-end tests with Cypress

Run ng run angular-workshop:cypress-run to execute the Cypress end-to-end tests. (This starts the development server automatically.)

Run ng run angular-workshop:cypress-open to start the interactive Cypress test runner.

Deployment

Run npm run deploy to the deploy the code to [https://9elements.github.io/angular-workshop/].