After spending the last few months doing alot of tutorials, I finally got my first AngularJS app done!

As I briefly noted in my previous entries, I had created MoviezZz which you can also view my progression on MoviezZz GitHub.

I’ll admit the app isn’t the most visually appealing thing. But I would guess I put roughly 40 hours into the single page app spread over 2 weeks.

The app is a Fictional Movie Theatre website, that in which customers can enter customer information, movie time, and concession items.

The app contains AngularJS features such as Controller, Factory, ngRoute, Form Validation, $http, $scope, $location and some directives that included ng-click, ng-init, ng-if, and ng-repeat to name a few.

Up next, I hope to start an Ember/Bootstrap app in a day or two. I am still debating between a few ideas for what the app will be about.

I found an interesting bug on the second page of the form ‘movietime.html’ where users can select a movie, time and amount of tickets.

I was testing the form, and noticed an interesting bug after I tried to pick a new movie(a second time), after selecting a movie and time earlier.  When I pick the new movie, the movie time select option appears to have no value.  After looking into the select option in Developer Tools I noticed that the value inside (notice the pic below).  The value for the selected option went from 10:00PM(the previous movie time) to “? string:10:00 PM?”.  

When I click the select option Movie it runs ng-change=”moviesChange()” which is a function that populates the Movie Time select options.  I’m guessing that my problem has something to do with the data-binding from ng-model getting confused when the function gets fired.

After some further testing, I have fixed the bug after clearing/resetting the object fV.movieTime inside the moviesChange function with the simple code: $scope.fV.movieTime = {};

I’m still a bit puzzled what is happening with the data-binding/ng-model on the Movie Time select option, as it’s value gets changed in an odd way.

Since I’ve done a bunch of tutorials over the last few weeks that involved various Javascript libraries, it’s time now to get some coding done.

So I have a rough deadline for April 6th, a Bootstrap/AngularJS website which is a fictional Movie Theatre “MoviezZz”.  The progress of the website can be viewed on my Github page, and in the projects section of my website.

I’ll a bunch of more features to the site after the deadline, but my rough idea consists of a multiple-page form that involves ui-router.  The form will include customer information, movie selection, concession purchases, and a final confirmation page including all the information before confirming the purchase.

Over the last 3 days I completed two more CodeSchool courses Real-time with Web with Node.js and Building Block of Express.  I’ve done some reading in the past with Node.JS and it was interesting to find out briefly how Node.JS works along with Express!

Also an ex-co worker told me to look into MEAN(Mongo,Express,Angular,Node) as he knew that I have been looking into Angular, Node, and Express a bit recently.  So, on Monday I checked out my local Indigo and found a book Full Stack Javascript with Mean by Adam Bretz & Colin J. Ihrig.  So over the new week or so, I will try to go through the book and get a better idea of how all the 4 technologies work together.

On Thursday I started taking a look into Backbone, with Code School’s course The Anatomy of BackboneJS.  In comparison to the other popular Javascript MV*, Backbone seemed more like Ember than Angular.  Angular seems to be the most powerful, and in the most in demand among the 3.

So, once I finish the Node, Express, and Coffescript courses mid next week I will be putting in alot of time with Angular!

On Sunday I started the Ember Course, which consisted of 7 levels which each took roughly 60-90minutes, and I finished it earlier today.  I thought that ember would be more like AngularJS, but they seemed to be quite different in my opinion, and I will have some fun trying the Backbone course over the next few days.

A rough breakdown of the content included in each level was:

Level 1: Routes, Templates

Level 2: tagName, link-to

Level 3: Resource Routes, Dynamic Routes, Nested Routes

Level 4: Models, Fixtures

Level 5: Array Controllers, Computed Properties

Level 6:  Components, Views, Partials, Render

Level 7: Controller Actions, Model Data Binding, Events in Views

 

On Monday I finished the first Angular course, and on Wednesday I finished the second Angular course: Staying Sharp with Angular.

The second course included some new Angular elements to me such as factory, provider, services, and resource.

Up next I hope to complete the one Ember, and two Backbone courses by early next week.

Last night I completed the Javascript Best Practices course.  This course showed a bunch of tips to help improve performance while writing more efficient code.  I will definitely try this course again in the near future to make sure that I am writing efficient Javascript.

Up next in my code school schedule, is Shaping up with AngularJS and Staying Sharp with AngularJS.  The first course I completed back in November, as it is free on angularjs.org. Through that tutorial, I was introduced to code school.

The first course I should be able to complete fairly quickly,  as the content briefly includes, directives, forms, and services which I have known about for a couple months now.

Last night, I completed the Javascript Road Trip Part 3 Course after I finished level 5 “The Plains of Prototypes”.  The final level of the course included  which was another course I enjoyed, as the content involving prototypes was new to me.

Up next is the final course in the Javascript Path, Javascript Best Practices.

 

 

On Wednesday I started the Javascript Road Trip Part 3 Course and so far it’s been quite the learning experience.

This course is split into 5 levels, and a lot of the content I’ve never dealt with before.

Level 2 (Cold Closures Cove) which is described as “Explore the binding of external variables into local scopes” is something completely new to me, and I had to use the hint button several times in the challenges for this section.

As well Level 5 (Plains of Prototypes) was somewhat of a challenge as well. as it included Array, Object, String prototypes, which again is something I have never used in the past.