Lots of freelancers hate having to call up people on the phone and asking if they’ve got any work for them. If only there was a...
The Angular NL Conference Highlights (Part 1)Jeroen Bastijns
In this blog series we will give you a detailed overview of the Angular NL Conference highlights. The NG-Nl Conference in Amsterdam was the first AngularJS Conference that took place in The Netherlands and was filled with hosting sessions and workshops about AngularJS related topics.
In part 1 of this blog series we will give you an overview with the most memorable highlights of these talks:
- Dave Smith: “How I made a mess of my Angular application”
- Powel Kozlowski: “Going Global with AngularJS applications”
How we made a mess of our Angular app
While 90 percent of the talks are covering new features or extensions it is always nice to find talks that are helpfull in avoiding (common) mistakes in building your Angular front-end and learn from others. “How I made a mess of my Angular application” was one of those talks given by Dave Smith. His company made the transition from JQuery to Angular three years ago and made a mess in doing so.
He talked about abusing the $scope inheritance in an example with nested controllers by making use of $scope.$parent to alter objects on the parent-controllers scope. This is fragile code because other directives like ng-if can break inherritance of scope by introducing a new inherrited scope.
Placing business logic in controllers is another bad practice. Business logic gets scattered and you will end up writing the same logic in different places. It is better to put business logic in a shared service and let controllers use that service.
Scope shadowing is a common mistake made when you start using AngularJS. It is subtle and very hard to find. You have to know how scoping works in Angular or it will bug you for days. Unit tests won’t help in finding this. One way to prevent this is ignoring $scope and put your objects directly on the controller-function. This way you can refer to the controller instead of the $scope and prevent Scope shadowing from happening. Another way is using an intermediary object on $scope on which you attach all other objects you want to bind. This prevents Angular from reading the whole prototype-chain as it will find the object on the current scope.
In Dave’s company they used watchers for capturing user events. Using $scope.$watch made it difficult to differentiate between changes made by the user and programmatic events. Instead you can use ng-change which will only capture the user-events and use an event-based programmatic approach.
He concluded that ng-include is dead. Why? It introduces a new scope, the template context is sometimes hard to determine and it provides no interface for its users. Using an element directive is the better choice. It provides a well defined interface, is easy to understand and is an actual component, which is what Angular 2.0 is all about.
Passing $scope to a service was something they did in the beginning. It’s a bad idea because it’s leaky abstraction. By doing this your service gets knowledge of the view. You better pass values to services and use callbacks or promises to notify the callee.
The talk ended with the statement that most of their mistakes stemmed from using ng-controller. In Dave’spresentation, a link is present where Tero Parviainen explains what the problems are when using ng-controllers and why it’s better to replace them with directives.
The slides from Dave’s presentation are available at: Link
Going global with AngularJS applications
Next up, globalisation! Pawel Kozlowski gave a talk about internationalization(i18n) and localization(i10n) of your Angular-applications, what is currently available and what the intentions are for fortcoming releases of Angular (1.4 / 2.0).
The current version of Angular has an enclosed i18n-subfolder which has some locale-specific data that is generated on demand. Formatting dates, numbers and currencies is supported. Additionally, Angular supports localizable pluralization support.
Pawel stated that the community now uses runtime- or build-time solutions to work out translations. There are a few problems to work out if we want a good solution for translations. The build-time solutions are difficult to setup and maintain while the run-time solutions come with a performance-penalty.
Adding i18n is a lot of work. You have to extract the messages and replace them in the template with a proper message-name. It takes a while before all messages get translated and you have to convert the messages to the correct format for the application.
The angular team is working on a simpler approach where you just write your messages in your own language statically in the templates and add an i18n-directive when you want your templates translated. This results in clear templates for the translators, they get more context. There is no need for message-names as it uses the current static message as a translation key. You can introduce translations later as you just need to add a directive.
More details will be released on NG-CONF 2015!
The slides from Pawel’s presentation are available at: Link
In the next part of our blog series we will discuss the talk hightlights of:
- Lazy load anything using ocLazyLoad – Olivier Combe
- JSON Powered Forms – Kent C. Dodds
- Event-Sourcing your AngularJS application – Maurica De Beijer
Blog written by Jeroen Bastijns
Java Solution Engineer at ACA IT-Solutions
Interested in joining our team?
Interested in meeting one of our team members? Interested in joining our team?
We are always looking for new motivated professionals to join the ACA team!
Have a look at our new ACA job website: http://www.aca-it.be/jobs