Home Applications angular-material-iris-starter

angular-material-iris-starter

This application is not supported by InterSystems Corporation. Please be notified that you use it at your own risk.
0
0 reviews
0
Awards
338
Views
0
IPM installs
0
1
Details
Releases
Reviews
Issues
Pull requests
Articles
IRIS with REST, Angular, Angular Angular Material Starter Project

What's new in this version

Initial Release

Angular 8, Angular Material and InterSystems IRIS Starter

intro
themes

Table of Content

Getting started

git clone https://github.com/intersystems-community/angular-material-iris-starter.git new-project
cd new-project
npm install
npm run -- ng build --watch

and then in another terminal window

docker-compose up

Your IRIS Community Edition server will be available on port 7000. You can open http://localhost:7000 to see your Angular application, and http://localhost:7000/csp/sys/UtilHome.csp to log into IRIS Community Edition Management Portal. Default username is _system, password SYS – system will prompt you for new password upon first login.

If you want to rebuild a database container from scratch, you can do

docker-compose up --force-recreate --build

Useful Commands

  • ng build --watch --prod - runs full prod build and serves prod bundle
  • npm run test - runs lint and tests
  • npm run watch - runs tests in watch mode
  • 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)

analzye

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)
  • remove / rename context path config -- --deploy-url /angular-ngrx-material-starter/ --base-href /angular-ngrx-material-starter in package.json, this is used to configure url (context path) on which the application will be available (eg. https://www.something.com/<context-path>/)
  • rename app in /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 BUILT_WITH.md files as they are relevant only if project is open sourced on Github
  • edit the title and Open Graph metadata properties in index.html
  • remove or adjust links in the footer
  • replace logo in /assets folder ( currently 128 x 128 pixel png file )
  • adjust colors in /themes/default-theme.scss
  • create a pull request in the original repository to update BUILT_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

Goals

The main goal of this repository is to provide an up to date example of Angular application following all recent best practices in various areas like:

  • @ngrx/store - including reducers, actions, selectors
  • @ngrx/effects - for implementation of side effects like http requests, logging, notifications,…
  • @ngrx/entity - for CRUD operations
  • @ngrx/router-store - to connect the Angular Router to @ngrx/store
  • @ngrx/store-devtools - to enable a powerful time-travelling debugger.
  • @angular/material - material design component library, theming, …
  • routing
  • testing of all the above mentioned concepts
  • Angular CLI configuration (prod build, budgets, …)

This repository will also strive to always stay in sync with releases of Angular and the related libraries.
The nature of the repository is also a great match for first time open source contributors who can add
simple features and enhance test coverage, all contributors are more than welcome!

Learning Materials

Articles with content that explains various approaches used to build this starter project.

Theming

Features

  • custom themes support (4 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)

Troubleshooting

  • Blocking at emitting LicenseWebpackPlugin when npm start - try using cnpm instead of npm

Contributors

Want to start contributing to open source with Angular?

Leave your mark and join the growing team of contributors!

Get started by checking out list of open issues and reading Contributor Guide

Tomas Trajan
Tomas Trajan

💻 📖 ⚠️ 🎨 📝
Tim Deschryver
Tim Deschryver

💻 👀 🤔 📖
Moshe
Moshe

💻 ⚠️ 🐛
hhubik
hhubik

💻 📖
Muhammad Umair
Muhammad Umair

💻
Phil Merrell
Phil Merrell

💻
Valery Kharshats
Valery Kharshats

💻 🐛
Neil Pathare
Neil Pathare

📖
Peter Krieg
Peter Krieg

💻 🐛
Alex
Alex

💻 🐛
Fiona
Fiona

💻 🌍
Fabien Dehopré
Fabien Dehopré

💻 🌍
Matias Iglesias
Matias Iglesias

💻 🌍
Jeremy Kairis
Jeremy Kairis

💻 🐛
Iago Andrade
Iago Andrade

💻 🌍
aideslucas
aideslucas

💻 🌍 🐛
Terry Strachan
Terry Strachan

💻 ⚠️
Laurentiu Amagdei
Laurentiu Amagdei

💻 ⚠️
Petar Djordjevic
Petar Djordjevic

💻
Zachary DeRose
Zachary DeRose

💻 ⚠️
erhise
erhise

💻 ⚠️
Joost Zöllner
Joost Zöllner

💻 ⚠️
Tomasz Kula
Tomasz Kula

💻 ⚠️ 🐛
Front-End Developer
Front-End Developer

💻 🐛
Vishal Sodani
Vishal Sodani

💻 🔧
Kosmas Schütz
Kosmas Schütz

💻 🌍
huyen1990
huyen1990

⚠️
Chau (Joe) Nguyen
Chau (Joe) Nguyen

💻 ⚠️
Amadou Sall
Amadou Sall

💻
Dino
Dino

🔧
Mathias Døhl
Mathias Døhl

💻
Carl in 't Veld
Carl in ’t Veld

💻 🐛
Abed Zantout
Abed Zantout

💻
Peng Wang
Peng Wang

💻 🌍
Santosh Yadav
Santosh Yadav

💻 ⚠️
Ray
Ray

💡 📖
alharto
alharto

💻 🐛
Read more
Made with
Version
1.0.025 Sep, 2019
Category
Technology Example
Works with
InterSystems IRISInterSystems IRIS for Health
First published
25 Sep, 2019
Last checked by moderator
27 Jun, 2023Works