Skip to content

Latest commit

 

History

History
129 lines (102 loc) · 4.04 KB

README.md

File metadata and controls

129 lines (102 loc) · 4.04 KB

Angular Practice Starter

This project was originally generated with Angular CLI version 7.0.2.

Features

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.