ToDo Manager With AngularJS and Web API Part III

In the previous two blog posts Part I, Part II we have been looking into creating a ToDo Manager application using AngularJS. In the past posts we have setup the intial database, repositories and the Actual Web API for the project entity. As a next step let's start building the AngularJS application itself.

Add AngularJS Nuget Package

Let's add two packages. AngularJS.Core and AngularJS.Route. Initially we are not planning to use the Routes but later we will make use of this when we setup client side routes in our application.

• AngularJS.Core
• AngularJS.Route

The next package we will need is jQuery. AngularJS comes with scaled down version of jQuery but let's use full version for now just in case.

• jQuery

Now that we have basic packages added to our solution,let's create the basic project structure for our AngularJS application.

Basic AngularJS Project Structure

Add folder called js in our Web project and add three more folders under that main folder. - Controllers - Services - Views

I have also added two files.

• Index.html at the root level of the Web project
• app.js file under the js folder

Ok, now that we have a basic folder structure setup, let's add the UI framework that we want to use in our application. The most popular framework for building the responsive web applications these days is Bootstrap. So let's try integrating the Bootstrap as the UI frameowork for our application.

• Bootstrap 3.3.2

Now, let's setup up our Index page with all the needed references to different JavaScript and CSS files from 3 different frameworks.

As you can see we have addred reference to bootstrap CSS file. We have also added the bootstrap Header,Container and Footer areas using their predefined styels. And finally we have added references to jQuery,Bootstrap,AngularJS javascript files. Go ahead and run the page. It should give you a pretty empty page with just blank header.

I have also created Site.css with following CSS rule. And added the reference to of this CSS to index.html page.

body { padding-top: 50px; padding-bottom: 20px; }

Start writing AngularJS app.js

Okey, looks like all things are in place for us to strat writing our actual AngularJS application. So first things first let's define our application in the app.js.

angular .module('ToDoManager', []);

Add the referenc of our app.js file all the way at the bottom of the index.html page.

And bootstrap our AngularJS application ng-app directive on index.html page.

Ok,AngularJS has been bootstraped into our page. Now as I mentioned earlier we are planning to build this as a Single Page Application so all the different views will have to be downloaded using AJAX and so we will have to rely on the AngularJS routing. No worries, that's the reason why we have added AngularJS.Route package.

Let's go ahead and update our app.js file to configure routes.

Ok,so what have we changed here. We are asking AngularJS to inject the ngRoute service in our application. And the configuration is being called in a seperate function. What we are syaing here is,

• Let's create a route called /Projects
• The controller responsible for this View is ProjectController
• And the view that needs to be served for this rote is Projects.html
• And if no route is provided redirect users to /Projects route (We will change this eventually to go to login page)

Adding AngularJS Controller and View

So clearly, we need to add one .html and one .js file. You guessed the names already I believe.

Let's add the referene to angular-route.js file on index.html* right after angular.js file. Also don't forget to add reference of your ProjectController.js file after the **app.js file reference.

Next, let's go ahead and define our ProjectController.

What we are doing here is adding ProjectController into our ToDoManagerangular module. We are injecting $scope and $location services in the controller which will will use later to bring the data from our Web API.

Let's go ahead and wire up Projects.html view with this controller as a next step. That should be pretty straight forward.

That's it. Go ahead and run the Index.html page.

Okey, so looks like we have a basic page running with AngularJS Controller and View. Next let's bring down the projects using our API and display them as a list. In our controller, let's create an array which is going to hold the Projects data and will bind to UI.

I have also created an Error property which we will bind to UI incase there are no projects. In addition we have added a method uisng $http service which makes call to our API to bring down the data from server.

We have also update our View to bind to these new properties and one of that is conditional.

The directives we have used here are, - ng-repeat - ng-hide

ng-repeat will let us create repeated items inside

. And than there is an error div that will not be displayed of there are entries. But if there are no projects we will conditionally show/hide the error message using ng-hide.

Okey,this seems like a good stopping point. In the next blog post we will expand the project further with Insert/Update functionality.