Angular, NGXS and Angular Material Starter

por @iago_aa baseado em Angular, NGRX and Angular Material Starter por @tomastrajan

Table of Content

• Live Demo
• Getting Started
• Useful Commands
• Make It Your Own
• Learning Materials
• Lista de Projectos construidos usando este projeto starter
• Features
• Stack
• Code of Conduct
• Contributors Guide
• Changelog ( get notified about the newest releases, follow Release Butler on Twitter )

Getting started

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

Useful Commands

• npm start - inicia um servidor de desenvolvimento e abre o navegador com a aplicação rodando
• npm run test - roda tarefas de lint e testes
• npm run watch - roda tarefas de teste em watch mode (Faz com que cada alteração de arquivo dispare o teste)
• npm run prod - roda todo o build preparado para produção e cria o prod bundle
• npm run prettier - roda o prettier para formatar todo codigo escrito em typescript e scss
• npm run analyze - roda todo o build preparado para produção e o pluguin do webpackwebpack-bundle-analyzer para visualizar dependencias e gerenciar o tamanho da aplicação

Torne isso um projeto seu

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 BUILT_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 128 x 128 pixel png file )
• adjust colors in src/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

Integração contínua

Starter project estã usando Travis CI para rodar linters e testes em cada commit realizado. Baseado na sua preferência você pode:

• não usar ou usar de outro CI server e deletar tanto.travis.yml e .travis-deploy.sh
• Segue o artigo em Inglês que explica como criar uma conta no Travis CI e fazer o link com o projeto no repositório do Github configure build com GH_REF e GH_TOKEN environment variables para automaticamente fazer deploy das releases para Paginas do Github

Estude Material

Estes artigos possuem conteudo que explica varias abordagens usadas para construir este starter project.

• Blog post about Best subscribing to RxJS Observable data by Components: subscribe() vs | async pipe
• Blog post about Best Practices for Angular CLI used in this starter project
• Blog post about Typescript tips for Ngrx reducer code
• Blog post about building responsive layouts with Bootstrap 4 in Angular apps
• Blog post about configuration of animations during runtime
• Blog post about unit testing of components with NgRx TestStore
• Blog post about Angular CLI budgets
• Blog post about the best way to unsubscribe RxJs streams
• Blog post about Angular 6+ DI with providedIn

Temas

• Blog post
• Presentation (Slides)
• Live coding Video Tutorial
• Meetup Presentation & Live coding Video

Features

• suporte a temas customizados (5 temas incluídos)
• carregamento lazy-loading de feature modules
• localStorage ui state persistence
• @Action Handlers for API requests
• Design totalmente responsivo
• angular-material e componentes customizados ficam em SharedModule

Stack

• Angular
• ngxs (ngrx for more mature state manager 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

Contribuidores

Quer contribuir com este projeto angular feito para desenvolvedores brasileiros?

Deixe sua marca e ingresse nesse time de contribuidores que está começando!

Comece verificando as issues localizadas em issues e leia Contributor Guide

Iago Andrade 💻 📖 ⚠ 🎨 📝