Routes

README.md

@@ -18,3 +18,8 @@ Each Pull Request will contain explanation and steps taken to complete a feature
 ## Installing Frameworks and Libs
 
 - [Add Boostrap 4](https://github.com/brunolm/angular-how-to/pull/5)
+
+
+## Routes
+
+- [Adding routes](https://github.com/brunolm/angular-how-to/pull/7)

src/app/app.component.html

@@ -1,27 +1,15 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>
+  Welcome to {{title}}!
+</h1>
 
-<div class="container">
+<div class="container-fluid">
   <div class="row">
-    <div class="col-4">Col-4</div>
-    <div class="col-4">Col-4</div>
-    <div class="col-4">Col-4</div>
+    <div class="col-4" style="background: #666">Col-4</div>
+    <div class="col-4" style="background: #999">Col-4</div>
+    <div class="col-4" style="background: #ccc">Col-4</div>
   </div>
 </div>
+
+<hr />
+
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -1,23 +1,29 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
+      imports: [RouterTestingModule],
     }).compileComponents();
   }));
+
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
+
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('app');
   }));
+
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();

src/app/app.module.ts

@@ -2,13 +2,18 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.router';
+import { LayoutComponent } from './shared/layout/layout.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LayoutComponent
   ],
   imports: [
-    BrowserModule
+    AppRoutingModule,
+    BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.router.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LayoutComponent } from './shared/layout/layout.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'tutorials', pathMatch: 'full' },
+
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+      { path: 'tutorials', loadChildren: 'app/tutorials/tutorials.module#TutorialsModule' },
+    ],
+  },
+];
+
+export const AppRoutingModule = RouterModule.forRoot(routes);

src/app/shared/layout/layout.component.html

@@ -0,0 +1,6 @@
+<div class="container-fluid">
+  <fieldset>
+    <legend>LayoutComponent</legend>
+    <router-outlet></router-outlet>
+  </fieldset>
+</div>

src/app/shared/layout/layout.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ],
+      imports: [RouterTestingModule],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/layout/layout.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tutorials/tutorials.component.html

@@ -0,0 +1,8 @@
+<div class="container-fluid">
+  <fieldset>
+    <legend>TutorialsComponent</legend>
+    <div>
+      Tutorials
+    </div>
+  </fieldset>
+</div>

src/app/tutorials/tutorials.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TutorialsComponent } from './tutorials.component';
+
+describe('TutorialsComponent', () => {
+  let component: TutorialsComponent;
+  let fixture: ComponentFixture<TutorialsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TutorialsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TutorialsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tutorials/tutorials.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tutorials',
+  templateUrl: './tutorials.component.html',
+  styleUrls: ['./tutorials.component.scss']
+})
+export class TutorialsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tutorials/tutorials.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TutorialsComponent } from './tutorials.component';
+import { TutorialsRoutingModule } from './tutorials.router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TutorialsRoutingModule,
+  ],
+  declarations: [TutorialsComponent]
+})
+export class TutorialsModule { }

src/app/tutorials/tutorials.router.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TutorialsComponent } from './tutorials.component';
+
+const routes: Routes = [
+  { path: '', component: TutorialsComponent },
+];
+
+export const TutorialsRoutingModule = RouterModule.forChild(routes);

src/assets/css/index.scss

@@ -1 +1,13 @@
 @import '~bootstrap/scss/bootstrap.scss';
+
+fieldset {
+  border: 1px solid green;
+  padding: 30px 0;
+}
+
+legend {
+  color: green;
+  font-size: 90%;
+  outline: 1px solid green;
+  padding: .2em .5em;
+}