Code Monkey home page Code Monkey logo

death-square-routing's Introduction

General Assembly Logo

Project: The Detailed Death Square

Those pesky rebels are planning yet another attack on our death square. Like any good business, we need to prepare by running an inventory on our equipment. Then we can be sure of our impending victory.

Instructions:

  1. Open up the imperial-starfleet directory in the terminal and start up the app. If you're not sure how to do this, take a look at previous lessons for help.

  2. Look familiar? This is our "death square," which we'll use to bring doom to the Rebel Alliance. However, we at the Empire demand a little more detail. Try clicking on one of the turrets. Nothing happened, right? Let's fix that.

  3. Create a new component called info-window so we can see some information about our turrets.

  4. Create an app-routing.module.ts file (just like in the previous lesson) that imports the InfoWindowComponent and defines one route with the path info pointing to the InfoWindowComponent. Import this routing module in app.module.ts.

  5. Add a router-outlet to app.component.html.

  6. Test your new route by going to /info in your browser.

  7. That's great, but we need to be able to click a turret and quickly get all its information. Wrap the img tag in turret.component.html in an a tag with a routerLink like the one we used in the previous lesson.

  8. Now, import RouterModule in the internal.defenses.module.ts file.

  9. Finally, change the info-window component's HTML to say Turret is functional.

It's not the most detailed inventory, but it's definitely better than what the rebels have.

death-square-routing's People

Contributors

zebgirouard avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.