higgsup-ecommerce

Coding guide & conventions

Background

Firstly, please read “Angular Application Architecture Documentation.docx” file to understand the architecture overview of this application.

Coding guide

This document will guide developer step by step, follow strictly the project structure we have defined in the Architecture Documentation to develop a new feature of their application:

Create new feature module inside PagesModule
Let name it feature02 for example
```
cd src/app/pages
ng generate module feature02
```
```
<p>
  A new folder <code>feature02</code> will be created along with <code>feature02.module.ts</code> file inside which declares <code>Feature02Module</code>. </li> 
  
  <li>
    <strong>Add new route to <code>Feature02Module</code> in <code>PagesRoutingModule</code></strong></p> <pre lang="angular2" class="notranslate"><code>const routes: Routes = [{
```
path: ‘’, component: PagesComponent, children: [ { path: ‘dashboard’, component: DashboardComponent, }, { path: ‘feature-01’, loadChildren: ‘app/pages/feature01/feature01.module#Feature01Module’, }, { path: ‘feature-02’, loadChildren: ‘app/pages/feature02/feature02.module#Feature02Module’, }, { path: ‘’, redirectTo: ‘dashboard’, pathMatch: ‘full’, }, { path: ‘**’, component: NotFoundComponent, }, ], }];

  <li>
    <strong>Add a new item for this feature in <code>pages-menu.ts</code> file</strong></p> <pre lang="angular2" class="notranslate"><code>export const MENU_ITEMS: NbMenuItem[] = [

{ title: ‘Dashboard’, icon: ’nb-home’, link: ‘/pages/dashboard’, home: true, }, { title: ‘FEATURES’, group: true, }, { title: ‘Feature 01’, icon: ’nb-gear’, link: ‘/pages/feature-01’, }, { title: ‘Feature 02’, icon: ’nb-gear’, link: ‘/pages/feature-02’, }, ];

    <p>
      This will append a new menu item to the sidebar with the defined <strong>title</strong> and <strong>icon</strong>. If users click on this menu item, then it will route to <code>Feature02Module</code>, as specified by <strong>link</strong> property. </li> 
      
      <li>
        <strong>Create a new component inside <code>Feature02Module</code></strong><br /> Let name it <code>feature02</code> for example.</p> <pre class="notranslate"><code>cd src/app/pages

ng generate component feature02

        <p>
          A new component <code>Feature02Component</code> will be created inside the <code>feature02</code> folder. </li> 
          
          <li>
            <strong>Create a new routing module and config routes to components of feature module</strong></p> <pre class="notranslate"><code>cd src/app/pages

ng generate module feature02/feature02-routing –flat

            <p>
              <code>Feature02RoutingModule</code> will be created. We need to add the routes config to components inside <code>Feature02Module</code>. For example:
            </p>
            
            <pre lang="angular2" class="notranslate"><code>const routes: Routes = [{

path: ‘’, component: Feature02Component, children: [ { path: ‘sub-feature02’, component: SubFeature02Component, }, ], }];

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

            <p>
              Routes to child components of <code>Feature02Component</code> will be configured in the children array. </li> 
              
              <li>
                <strong>Finish.</strong>
              </li></ol>