Creating the Bootstrap Nav in Ember

The standard Bootstrap Navigation includes a list of items and whichever item has the class of active is given a grey background to indicate it is the selected/active item in the navigation. Creating this navigation with Ember came to be a bit of a struggle, but behold I found a fix in the Ember.js github issues section with a solution.

The HTML code for the nav:

{{#link-li}}
{{#link-to ‘local’}}
Local
{{/link-to}}
{{/link-li}}

Some Javascript needs to be added to create the linkli component which handles assigning the class active to the current page/nav item.

App.LinkLiComponent = Em.Component.extend({
tagName: ‘li’,
classNameBindings: [‘active’],
active: function() {
return this.get(‘childViews’).anyBy(‘active’);
}.property(‘childViews.@each.active’)
});

Ember Idea – Fictional News Site

After some thinking I will create a fictional news site done mostly in Bootstrap with Ember.

I hope to also take some features from two EmberJS sites that I use alot The Score and Twitch.

My deadline is to have this project done in 2 weeks(By May 1st) and roughly 50~ hrs spread over this time frame. I will update my daily progress on my github page.

MoviezZz Done(for now!)

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.

Bug encountered with AngularJS, Select option with jibberish value

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.

angProblem0

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?”.  angProblem

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.

Working on a Bootstrap/AngularJS Website

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.

Node and Express Courses Done!

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.

Initial Quick thoughts on Backbone

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!

Ember Done!

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

 

Javascript Best Practices Done, Time for some Angular!

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.