Build a Angular CLI App in 5 Minutes

The 5 minute mark assumes that you have Node, NPM, and TypeScript installed, if you don't you can download them here, here, and here.

If you don't have the Angular CLI installed, you can run this command to install it globally:

 

With Angular CLI installed, you can generate the application:

 

Change into the newly generated application and install the dependencies, this will build a full node_modules directory for you:

 

If you open up the application and file structure, you should now see something like this:

 

Now let's verify that it's working up to this point, run the command:

 

Now if you open up your browser you should see some type of start page like this:

But that's pretty boring, let's actually build out our lineup card. Run the component generator command:

 

This will create a new directory in the src/app directory called lineup and will contain a:

TypeScript component HTML template Component specific CSS file Spec (test) file

Now let's add some data to see into the component file (app/src/lineup.component.ts):

This is just an array of objects that contain lineup card data, such as a player's name, position, and batting average. This won't show anything on the page though, in order to do that we'll need to call the data from the template HTML file:

You still won't see anything on the page, in order to do that we'll need to make two more changes. One is to add a homepage route in the src/app/app.module.ts file:

And now we just have to remove the placeholder HTML code in the src/app/app.component.html file with this one line of code:

Now our page should look like this:

Lastly, let's update the src/app/lineup/lineup.component.css styles so we can have a better looking lineup card (and see how we automatically have access to the CSS files in the component directory):

With this in place we now have a clean looking lineup card using Angular CLI: