AngularJS : 1 Month later

Exactly one month go I posted a little message stating that I’m going to venture into the world of angularJS. This blogpost is for myself as a post-it note to keep the most important parts easy to find:

  1. the framework is awsome
  2. the framework is awsome
  3. the framework is awsome
  4. the framework is awsome

$scope

keeping track of scope variables can be a pain in the ###. Use $scope.$watch(‘<variable name>) to get notified about changes. first call is always some sort of initialization call!

use inline scopes in directives, this way the directive can be mean and clean.

$http

use $http for low level ajax calls. $http uses promises. Promises are a observer/observable like tech to call funtions when a specified asynchronous task completes. When multiple ‘objects’ use the same service add a addListener method like so

This way you can have multiple ‘listeners’ and don’t worry in your service on what is happening and break things by changing parsing the result.

Controllers

Don’t use anonymous functions!! Use a function defined at /App/controllers.js It makes your life easier

When defining a controller be aware of the DI properties. Always check the order of things 😉

Divide and conquer

Use the following app structure*

– /App

/App/libs : Contains all the javascript libraries needed to get it working such as moment.js or something similar

/App/pojo: Contains your ‘classes’ that are to be used. For instance in my runkeeper project I have a pojo for a workout, for a list of workouts and for heartrate data.

/App/app.js: Main module for the project.

/App/controller.js: Controller javascript. Contains all the controllers used throughout the application. no mather where they are used, in directives or just as a basic view controller.

/App/services.js: service object definitions module

/App/directives.js: main service definition module. Uses controller.js and service.js to get the work done. *be aware of this in <html><header>

/Templates: contains the main view templates

/Templates/partials: contains sub templates such as used by directives. 

* thinking about moving them into the /App directory

AngularJS a new world opens

In my spare time I’m currently looking into AngularJS. Before I started working on it I was skeptical. The main reason for it is that it’s  JavaScript framework and I’m not particularly fan of this language at all. Error handling is  mess and the fact that it’s weakly typed isn’t great either.

So why start using AngularJS? I think that the main reason can be described as ‘easy of use’. Because web apps are the way to go I have  to find a tool that can help me write those apps with the least effort. Together with the templating engine and the fact that there is already a lot of stuff in the framework I don’t need to write a whole bunch of code myself just to get a input field to change its value when someone presses a button. Another thing I like about angular is the structure.

Currently, working on my first real app, I have a main module ( the app ) which has dependencies with other modules. The main app is really straight forward and contains only the global things like a user object and so fort. The other modules are in fact directives that contain isolated business logic.

And next to that I have a service module. This module is only used for storing factory definitions. One for connecting to the login REST endpoint, another one for connecting to the data REST endpoint etc. etc. I’m planning on adding some blog posts regarding angular in the future. Don’t expect these to be tutorial like posts but they will be more like post it notes so I wont forget the things I already did in the past 😉