Git Product home page Git Product logo

angular6-example-app's Introduction

Example app with Angular 6 + Angular CLI + Angular Material + Docker + Angular Example Library

Base project made with much โค๏ธ . Contains CRUD, patterns, generated library, etc.

travis Coverage Status Codacy Badge Known Vulnerabilities Conventional Commits

dependency Status devDependency Status peerDependencies Status

npm Join the chat at https://gitter.im/angular6-example-app/Lobby

GitHub forks GitHub stars

angular-example-app

Getting started

Warning

Verify that you are running at least node 8.9.x and npm 5.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

  1. Go to project folder and install dependencies.
npm install
  1. Launch development server:
npm start

Note

You don't need to build the library because it's published in npm and added as dependency of the project.

Usage

Tasks Description
npm i Install dependencies
npm start Start the app in development mode
npm run test Run unit tests with karma and jasmine
npm run e2e Run end to end tests with protractor
npm run build Build the app for production
npm run build:library Build the library
npm run lint Run the linter (tslint)
npm run ci Execute linter and tests
npm run extract Generate all json files with the translations in assets folder
npm run deploy Build the app and deploy dist folder to Github pages (angular-cli-ghpages) (fork to do this and remove CNAME file)
npm run bundle-report Build and run webpack-bundle-analyzer over stats json, really cool :)
npm run release Create a new release using standard-version
npm run docker Build the docker image and run the container
npm run update Update the project dependencies with ng update

Features

  • 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)
  • Modal and toasts (snakbar)!
  • Responsive layout (flex layout module)
  • SASS (most common used functions and mixins) and BEM styles
  • Internationalization with ng-translate and ngx-translate-extract
  • Lazy loading modules
  • Service Workers
  • Dynamic Imports
  • More logical structure directory (from here)
  • Basic example library
  • Modernizr (browser features detection)
  • Safari polyfill for date inputs (date-input-polyfill)
  • 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

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 a minimal app in NodeJS deployed on Heroku and using PostGreSQL, to create, modify and delete heroes.

License

MIT

Contributors

Thanks to all contributors and their support! If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!

Enjoy ๐Ÿค˜

angular6-example-app's People

Contributors

carlchandev avatar codacy-badger avatar codeimmortal avatar dyeimys avatar herbertkarajan avatar ismaestro avatar mugan86 avatar scip92 avatar tomasfse avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.