Angular: Build a CRUD Application With NgRx

Build a simple course management system in Angular

Sarindu Udagepala
Jan 21, 2020 · 12 min read
Image for post
Image for post

Introduction

Project Details

Image for post
Image for post

Project structure

Image for post
Image for post

REST API

// Retrieve all courses
GET http://localhost:8080/api/courses
// Create a course
POST http://localhost:8080/api/courses
// Delete a course
DELETE http://localhost:8080/api/courses/{courseId}
// Update a course
PUT http://localhost:8080/api/courses/{courseId}

Full source code

Image for post
Image for post

NgRx Entity at a Glance

export interface Course {id: string;name: string;description: string;}

EntityState interface

interface EntityState<V> {
ids: string[];
entities: { [id: string]: V };
}
import { EntityState } from '@ngrx/entity';export interface CourseState extends EntityState<Course> { }
Image for post
Image for post

Entity adapter

import { createEntityAdapter } from '@ngrx/entity';
const courseAdapter = createEntityAdapter<Course>();

Setting Up the Project

Software versions used

Project initialization

ng new angular-ngrx-example
npm install bootstrap --save
npm install @ngrx/{store,effects,entity,store-devtools,schematics} --save

Adding NgRx Support to Root Module

ng generate @ngrx/schematics:store State --root --statePath store/reducers --module app.module.ts
Image for post
Image for post

Creating and Setting Up the “Course” Feature Module

Generating the “Course” module

ng generate module course

Defining the “Course” model

Defining the Service class

Image for post
Image for post

Adding NgRx Artifacts to “Course” Module

Defining NgRx actions (course.actions.ts)

Defining NgRx reducers (course.reducers.ts)

export interface CourseState extends EntityState<Course> {  coursesLoaded: boolean;}
export const adapter: EntityAdapter<Course> = createEntityAdapter<Course>();
export const initialState = adapter.getInitialState({  coursesLoaded: false});
export const { selectAll, selectIds } = adapter.getSelectors();

Defining NgRx selectors (course.selectors.ts)

Defining NgRx effects (course.effects.ts)

Registering the NgRx artifacts in the Course module

StoreModule.forFeature('courses', courseReducer),
Image for post
Image for post
EffectsModule.forFeature([CourseEffects])
Image for post
Image for post

Creating Components and Defining Routes

Defining “courses-list” component

Defining “create-course” component

Declaring the components in the Course module

Configuring routes

Implementing the route resolver (course.resolver.ts)

Defining the router outlet

Image for post
Image for post

Configuring a Proxy to Access the REST API

Creating a proxy file

Registering the proxy file

Running the Application

Running the Spring Boot application (REST API)

java -jar {path_to_the_jar_file}/course-1.0.0-SNAPSHOT.jar

Running the Angular application

ng serve
Image for post
Image for post

Understanding the Execution Flow

Retrieve courses

Image for post
Image for post

Create course

Image for post
Image for post

Update course

Image for post
Image for post

Delete course

Image for post
Image for post

Optimistic UI

Conclusion

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Sarindu Udagepala

Written by

I’m a technical lead at Virtusa, blogger, son, husband and father. Passionate about technology and learning.

Better Programming

Advice for programmers.

Sarindu Udagepala

Written by

I’m a technical lead at Virtusa, blogger, son, husband and father. Passionate about technology and learning.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store