Creating a simple Todo list with Angular2 and asp.net core – Part 5

by Alex on September 1, 2016

This is part 5, the final installment of the series.

You can download all of final code off of my github page here

If you’ve missed any other section, I recommend you check those out also.

Part 1

Part 2

Part 3

Part 4

Here in the final part of this series we are going to bring everything together into a fully functional app. If you recall from the end of part 4, we discussed what files we would need to add to our app to complete it.
Here is that list again:

  1. app.component.ts and app.component.html
  2. dashboard.component.ts and dashboard.component.html
  3. todo-list.component.ts and todo-list.component.html
  4. todo.component.ts and todo.component.html
  5. todo.ts
  6. header.component.ts and header.component.html
  7. todo.service.ts

Here’s what our file system looks like now:

alt text

Im not going to get into each file in detail in this post. Ill briefly discuss the series of events that occurs then the app starts up but the best way to learn it is to download the code from my GitHub page and run it for yourself.

Here is a quick overview (I recommend opening each file as we go along):

  1. the index.html page is parsed by the browser
  2. When it hits line 38, it loads the app/main module – main.ts
  3. main.ts imports bootstrap from the angular library and AppComponent (app.component.ts) and then calls bootstrap(AppComponent) to start up the app
  4. app.component.ts: This is the real meat of the startup procedure. We have:
    1. A bunch of import statements to import ‘stuff’ (routing, http services, other components) that will provide functionality to the app.
    2. Our component MetaData section setting the selector and template. If we look at the template that is specified in the templateUrl: ‘app/app.component.html’, we have:

alt text

    in this template, you can see other custom tags where other components will be loaded. For instance, there is a "header-content" tag which is...well.....where the header content goes...=) as well as the "router-outlet" tag which defines where our pages will be loaded as we browse around the site.

3. A @routeConfig section to configure how routing will work and what the routes are (<a href="https://angular.io/docs/ts/latest/guide/router.html">read about routing here</a>)
4. An export statement so that this component is available to be imported into other components

As each of the imports are satified within the app.component.ts file, those imported components have dependencies and so on down the chain until all of the components are loaded and the page displays.

Again, I highly recommend that you take the time to download the code if this is unfamiliar to you and step thru it to get a clear understanding of how the process works. I always find that is the best way for me to learn something.

If you’re reading this, Im sure that you have probably read the Introductory docs that were put out by the Angular team, but if not, that is highly recommended as well.

Thanks for visiting and I hope this series has been helpful.

Leave a Comment

Previous post: