Learning AngularJS – The beginning

Hi, first post.

A few months back I got an opportunity to use AngularJS on a project in work.  Unfortunately, the AngularJS bits got pulled before the end of the first sprint but this was enough to peak my interest and motivate me to build a simple application using AngularJS.  This post and subsequent posts will chart my progress and pain during this journey of discovery on my own project.

Let’s go back to the beginning, my journey started at work, part of the learning curve was to go onto Pluralsight and complete a course.  The course was by Shaun Wildermuth around Bootstrap, MVC and AngularJS.   Coupled with the extensive documentation for AngularJS and what seems to me as a big push by Google to drive AngularJS forward, there was a lot of examples and people using it.

I started by taking an old existing MVC application, which I generally use for experimentation and added AngularJS to it.  This used Entity Framework 6.0, AutoFac, Automapper, MVC 4, NUnit, and Rhino Mocks.  Later I added Web API and I hope to talk about that in blogs later.

Brief Summary of Application

The application is a small fake personal management system, which allows the user to log in, view, search, and and update personal records for a company.

After logging into the application, the user will be presented with an index page with the company employees’ on it.  It serves as a main navigation place for the rest of the application.

In the module, I set up a routeProvider to look at a url and go to my given AngularJS controller, which will use a partial view html template to render the display.

$routeProvider.when("/", {
controller: "peopleController",
templateUrl: "/templates/peopleView.html",
});


To get the data, I use a very simple WebAPI controller to get people, get a person, add a person and update a person.  The two way data-binding in the templates, which AngularJS provides is great, essentially {{ Person.FirstName }} is enough to render and persist the data back to the Web API controller and ending up in the database.

Inside the index view, I have a ViewData.InitModule property which tells the application which modules that I want to use. There is also this line data-ng-view which allows me to inject the partial view html template into the page

Right now, I’ve put all my controllers, modules and services within the one main-index.js.  Later on, I’ll split out the modules and services into separate files.  I’ve looked at angular seed and once I get more confident with the syntax I’ll use this to structure the project correctly.

In later blogs, I will try and talk about each part individually, but that provides enough detail for now.  Just now, I want to talk about some issues that I had.

First problem

I had used the aspx view engine and try as I might, I was unable to get the routing engine in AngularJS to work using this view engine.  All the examples and posts were all using the Razor view engine.  So after several nights of trying I converted all the pages in the solution to Razor.  I still don’t know if it is possible and it will something that I will try again once I become more familiar with AngularJS.  The point that I thought enough was enough was when I tried to give the page the AnguarJS module name so that I could use the routing engine to direct the controller to all the partial page templates and nothing happened.  I think the page was treating the name of the module as just text to be added to the page rather than text that could be a name of module.  Hence it would not see the controllers on the page and nothing would work.  I was getting a blank page.

Second problem

When it came to adding a new person into my application, one of the properties was Address Line 1.  This property was stored within an Address object.  I could see that  Address Line 1 was not getting populated from the page.  Initially I tried Person.Address[0].AddressLine1, this is wrong, the reason that this doesn’t work is that Address is not an array.  In AngularJS, you will access such a property as follows as Person.Address['AddressLine1'].  The actual problem with the Address Line 1 was that the object that I was querying for Address Line 1 didn’t contain the data.  Once I corrected the query, everything was okay.  Lesson Learned!

Third problem

I had a salary collection in my person object.  This was so that I could return a history of a person’s salary.  The problem was that I had to add a single salary to the collection every time I added or updated the personal record.  This time though, I could access salary like an array Person.Salary[0].Amount.  The problem was that the data sent to the method within the web api controller wasn’t mapping the salary in the person object.  In the end, I solved this problem with automapper mapping the salary to a new list object which I would create when doing the mapping.  I could not find a solution to make the salary map through pure AngularJS.  I did try to work a solution to the problem with ng-repeat and ng-model but the problem still existed or the application would output how many salaries I had stored.

These are the main silly issues I have encountered.  There will be better ways to solve these issues but at this current time this is way that I solved them.

The application itself is ongoing and currently I’m adding a typeahead input search box using AngularJS UI Bootstrap to search and view personal records.  The application is work in progress and will continue to evolve.  I am interested in any best practices and ways that I can build my knowledge around AngularJS.  Hopefully I can get feedback and blog about it here.

A few links that may help..

1. AngularJS Google Group – https://groups.google.com/forum/#!forum/angular
2. AngularJS documentation – https://angularjs.org/
3. Dan Wahlin’s blog – http://weblogs.asp.net/dwahlin/default.aspx
4. Angular Seed – https://github.com/angular/angular-seed

In the meantime, if I can help please leave a comment.