Tag Archives: Single Page Application

AngularJS Single Page Application – To do List Part II

When we last left, our intrepid developer in the making, he had had completed the shell and basic setup of his AngularJS app. Lets see what he’s upto this week…

The To do list has so far taken shape and the basic structure and logic was coded. However adding an item presented two issues:

  1.  We couldn’t add more than one item
  2.  The added item was bound to the new input field

Issue ‘1’ turned out to be Angular pointing out that the ngRepeat directive does not allow duplicates – the message could be seen in the console.

Angular error: Duplicates in repeater are not allowed.

This happens when there are duplicate keys in an ngRepeat expression. Also not having any key implies all items have the same key – food for thought. The resolution is adding  ‘track by $index’ to the ngRepeat attribute value

ng-repeat="item in item track by $index"

This assigns each list item a key by virtue of its index where there is no explicit key defined. This fixes issue ‘1’ and more items can be added to the model, however all of those added items are all bound together and in turn to the input box. So every time the value is updated, all instances are updated as well. [see commit]

After scouring the interwebs for a bit and running through a few related but not similar issues on stackoverflow and old old tutorials, I tried a few things

  • Changing the array of objects to just an array of strings [not much different but when you’re going crazy and it’s nearly bed time might as well]
  • Tried using different versions of angular [static library was used, an old version 1.2.16, then the latest and something in between]

Finally what worked was not passing in the new object created using the ngModel directive as a parameter in the ngClick directive on the button and then getting the object from the $scope directly within the add function call.

Before:

<input type=text ng-model=new.name/>
<button type=submit ng-click=add(new)>Add</button>$scope.add = function(item){
$scope.items.push(item);
…}

After:

<input type=text ng-model=new/>
<button type=submit ng-click=add()>Add</button>$scope.add = function(){
$scope.items.push($scope.new);
…}

Not entirely certain why it was fixed, but assuming that somehow accessing the object from the $scope ensures that each one is separate from the others and doesn’t end up being tied to the same instance as before.

For now it’s doing another aspect of what we intended to do – adding items to the list correctly without duplication.

I’ve pushed the changes [see commit] and added a github page to see it in action – To Do App

 

AngularJS Single Page Application (SPA) – To do List (Part I)

So as outlined in my previous post AngularJS Single Page Application (SPA), I’ve started working on the bare bones (first commit) of the To do list app – so little that a Hello World tutorial would have had more moving parts [Zing].

I’ve started fleshing out the AngularJS aspects, particularly the module, controller and associated data holder (an array) and a function to add to that array (fingers crossed).

So far it’s not working. I pre-populated the array with an object literal containing a ‘Sample Item’ value in the hopes that it will render in the expression statement {{ }}. But nada. Some things I thought was the cause:

  • I’d placed all of the script tags at the bottom of the HTML page, so it would load only after the DOM was rendered. [moved it up]
  • I’d referred to the angular.js file in script tags and within those tags placed all the code. [moved the code to its own script tag]

So still trying to figure out why AngularJS isn’t initializing.

[UPDATE] Ok so turns out I missed the ngApp directive, woops¯\_(ツ)_/¯, which meant that it was just a plain old HTML file with odd little tags which mean nothing and displayed the double curlies as just content – {{ item.name }}.

With that done, I was able to get the array with the pre-populated object literal to appear and and… the ability to add a new item (One of the most main functions on a to do list). Unfortunately, the new input box is bound to the previously added item – it updates when you type in another item and can’t seem to add anything further.

Check out the code [ commit ] until now and stay tuned as I go scratch my head some.

AngularJS Single Page Application (SPA)

So for my next quest, I’ve decided to go with a Single Page Application for the following reasons:

  • To start exploring JavaScript frameworks
  • Get some much needed interactivity on screen
  • Increase the complexity of the projects I am going after to move out of my comfort zone

I’ve decided to test the water with AngularJS. Why you might be asking? Well the previous mini project I completed was using PHP, and to further build on that language I chanced upon a course on pluralsight Building a Site with AngularJS and PHP. Since tacit conditions mean I can’t write about non JavaScript related builds, it made sense to do a crossover. Granted, I doubt I will be using a PHP/AngularJS combo for what entails.

The pluralsight tutorial was interesting but the nature of tutorial videos and instructor bias of students understanding and assimilating information at the same level as they proffer the instructions, means that certain aspects would be glossed over with the student being none the wiser.

So, in keeping with the familiar thread throughout my journey, one of the best ways to learn is to attempt to build something yourself. And after much head scratching the best thing I could think of doing was a simple to do list. Yes partly because I have been drawing blanks and the fact of using something I have almost no clue about is daunting to say the least. Also this is a priming exercise to test the waters, so something overly complex isn’t the end goal.

So I shall start with the minimal of outlays and setups and progress from there as usual. Check out my ‘awesome’ concept sketch. Mind blowingly simple.

To do list concept sketch

Caveat: AngularJS is the first version that was released with Angular 2 onwards being a complete rewrite of the framework. So pursuing AngularJS is pure curiousity and what’s transferable to learning Angular2+ (currently Angular6 beta) might only be an exercise in comparative analysis.