Picture of Brian Love wearing black against a dark wall in Portland, OR.

Brian Love

MEAN App Unplugged

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.