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

by Alex on June 28, 2016

This is part 4 of the series.

If you’ve missed any other section, I recommend you check those out before digging in here.

Part 1

Part 2

Part 3

The Angular Bits

OK, so we’ve spent the last 3 posts getting our site up and running and configuring the server site to support our new angular todo app but we haven’t started working with Angular yet. Now is the time.

Before we dig into the code, let just take a quick look at the finished app. Its a very simple app with 3 views.

  1. A dashboard view
  2. A list of todos
  3. A screen to create/edit todos

This is the dashboard

alt text

This is the list of todos

alt text

…and the edit/create todo screen

alt text

The example is a little contrived. I created the dashboard just to have another place to navigate to although in a real app the dashboard would likely serve a purpose. As you probably noticed, Im using bootstrap here to make the app look a little better.

OK, so now we know what it looks like, how do we get there?

Lets take a quick look at what we have in VS Code.

alt text

In this expanded view, you can see all of the files that we have created in parts 1, 2, and 3 of this series. So far, so good. But where on earth do we put the Angular parts?

The angular related stuff is going to live inside the wwwroot folder. What is that you ask? good question.

The web root of your app is the root location in your project from which HTTP requests are handled (for example handling of static file requests). When using the static files middleware only files from the web >root folder are accessible; the other files in the content root cannot be accessed remotely. The default web >root path is content root/wwwroot, but you can specify a different location using the WebHostBuilder.

You can read more from the docs here

Now that we know where to put the files, lets create some files and folders within the /wwwroot directory:

  1. create a folder named app
  2. create an index.html file
  3. in the app folder, create:
    • main.ts
    • app.component.ts
    • app.component.html

Lets take a look at our newly created files now. first up, Index.html

alt text

As you can see Im loading most of the libraries directly from the internet rather than locally. You can do whatever you like. The only ones Im working with locally are toastr and jquery. One item to take note of if you havent worked with ES2015 yet is the System.config and System.import stuff.

The config section is specifying that we are going to use typescript and the import stuff is required because when using ES2015 we put our code into modules and export and import those modules. you can read all about modules here

You can see our first import here on line 37 where the code is saying “load the main module from app/main.” That is the starting point for our app. Lets take a look at that file next.

alt text

This file looks pretty simple. If you remember from Angular 1, we put the “ng-app” attribute in our html to specify what made up our Angular app. That process was and still is called Bootstrapping, only now we do it in code and that is what we are looking at in this code sample.

First we are importing bootstrap from angular2/platform/browser – thats part of the core library from the team at google. Next, we import App.component. That component is created by the developer and its the true starting point for the application.

We just call bootstrap() passing it our AppComponent and the app will start up.

Now let take a look at app.component.ts

alt text

So here, we are importing Component from the Angular framework on line 2. On line 4, we have whats called a decorator that we are using to configure this component. Within this decorator, we are specifying the css selector, todo-app. If you jump back up to the index.html page, you can see on line 43 we have a tag by the same name. When this component loads, it will take the contents of its template and put it into the DOM where the css selector specifies.

We have a very simple template here. Its an inline template string. Note that we are using backticks “ to indicate the beginning and end of the template. With more elaborate templates, we will typically use an external file but this is a good way to do a sanity check that everything is working the way we want.

And finally, we have to export this class to make it available for import elsewhere and that is exactly what we are doing on line 11.

So with all of those bits in place, we can jump out to a command prompt and enter the command dotnet run which will fire up our web server. Once it up and running, browser to http://localhost:5000/index.html and you should see you newly created Angular2 app running it all its glory.

alt text

Just for fun, lets add a text string that we will bind in our template.

alt text

alt text

The binding we’re using here is the same as it was in Angular 1.

We’ll see this app.component.ts file change quite a bit as we work thru this example.

With those few bits in place, we have a skeleton to hang the rest of our app on. Currently, our app.component has an inline template but as we progress Ill move that html out into a file called app.component.html.

Notice how app.component.ts and app.component.html are named the same? That isnt a mistake, by all means its very intentional. Naming our files in this way makes it super easy to find what template goes with what Component.

Armed with this knowledge, if we think about the screens we looked at above, I can envision needing the following files:

  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

You can read more about how to define your files in The Angular 2 Style Guide

And with that Im going to call it a wrap on Part 4.

To quickly recap, we now have the server and the client plumbing in place and can being building our app in earnest. We also outlined what files we think we’re going to need based on the screen shots of the app.

In the next post, we going to code up the files we just defined and keep moving forward.

Thanks for visiting.

Leave a Comment

Previous post:

Next post: