Example app with Angular 5 + Angular CLI + Angular Material + Docker + Angular Example Library
Base project made with much ❤️ . Contains CRUD, patterns, custom library, etc.
LIVE DEMO
Getting started
Warning
Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
- Go to project folder and install dependencies:
npm install
- Launch development server, and open
localhost:4200
in your browser:
npm start
Usage
Tasks | Description |
---|---|
npm i | Installs everything needed |
npm start | Starts the app. Then, go to localhost:4200 |
npm run test | Runs unit tests with karma and jasmine |
npm run e2e | Runs end to end tests |
npm run e2e:home | Runs end to end tests only for the home directory |
npm run build | Builds the app for production |
npm run lint | Runs the linter (tslint) |
npm run ci | Executes linter and tests |
npm run deploy | Builds the app and deploy it to Github pages (angular-cli-ghpages) (fork to do this and remove CNAME file) |
npm run sme | Builds and runs source map explorer, really cool :) |
npm run release | Creates a new release using standard-version |
npm run docker | Builds the docker image and run the container |
Features
- Responsive layout (flex layout module)
- SASS (most common used functions and mixins) and BEM styles
- Modal and toasts (snakbar)!
- CRUD: create, update and remove heroes
- Search bar, to look for heroes
- Custom loading page
- Angular Pipes
- Interceptors and Events (Progress bar active, if a request is pending)
- Internationalization
- Lazy loading modules
- Service Workers
- Dynamic Imports
- Custom example library
- Modernizr (browser features detection)
- Google Tag Manager
- Github pages deploy ready
- Unit tests with Jasmine and Karma including code coverage
- End-to-end tests with Protractor
- ES6 Promises and Observables
- Following the best practices!
Docker
You can build the image and run the container with Docker. The configuration is in the nginx folder if you want to change it.
docker build -t angularexampleapp .
docker run -d -p 4200:80 angularexampleapp
Do you want to create your own library with Angular?
This project is using an example library in angular, which you can check it here.
This library contains a sample module, component, pipe, directive, all with tests, AOT compilation and an Angular-CLI playground too.
You can see how to use it, or develop a new one in the repository. Any doubts, please submit an issue or make a pull request.
Travis CI
We use Travis CI to run this tasks in order:
- Linter
- Tests
- Build for production
- Deploy in Github pages :)
Contributing
- Please see the CONTRIBUTING file for guidelines.
- Create pull requests, submit bugs, suggest new features or documentation updates 🔧
Server
This repo is using an API which is a minimal app in NodeJS deployed on Heroku and using PostGreSQL, to create, modify and delete heroes.
Contributors
Thanks to all contributors and their support!
License
MIT
Enjoy 🤘
We are always happy to hear your feedback!