Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Great Egghead Video on Angular 2 Routing

9/20/2016

0 Comments

 
I had a subscription for egghead.io back when I started learning AngularJs. It's a great site for bite-sized videos on specific issues and development things. This particular video is free, and it's a great little demo for getting the "new" Angular router up and running   
Here's the video on egghead.io: https://egghead.io/lessons/angular-2-configure-your-first-angular-2-route#/tab-code

I had recently scaffolded out a basic Angular 2 project with the Angular CLI. However, the Angular CLI (in it's current form, at least) doesn't set you up at all with routing. It can be a little intimidating trying to figure out where to put these things when you haven't set up routing in Angular 2 before, but John Lindquist does a nice job of keeping it super-simple, making it work, and then breaking things out into a cleaner, more encapsulated architecture.

Don't Use RouteConfig

I initially thought I could just scaffold out an Angular 2 project that had routing already set up for me, but boy did that cause problems for me! :) I feel bad trash talking the Angular Class Angular 2 Webpack Starter project because it actually is a really nice Angular 2 yeoman generator, but when I scaffolded the project I realized that it was set up with the the old "RouteConfig" method. This was a thing at one point, but it is deprecated now and won't work if you actually try to use it. Instead, the new version uses just "routes".

Some Code

A basic Angular CLI scaffold will generate an app.module.ts file for you. In it's updates form we've imported appRoutes from an app.routes.ts file and then added it into the imports array passed into the NgModule metadata object. 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HomeComponent} from './home.component';
import appRoutes from './app.routes';
  
@NgModule({
  declarations: [
    AppComponent,              
    HomeComponent
  ],
  imports: [
    appRoutes,
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
I had to create the app.routes.ts file, but it's relatively simple:
import { HomeComponent } from './home.component';
import { RouterModule } from '@angular/router';

const routes = [               
  {path: '', component:HomeComponent}
];
  
export default RouterModule.forRoot(routes);
Here I'm importing any components that are used (here it's just HomeComponent) and also the RouterModule. The export default is a nifty little way of making the syntax nice back in the app.module.ts file.

That's It!

Of course you'll need to have a file that defines HomeComponent, but in terms of routing you're good to go once you have these two files set up! Note that in the video John shows you that you can define everything right in your app.module file, and it might be a good exercise for you to do this just to see how it all fits together. However, it's definitely a good coding practice in Angular development to have a separate file that's dedicated to just declaring routes which is why John breaks things out into the app.routes.ts file about halfway through the video. Anyway, that's the simple low-down on Angular 2 routing! Thanks John and the whole egghead.io team for putting this one out there for free!

A Full Project

If you're interested in taking a look at a simple Angular 2 project that has this type of routing implemented you can check out some of my code here: ​https://github.com/ParkBoys/Park-Boys-Bootcamp/tree/master/3-No-Doubts-Just-Routes/project.
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023