Step 2 - Review what's installed

Now we're ready to start creating our application. But first we need to understand how one important Angular 2 concept works.

Components

Angular works with the concept of components. An application usually has a top level component called app. In our todo list we may then create additional components called like <album-list><album-list> and <album-editor><album-editor>. You can be very granular - you can also create an <album-list-item> for example for each individual item rendered. It's possible to create a nicely segregated hierarchy that allows you to logically separate your UI logic into small manageable chunks.

A component in Angular is a logical abstraction that is essentially a JavaScript/Typescript class along with an attached template that is used to render. The class represents the model while the template comprises the view to display the model data.

Typescript

Angular 2 is built on TypeScript and works best with TypeScript. To get the most out of Typescript using a TypeScript capable editor is very worthwhile. I like to use WebStore from JetBrains which offers an excellent editor and superior Intellisense for Typescript, HTML, CSS and more. WebStorm is not free, but well worth the $129/yr subscription. Many people also like Visual Studio Code which also works well but lacks some of the advanced Intellisense that WebStorm provides. Full Visual Studio also works, but TypeScript surprsingly is not very well integrated with limited Intellisense and no support for code snippets. It does however have the best HTML/CSS editor, so frequently I use both WebStorm and VS together.

The installed Template

The Web Connection Angular2 template is slightly modified from Angular2-Seed to build into a single folder. The key pieces you need to know about for your application are:

• index.html
  This is the single HTML page that serves your application. It's the page that bootstraps Angular2 and loads up the app component to get the ball rolling. You can change the names, but it's good to stick to these defaults with the bootstrapping code.

• app/app.module.ts and app/app.routes.ts These are the initial kick of points for the Angular application. app.module.ts bootstraps Angular and loads the initial component into the page - in this case the <app></app> component. app.routes.ts configures URL routing for the application so you can do client side navigation to multiple pages. The sample template includes two starter routes and components you can play with to see that the app is working.

• app/app.ts
  This is the root component for your application and corresponds to <app></app>. This is really where the app and your application specific code starts. Each component typically has an associated template that contains HTML into which the data of the component (ie. the model) is rendered. The properties of the component act as the model to bind to the HTML template.

• app/about/about.ts and app/home/home.ts
  These are dummy sample components that have an external HTML template and are hooked up via the routes in app.routes.ts. These are just for initial verification that the app works and for you to experiment with which is what we'll do. In the course of building an application we add additional components.

To get started we'll start at the bottom with the Home component and modify it so we can see it in action.

How do Home and About get fired

I won't look at routing in detail in this intro, but let's briefly explain how the routes work so you understand how the about and home pages are loaded since they use routing.

Routing is defined via a set of routes that describe which URLs should load a specific component. The following Typescript file demonstrates:

import {Routes} from '@angular/router';
import {About} from './about/about';
import {Home} from './home/home';

export const rootRouterConfig: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: Home},
  {path: 'about', component: About}
];

You first import the routing module as well as any components that are going to be routed to and that are referenced in the route table.

A route table in this case is simply an array of route objects that are made up of a path like home or about which look like this:

http://locahost:3000/#/home
http://locahost:3000/#/about

The hash bang urls signify that these are client routes and these are the routes that are referenced in the route table above. You can also specify parameter using :parmName as part of a route and you can use an ActivatedRoute object to get the current route information including parameters inside of a component.

Routing is a complex topic, but for now just know that the routing table above is responsible of routing a URL to a specific component. When you add new components that render a new 'page' in your application you'll add another route URL and point it at the appropriate component.