You might remember Txty Jukebox, our free to use collaborative music web app that we built on top of the YouTube Data API. We were happy to find that our original version was well received and even got some press from the folks over at makeuseof.com. Well, we’ve finally got a chance to spend some time ( big thanks to our new hire Josh who led the charge ) to make improvements based on the feedback we received and re-branded it under jointdj.com!
The main idea behind our music inspired web application is to create an easy way for groups of people to collaboratively share and listen to song (and video) requests. Any user with a smart phone or computer can enter the event code provided by the event’s host on jointdj.com and start submitting songs to the event’s playlist. The “event” doesn’t always have to be a traditional party either, for example, we’ve been using Joint DJ ourselves in our office as a Pandora or Spotify replacement.
We recently started a new project and decided to use TypeScript along with Angular 1.5. Angular 1.5 introduces a new abstraction called a “component” which closely resembles Angular 2’s component based approach. Surprisingly, there isn’t a lot of simple TypeScript sample code available for Angular 1.5 so I decided to throw something together in case anyone else is looking. The code is available at https://github.com/Setfive/ng_typescript_starter and a live demo of it is running at http://code.setfive.com/ng_typescript_starter.
So what are some standouts with TypeScript and Angular 1.5?
As always, questions and comments are welcome!
Note: This is a bad idea™. Don’t do it unless you know why you’re doing it.
What you need to do is create a custom directive to render you form, use the directive’s “link” function to grab the form element, and then use jQuery’s serialize() function to generate a string that you could shoot off in a POST request.
Here’s a sample implementation:
Again, you should really only do this if you have a valid reason since you’re really fighting the framework by manipulating data this way.
Posted In: AngularJS
This lack of an inherent language structure, though initially causing a few headaches and even more than a few fist shaking bugs has, over time, helped ingrain both strong development skills as well an inherent need to intuitively structure code. Both of these skills are at the forefront of programming with AngualrJs.
My experience with Angularjs has definitely been an incredibly positive one, although the beginning was quite rough. Actually, the beginning was fairly easy however, the step after the “hello (insert name bound from text box)” step was actually the rough one. With Angular, easy things are very easy but can become difficult very quickly as soon as you are trying to develop something that is not so rudimentary.
My first experience with Angular came in the form of writing unit tests for a project that was under development here during the Summer. I spent a couple of weeks delving through a large Angular application written by one of our head engineers. After my introduction to the framework I was given the chance to use it for some development while working on some frontend modules for the Rotorobot site. These are the main challenges that I ran into while trying to learn Angular Js.
The first challenge that I had to overcome was understanding the structure of the Angular framework. Being very inexperienced with the design pattern of Model View Controller (MVC) made this aspect the hardest part of learning Angular. Angular implements MVC by having the developer split their application into MVC components and then acts as a pipeline connecting them together. It is a robust MVC framework that promotes complicated integration of different components into whole applications. If you don’t have a sense of how the pieces fit together then the “Set it and forget it” or 2-way data-binding nature of the framework can easily turn into one of your biggest headaches.
Posted In: AngularJS