Angular Practice Starter

This project was originally generated with Angular CLI version 7.0.2.

Features

• Following official angular styles guide and some personal experiences.
• Best practice to import and use Angular Material.
• Using username/password authentication.
• Using D3Js, branch feature/d3.
• Using Tradingview with official sample, branch feature/tradingview
• Using Ccex-api (library that wrapping crypto exchanges api) including Tradingview with realtime datafeed, branch feature/ccex-api.

TODO

• Using Firebase authentication.
• Using Google Drive storage.
• Using AWS S3.
• ... Please tell me more.

Guides

Add material

npm i --save @angular/material @angular/cdk @angular/animations

• Create angular material import module file src/shared/material.module.ts
• Include font style src/index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

• Include prebuilt theme style src/styles.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Code scalfoding

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

Create module with pages and components

Steps to generate one module with one page component (associated directly with a route), and one reusable component (used in page components with input, output).

ng g module feature-modules/main
ng g component feature-modules/main/pages/my-page --skip-import
ng g component feature-modules/main/components/my-view --skip-import

• Create feature-modules/main/pages/index.ts

import { MyPageComponent } from './my-page/my-page.component';

// used in module
export const MainPages = [
  MyPageComponent,
];

// used in routing module
export {
  MyPageComponent
};

• Create feature-modules/main/components/index.ts

import { MyViewComponent } from './my-view/my-view.component';

export const MainComponents = [
  MyViewComponent
];

• Routing module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MyPageComponent } from './pages';

const mainRoutes: Routes = [
  { path: '', component: MyPageComponent },
];

@NgModule({
  imports: [
    RouterModule.forChild(mainRoutes),
  ],
  exports: [RouterModule],
})
export class MainRoutingModule { }

• Declarations in main module

import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';

// components
import { MainComponents } from './components';

// pages
import { MainPages } from './pages';

// routing
import { MainRoutingModule } from './main-routing.module';

@NgModule({
  imports: [
    SharedModule,
    MainRoutingModule
  ],
  declarations: [
    ...MainPages,
    ...MainComponents
  ]
})
export class MainModule { }

Run, build and test

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

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

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

Angular CLI README.

Contributing

If you have any comment or desired sample feature, welcome to create issue. I will check them all and try to be helpful as much as possible.