Creating a simple Angular2 Todo list – Part 1

Creating a simple Angular2 Todo list – Part 1

In the next few posts Im going to create a simple todo list using core and Angular2. Ill be developing on a mac but most of the stuff can be done on windows as well.

You can get all the source from my github page.

To get started, lets create the new app. I did this using Yeoman. if you don’t have yeoman on your system, you should check it out. It is essentially the “File | New Project” dialog when you’re working on a mac. Its a sweet time saver.

I simply navigated to the directory where I wanted the app to live and entered the magic “yo” command….

alt text

I selected the “Web Application Basic” option, answered a couple more questions and yeoman spit out it response.

alt text

You can see that it scaffolded out the app nicely and ran “npm install” and “bower install” for me.

at the end of the output you’ll see the following:

alt text

Seems simple enough – but what is this “dotnet restore” command?

Before we answer that, lets take a look at what the yeoman generator created for us. Im using Visual Studio Code which is a pretty sweet tool once you get comfortable with it.

alt text

If you’ve worked with other project in Visual Studio before, this should look pretty familiar. You can see in the file listing that there is a project.json file. In the current version of .NET core, the dependencies for each project are defined in this project.json file. I suspect this is going to change in future releases based on some Podcasts that Ive heard.

Here is a quick look at it.

alt text

So, to answer the question, what is this “dotnet restore” command. It essentially, parses this project.json file and goes out to nuget to satisfy the dependencies for the project defined in this file.

What else can this “dotnet” command do?

alt text

ok, so now lets run the “dotnet restore” command and get the libraries we need.

alt text

Now we can just run “dotnet run” and it compiles and fires up the site for us.

alt text

so if we navigate to http://localhost:5000, we see our newly created web app!!

alt text

That was easy!!

So thats all for this post. Lets quickly review what we did:

  1. created a new basic web application using yeoman
  2. Opened the newly created site in Visual Studio Code
  3. Looked at the project.json file – this file defines the dependencies for the application
  4. Looked at the “dotnet” commands – specifically the “dotnet restore” command and ran it. It reads the project.json file and downloads all of the dependencies for the project from NuGet
  5. After “dotnet restore” completed, we executed “dotnet run” which built and ran the site
  6. We navigated to our newly created, stunning site running at localhost:5000
  7. We sat back and looked dreamily at our new site and considered all the money it would make us…..well…maybe not that.

In the next post in this series, we are going to look at configuring the server side of the application by:

  1. Define our model classes
  2. Define and creating the Interface and classes required to interact with the database – in other words, our repository pattern
  3. Configure the site to use Entity Framework
  4. Use the Entity Framework Command Line tools to generate a migration and execute the migration
  5. Edit the Startup.cs file so we register our Repository with the Dependency Injection Framework that is built into .net core.
  6. Set the configuration so that we have camel casing on the client side for our JavaScript and Pascal casing on the server side.

I think that will be enough to cover in part 2 – stay tuned

Thanks for visiting

One Reply to “Creating a simple Angular2 Todo list – Part 1”

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Adobe Flash player