Previous
Next  

Project Structure - Modules

  • Courses
  • Staticpages
  • Admin
  • Auth

CommonComponents

  • banner
  • header
  • footer
  • Page-not-found

Courses module - Components, Service and Routing Module

  • course-featured
  • course-list
  • course-detail
  • course-recent
  • course-categories
  • course-service
  • course-routing-module

Staticpages module - Components, Service and Routing Module

  • page
  • Contact-us
  • course-detail
  • page-service
  • page-routing-module

Admin module - Components, Service and Routing Module

  • Login
  • Dashboard
  • Admin-coourse-list
  • Course-form
  • Admin-routing-module

Create - Modules:

 ng generate module courses  -- routing
                                    
 ng generate module staticpages  -- routing
                                    
 ng generate module admin  -- routing
                                    
 ng generate module auth  -- routing

Create - Common Components :

 ng generate component banner 
                                    
 ng generate component header  
                                    
 ng generate component footer  
                                    
 ng generate component page-not-found

Components of Courses module:

 ng generate component courses/course-featured 
                                    
 ng generate component courses/course-list
                                    
 ng generate component courses/course-detail
                                    
 ng generate component courses/course-recent
                                    
 ng generate component courses/course-categories

Service for Course Module

ng generate service courses/courses

Components of staticpages module:

 ng generate component staticpages/page
                                    
 ng generate component staticpages/contact-us

Service for staticpages Module

ng generate service staticpages/staticpages

app.module.ts:

Import courses and staticpages module in app.module.ts

  ....
  import { CoursesModule } from './courses/ courses.module';
  import { StaticpagesModule } from './staticpages/staticpages.module';

  imports: [
    ....
    CoursesModule,
    StaticpagesModule
  ],

courses/courses.module.ts:

Export CousresFeaturedComponent component for showing this component on root component app.component.html

   imports: [
    CommonModule,
    CoursesRoutingModule
  ],
  exports: [
    CoursesFeaturedComponent
  ],

app.component.html:

Set design of home page

  <div class="container"/>
    <app-header></app-header>
   <app-banner></app-banner>
    <app-course-featured></app-course-featured>
    <app-footer></app-footer>
    <router-outlet></router-outlet>
  </div>
 Previous
Next