:::: MENU ::::

Angular.js – How I Learned It

When I first looked into the Angular.js library, I found it bit annoying. Someone, who started his journey 8 years ago with basic JavaScript and jQuery based applications development, always welcomes any new changes in the language or any new tool that simplifies development. From plain jQuery, I moved to ExtJS in the year 2009 and I absolutely loved it. No other JS library was there to make developers’ lives that easy with readymade components. Later I spent time learning lots of other front end libraries like Sencha Touch, Knockout.js, Backbone.js, Kendo, Ember.js etc. Somehow, I found Backbone.js to be absolutely amazing – not only because of it’s growing community but mostly because it just hands me a basic foundation and gives me complete freedom to create anything over that. For years, I wished for something like Backbone.js which can provide a simplest structure to an application (mostly when I used to suck big time after creating full jQuery based web apps and then spending half of my days finding out which CSS class name got changed).

However, starting with Angular.js wasn’t as easy as it was for learning Backbone.js. For Backbone.js, I just read their docs and went through the annotated source codes to have a complete understanding. Also, Addy’s Developing Backbone.js Applications helped a lot. Angular.js however, got a comparatively much bigger documentation and it is bit hard to follow only their guides to get started with the library. However, once I grabbed a good book for Angular.js, I found their documentation to be a great help. After lots of research and discussions with my Angular.js team, I started with Pro Angular.js . So far, I found it quite interesting as a beginner.

It’s been just a few days I started with Angular. I covered two chapters so far and developed a basic ToDo application. The initial concept is similar to any other MVC framework. We have a view (which is by the way index.html here), a simple model and one controller. I used Bootstrap throughout – I hate ugly looking interfaces. This is what I created:

todolist

For a test application like this, I just started writing codes as the book asked me to. I didn’t make a proper folder structure or architecture. These things will come later for sure. There is only one view and that is the index.html file.

index.html

The directive concept is quite interesting – I never found it in other libraries. I got an immediate error when I missed to add the data-ng-app=”todoApp” directive. I can understand, the way I put ng-controller or other directives, it will be completely different for non-trivial applications. However, for the learning purpose, it looks fine. I created a very basic model:

Model

The model is a simple one. The controller is even simpler. Just to make sure that $scope is something very important here and all the things you want to access in the view, must be available to the $scope. So, I had to put the model (or part of the model if required) and a counter function as properties of $scope.

Controller

3 major functionality were there to be taken care of:

  • Iterate through the data and show the list
  • Mark Done on selecting the checkbox
  • Change the count of yet-to-do list items

Unlike other JS libraries where I used to take care of looping through model by a template engine like Handlebars or Mustache, here Angular itself takes care of it with the ng-repeat directive.

Adding a ng-model directive in the checkbox takes care of changing the model data – two way binding it is. I never found myself comfortable using MVVM pattern earlier but here I kinda liked it. They did it with a directive and there are a long list of HTML elements which works good with ng-model directive. I tried with the ng-show and ng-hide directives to toggle the ‘Yes’ and ‘No’ options. Though it worked fine but I am still not sure whether it is the best possible way or not.

Lastly, to show the count of incomplete items, I added a function in the controller scope. They are calling it controller bahavior. It seems the function gets called every time there is a change in the model data. Interesting! Anyway, it serves the purpose of modifying the data on the go as user checks or unchecks a todo item.

So far, a basic ToDo app is created with quite less codes and with some interesting components. I am going to look into controller behavior more tomorrow and will come up with another post for the second part of the application.

Happy coding!

 


Win Free Copies of my book of Backbone.js Patterns and Best Practices

Readers would be pleased to know that I have teamed up with Packt Publishing to organize a Giveaway of my new book that I have written – Backbone.js Patterns and Best Practices .

And three lucky winners stand a chance to win 3 digital copies of this book. Keep reading to find out how you can be one of the Lucky Winners.

Overview

  • Develop custom plugins and mixins to reduce boilerplate in your code
  • Learn about Backbone view management with nested views, subviews, layout manager, and Marionette views
  • Understand template management by storing and pre-compiling templates
  • Explore model validation with validation plugins and learn model serialization and relational data management with nested models
  • Work with collections to implement multiple sorting and filtering behavior
  • Create solid application architecture with AMD and different popular design patterns

How to Enter?

All you need to do is head on over to the book page and look through the product description of the book and drop a line via the comments below this post to let us know what interests you the most about this book. It’s that simple.

Winners will get an e-copy of the Book.

Deadline

The contest will close on 20th Feb, 2014. Winners will be contacted by email, so be sure to use your real email address when you comment!

 



Sencha Touch image gallery

Few days ago I was searching for a mobile image gallery with sencha and I found a great extension for jQuery Mobile at PhotoSwipe . It seems almost all the apps developed with jQuery Mobile and with an Image gallery are actually using this extension for the gallery.

However, while searched for the same with Sencha Touch, I hardly found something readily available. A number of  posts are there in the Sencha Touch forum asking for a ready-made component – but there isn’t available till now. So, here is one simple photo gallery with a tweak which I used lately for one of our products.

gallery

Let’s start with creating a Sencha Touch project. There are mostly two views – one panel to show the thumbnails and the other is a Carousel to show full view of the images. I have used a Sencha Container to show thumbnails with template. However, you can use a Dataview if necessary but in that case you need to change the css a bit.

Continue Reading


ExtJS 3.x : Dynamically loading javascript and css files

While developing large ExtJS applications, we often face a problem of including all the Javascript files together in the index file which sometimes leads to a really long loading time. I faced this problem when I was developing the ExtJS desktop application with around 25 different modules and 100s of Javascript and CSS files. It was not really possible to include all those files in the index file and moreover, it was really unnecessary to include all module files when each module will load only after a user event. So, a few core files along with the Ext library files were loaded at start and the rest of the files are dynamically invoked depending on the module type. I wrote a simple Script Manager to handle this dynamic loading of JS and CSS files.

Continue Reading