MiniApp - MiniApp

This is a simple Angular application that uses a mock JSON API provided by JSONPlaceHolder.

The application is divided into feature modules to handle the users, posts, albums and to do features. The core set of features demonstrated here are:

• require user authentication
• maintain a user session
• displays a list of blog posts for that user
• displays a list of photo albums for that user
• displays a list of to do items for that user
• provide basic searching, sorting and status filtering (for to do items)

Demo

View this application in action at https://angular-demos.github.io/mini-app/

Dependencies

This application was built with these key dependencies

• Angular (tested with 5.2.1)
• Bootstrap 4 (tested with 4.0.0-beta.3)
• NgBootstrap (tested with 1.0.0-beta.9)

Installation

You need NodeJS installed to build and run this demo. Afterwards these two CLI commands will start a local server, where by you can access the demo at http://localhost:4200/

npm install
npm start

Unit Tests and E2E

This demo contains just a few tests to show how testing will be handled in the future. It supports both unit tests and integration tests.

To run the unit tests for components:

npm test

This will verify that the MainComponent renders the brand name "MiniApp"

To run integration tests for E2E:

npm run e2e

This will verify that the Users module performs a log in successfully.

Overview

This application is designed as a read-only example of a basic Angular application. The text shown in the demo is gibberish generated by the JSON end points, and none of the write operations (i.e. removing a to do item) are persisted in the back end.

Design

This demo follows a basic Bootstrap 4 UI design with a navbar at the top and a simple layout of content. The layout is responsive to both desktop and mobile sizes.

Here are some notable features of the UI:

• Toast messages are embedded in the top of pages for easier mobile reading.
• Searching, sorting and filter are supported for all feature modules.
• UI components have their own feature module.
• REST, Pipes and services are in the Shared module.

Architectural

This demo follows a common Angular feature module approach. Where by, routes define scopes for features and those feature modules can be lazy loaded based upon demand.

Modules are described as follows:

• Main is the bootstrap module that starts the demo.
• Shared contains reusable Pipes, Components and utility classes.
• UI contains generic UX components such as Toasts and the ViewHeader.
• Albums handles the displaying of albums and photos.
• Posts handles the displaying of posts.
• Todos handles the to do items.
• Users handles log in and log out features.

While the Users module handles the features of authentication. The actual services for managing the current user session is in the Shared module. This allows other feature modules to depend upon authentication services without requiring the Users module to be loaded.

CSS and UX

This demo contains examples of responsive design. The albums pop up dialog that displays photos organizes photos into a grid of 4x4. The size of images adjusts to changes in the browser widths.

The top nav bar compacts on mobile and expands on desktop. Showing a toggle button on mobile to display more menu options.