21-268 Refactoring recipes module

src/app/app-routing.module.ts

@@ -12,12 +12,6 @@ import { AuthGuard } from './auth/auth-guard.service';
 
 const appRoutes: Routes = [
     { path: '', redirectTo: '/recipes', pathMatch: 'full' },
-    { path: 'recipes' , component: RecipesComponent, children: [
-        { path: '', component: RecipeStartComponent },
-        { path: 'new', component: RecipeEditComponent, canActivate: [AuthGuard] },
-        { path: ':id', component: RecipeDetailComponent },
-        { path: ':id/edit', component: RecipeEditComponent, canActivate: [AuthGuard]}
-    ] },
     { path: 'shopping-list', component: ShoppingListComponent },
     { path: 'signup', component: SignupComponent },
     { path: 'signin', component: SigninComponent }

src/app/app.module.ts

@@ -1,54 +1,41 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 
-
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
-import { RecipesComponent } from './recipes/recipes.component';
-import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
-import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
-import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
 import { ShoppingListComponent } from './shopping-list/shopping-list.component';
 import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
-import { DropdownDirective } from './shared/dropdown.directive';
 import { ShoppingListService } from './shopping-list/shopping-list.service';
 import { AppRoutingModule } from './app-routing.module';
-import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
-import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
 import { RecipeService } from './recipes/recipe.service';
 import { DataStorageService } from './shared/data-storage.service';
 import { SignupComponent } from './auth/signup/signup.component';
 import { SigninComponent } from './auth/signin/signin.component';
 import { AuthService } from './auth/auth.service';
 import { AuthGuard } from './auth/auth-guard.service';
-
+import { RecipesModule } from './recipes/recipes.module';
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    RecipesComponent,
-    RecipeListComponent,
-    RecipeDetailComponent,
-    RecipeItemComponent,
     ShoppingListComponent,
     ShoppingEditComponent,
-    DropdownDirective,
-    RecipeStartComponent,
-    RecipeEditComponent,
     SignupComponent,
     SigninComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    ReactiveFormsModule,
     HttpClientModule,
     HttpModule,
-    AppRoutingModule
+    AppRoutingModule,
+    RecipesModule,
+    SharedModule
   ],
   providers: [
     ShoppingListService, 

src/app/recipes/recipes-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { RecipesComponent } from './recipes.component';
+import { RecipeStartComponent } from './recipe-start/recipe-start.component';
+import { RecipeEditComponent } from './recipe-edit/recipe-edit.component';
+import { RecipeDetailComponent } from './recipe-detail/recipe-detail.component';
+import { AuthGuard } from '../auth/auth-guard.service';
+
+const recipesRoutes: Routes = [
+    { path: 'recipes' , component: RecipesComponent, children: [
+        { path: '', component: RecipeStartComponent },
+        { path: 'new', component: RecipeEditComponent, canActivate: [AuthGuard] },
+        { path: ':id', component: RecipeDetailComponent },
+        { path: ':id/edit', component: RecipeEditComponent, canActivate: [AuthGuard]}
+    ] }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(recipesRoutes)],
+    exports: [RouterModule]
+})
+export class RecipesRoutingModule {}

src/app/recipes/recipes.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+
+import { RecipesComponent } from "./recipes.component";
+import { RecipeStartComponent } from "./recipe-start/recipe-start.component";
+import { RecipeListComponent } from "./recipe-list/recipe-list.component";
+import { RecipeEditComponent } from "./recipe-edit/recipe-edit.component";
+import { RecipeDetailComponent } from "./recipe-detail/recipe-detail.component";
+import { RecipeItemComponent } from "./recipe-list/recipe-item/recipe-item.component";
+import { RecipesRoutingModule } from "./recipes-routing.module";
+import { SharedModule } from "../shared/shared.module";
+
+
+@NgModule({
+    declarations: [
+        RecipesComponent,
+        RecipeStartComponent,
+        RecipeListComponent,
+        RecipeEditComponent,
+        RecipeDetailComponent,
+        RecipeItemComponent
+    ],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        RecipesRoutingModule,
+        SharedModule
+    ]
+})
+export class RecipesModule {
+    
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DropdownDirective } from './dropdown.directive';
+
+@NgModule({
+    declarations: [
+        DropdownDirective
+    ],
+    exports: [
+        CommonModule,
+        DropdownDirective
+    ]
+})
+export class SharedModule {}