/angular-ngrx-material-starter

Angular NgRx & Angular Material Starter Project

Primary LanguageTypeScriptMIT LicenseMIT

Angular, ngrx and Angular Material Starter

by @tomastrajan

license code style: prettier Build Status Twitter Follow

into themes

Table of Content

Getting started

git clone https://github.com/tomastrajan/angular-ngrx-material-starter.git new-project
cd new-project
npm install
npm start

Useful Commands

  • npm start - starts a dev server and opens browser with running app
  • npm run test - runs lint and tests
  • npm run watch - runs tests in watch mode
  • npm run prod - runs full prod build and serves prod bundle
  • npm run prettier - runs prettier to format whole code base (.ts and .scss)
  • npm run analyze - runs full prod build and webpack-bundle-analyzer to visualize how much code is shipped (dependencies & application)

Make It Your Own

When using this starter project to build your own app you might consider some of the following steps:

  • use search and replace functionality of your favourite IDE to replace anms with <your-app-prefix>
  • rename project in package.json name property and set appropriate version (eg 0.0.0 or 1.0.0)
  • rename app in src/environments/ files (will be shown in browser tab)
  • delete pre-existing CHANGELOG.md (you will generate your own with future releases of your features)
  • delete CODE_OF_CONDUCT.md, CONTRIBUTING.md and BUILD_WITH.md files as they are relevant only if project is open sourced on Github
  • remove or adjust links in the footer
  • replace logo in src/assets folder ( currently 45 x 48 pixel png file )
  • adjust colors in src/themes/default-theme.scss
  • create a pull request in the original repository to update BUILD_WITH.md file with a link and short description of your project

Continuous Integration

Starter project is using Travis CI for running linters and tests on every commit. Based on your preferences and needs you can either:

  • not use / use other CI server and delete both .travis.yml and .travis-deploy.sh
  • create Travis CI account and link it to your projects Github repo and configure build with GH_REF and GH_TOKEN environment variables for automatic deployment of releases to Github Pages

Learning Materials

Theming

Features

  • custom themes support (3 themes included)
  • lazy-loading of feature modules
  • lazy reducers
  • localStorage ui state persistence
  • @ngrx/effects for API requests
  • fully responsive design
  • angular-material and custom components in SharedModule

Stack

  • Angular
  • ngrx (or try ngx-model if you prefer less boilerplate)
  • Angular Material
  • Bootstrap 4 (only reset, utils and grids)

Acknowledgements

Built with and uses Angular CLI