:::: MENU ::::
Posts tagged with: Angular.js

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!