Code Monkey home page Code Monkey logo

ng-covid-19-stats's Introduction

NgStats

This project was generated with Angular CLI version 9.1.1.

Using npx

No globals use npx

Development server

Run npm run start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run npx ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

To test build version cd to dist/app folder and run npx http-server --proxy "http://localhost:8080?"

Running unit tests

Run npm run test to execute the unit tests via Karma in headless Chrome. Run npm run test-watch to execute the unit tests via in watch mode Chrome.

To run single test or test-watch npm run test -- --include <test-relative-path.spec.ts>

To run directory or bunch of files npm run test -- --include src/app/components

Running end-to-end tests

Run npm run e2e to execute the end-to-end tests via Protractor.

App architecture

This project was architected using this article.

  • App module
  • Core module
  • Shared module
  • Lazy loaded features

Build steps:

  1. Create a workspace for ng-stats apps

npx -p @angular/cli ng new ng-stats --create-application false --strict

  1. Create covid19-stats-app application (set components name prefix to "cvd", use scss and routing)

cd ng-stats npx ng g application covid19-stats-app --prefix cvd --style scss --routing

** add initial scaffolding for workspace and project **

  1. Add angular material

npx ng add @angular/material

  1. Add custom themes

cd projects/covid19-stats-app/src mkdir themes && cd "$_" touch default-theme.scss touch light-theme.scss touch dark-theme.scss

  1. Add npx to package json scripts

** add angular material and custom themes **

  1. Add webpack bundle analyzer

npm i -D webpack-bundle-analyzer

** add webpack bundle analyzer **

  1. Clean up app.component and add core module

npx ng g m core

** add core module **

  1. Add core layout

npx ng g c core/layout/main-layout

** add main layout core component **

  1. Add app tob toolbar and router outlet

** add app tob toolbar and router outlet **

  1. Add dashboard feature and app routing (lazy feature)

npx ng g m features/dashboard --route dashboard --module app.module.ts

** add dashboard feature and app routing **

  1. Add about feature (lazy feature)

npx ng g m features/about --route about --module app.module.ts

** add about feature and route **

  1. Add simple app navigation

** add simple app navigation **

  1. Add shared module

npx ng g m shared

** add shared module **

  1. Add flex layout

npm i -s @angular/flex-layout

** add flex layout **

ng-covid-19-stats's People

Contributors

pawelpiotrowski avatar

Watchers

 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.