angular-app

Angular playground for application development. Initial project setup based on https://github.com/preboot/angular-webpack. Project has been later converted to use Angular CLI. The project focuses mainly on creating core/enabler components to be used in a Angular app rather than the app itself.

Demo available here

Quickstart

Install dependencies

npm install

Start (development) server

npm start

Open http://localhost:4200 in your browser. The Components menu does not require authentication. Views that require authentication need proper backend server.

Run unit tests

npm test

Run e2e tests

npm run e2e

Build production files (into dist directory)

npm build

The application uses lazy loading for multiple sub-views at the moment. some of the application views are bundled into separate chunks that are eagerly loaded at start up.

To quickly test the build files:

npm run serve-build

The application is now available in http://localhost:4200.

Backend support

Current version runs with webpack-dev-server and client requires only static assets. Backend upgrade is needed if HTTP requests are made from client. There is Node.js + Express backend skeleton available in https://github.com/jojanper/draal-jsapp that uses this repo as frontend client.

Publish to GitHub Pages

npm run gh-pages

Travis CI

https://travis-ci.org/jojanper/angular-app

Project layout within src folder

• app
  • Source files for the application
• assets
  • Asset files for the application (images etc.)
• style
  • Application wide styling
• test_helpers
  • Utility classes for unit testing

The structure of source files tries to follow the principles outlined in https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1 (target framework is React but applicable to Angular project also).

• application
  • Bootstrap module for the application - AppModule
• models
  • Models and interfaces that are application wide
• pages
  • Application pages and related views
• router
  • Application routes and related business logic
• rx
  • Reactive extensions using @ngrx/store and @ngrx/effects that are application wide
• services
  • Application services
• utils
  • Utility classes and methods. Application wide decorators are also stored here.
• widgets
  • Generic components for building the views across pages

Application building blocks (non-exhaustive list)

• Components
  • Login
  • Logout
  • Alert
  • Form
    • FormModel
    • Usage example
  • DataTables
    • Usage example
• Services
  • Alert
  • Application events
  • ApiService
  • AuthGuard
• Router setup
• State management, actions, effects
• Application views
• Application entry point

License

MIT