Brian Love
Angular + TypeScript Developer in Denver, CO

MEAN App Unplugged

Reading time ~2 minutes

Building a MEAN unplugged. We’ll use TypeScript, Angular Material and reactive programming.

Source Code

You can download the source code and follow along or fork the repository on GitHub:

First, run the gulp tasks, then start the Node.js Express server.

$ gulp
$ chmod +x ./dist/bin/www
$ ./dist/bin/www

Then, serve the Angular client using the CLI:

$ ng serve

Demo

MEAN App Server Tests

Goals

Our goals for this series are:

  1. Create a simple CRUD app similar to the Tour of Heros tutorial app for Angular.
  2. Create the REST API using Express written in TypeScript with Mongoose for persisting data to MongoDb.
  3. Use Angular Material and Angular Flex Layout for the UI.
  4. Use Reactive Extensions for JavaScript, specifically, RxJS and ngrx.

Project Structure

├── client
│   ├── src
│   │   ├── app
│   │   │   ├── app-routing.module.ts
│   │   │   ├── app.component.html
│   │   │   ├── app.component.scss
│   │   │   ├── app.component.ts
│   │   │   ├── app.module.ts
│   │   │   ├── app.reducers.ts
│   │   │   ├── core
│   │   │   │   └── services
│   │   │   │       ├── heros.service.spec.ts
│   │   │   │       └── heros.service.ts
│   │   │   ├── heros
│   │   │   │   ├── heros-routing.module.ts
│   │   │   │   ├── heros.actions.ts
│   │   │   │   ├── heros.effects.ts
│   │   │   │   ├── heros.module.ts
│   │   │   │   ├── heros.reducers.ts
│   │   │   │   └── index
│   │   │   │       ├── index.component.html
│   │   │   │       ├── index.component.scss
│   │   │   │       ├── index.component.spec.ts
│   │   │   │       └── index.component.ts
│   │   │   ├── models
│   │   │   │   └── hero.ts
│   │   │   └── shared
│   │   │       ├── hero-create-dialog
│   │   │       │   ├── hero-create-dialog.component.html
│   │   │       │   ├── hero-create-dialog.component.scss
│   │   │       │   ├── hero-create-dialog.component.spec.ts
│   │   │       │   └── hero-create-dialog.component.ts
│   │   │       ├── heros-list
│   │   │       │   ├── heros-list.component.html
│   │   │       │   ├── heros-list.component.scss
│   │   │       │   ├── heros-list.component.spec.ts
│   │   │       │   └── heros-list.component.ts
│   │   │       ├── layout
│   │   │       │   ├── layout.component.html
│   │   │       │   ├── layout.component.scss
│   │   │       │   ├── layout.component.spec.ts
│   │   │       │   └── layout.component.ts
│   │   │       ├── shared.actions.ts
│   │   │       ├── shared.module.ts
│   │   │       ├── shared.reducers.ts
│   │   │       └── toolbar
│   │   │           ├── toolbar.component.html
│   │   │           ├── toolbar.component.scss
│   │   │           ├── toolbar.component.spec.ts
│   │   │           └── toolbar.component.ts
│   │   ├── environments
│   │   │   ├── environment.prod.ts
│   │   │   └── environment.ts
│   │   ├── index.html
│   │   ├── main.ts
│   │   ├── polyfills.ts
│   │   ├── styles.scss
│   │   └── tsconfig.app.json
│   ├── tsconfig.json
│   └── tslint.json
├── dist
├── gulpfile.js
├── gulpfile.ts
├── package.json
└── server
    ├── bin
    │   └── www
    ├── src
    │   ├── api
    │   │   └── heros.ts
    │   ├── interfaces
    │   │   └── hero.ts
    │   ├── models
    │   │   └── hero.ts
    │   ├── schemas
    │   │   └── hero.ts
    │   ├── server.ts
    │   └── tests
    │       └── hero.ts
    └── tsconfig.json

Series

This post is part of a series on building a MEAN app using TypeScript with Angular Material and Reactive programming:

  1. Step 1: Create REST API server using Express written in TypeScript with data persistence to Mongoose.
  2. Step 2: Configured Angular client using Angular Material and Angular Flex Layout.
  3. Step 3: Use Rxjs and ngrx to create a simple app.

Brian Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Denver and I ski (a lot).