ACA Blog

ACA Blog


January 2019
M T W T F S S
« Dec    
 123456
78910111213
14151617181920
21222324252627
28293031  

Categories


The Angular NL Conference Highlights (Part 2)

Niels BerghenNiels Berghen

Time for part 2 of our blog series with a detailed overview of the AngularNL Conference highlights!

In this part of the blog series we will give you an overview with the most memorable highlights of these talks:

Lazy load anything using ocLazyLoad

oliviercombe

Olivier Combe presented us an angular module to lazy load files, whether they are html, javascript or other types. There are multiple reasons why this feature might be useful for your website.

The first and probably most important reason is that it will take less time to load your application. Instead of loading all files when the website is accessed for the first time, it’s only needed to load the main files to open the first visible page. Afterwards, when navigating to another page, it’s possible to load the extra files required for that page. Secondly, the module is a great help when you want to create a modular application, since you’ll never have to load files for sections, which are not visible for certain users. By example, when a user has no permission to edit his profile, it should not be needed to load those edit profile modules and its files. And lastly, it creates the possibility to hide application logic from unprivileged users.

The previously mentioned features can be achieved in the following ways:

As a last note, Olivier Combe noticated that Angular 1.5 will natively support deferred loading of providers.

Documentation: Link / Presentation: Link

lazyloading

JSON Powered Forms

Kent C. Dodds gave us a pretty amusing presentation about his angular module. To start his presentation with, he took a selfie with the audience in the background and asked everyone to stand up and do some squats together. Not only did he do this to stretch the legs of his audience, but he also mentioned that it helps him to take away his stress a bit.

kentdodds

After his intro, Kent showed us how to use his angular-formly module during a live-coding presentation. He started with a situation we’ve all been in before. You create an input field to fill in a name. Afterwards, multiple people ask you to change this field: make it required, add a label, show an error message when the input is incorrect, disable the field under certain conditions, etc… . Your input field becomes bloated pretty fast. 

kentdoods

The real problem starts when you need to re-use this field over multiple forms. The solution will probably be to create a directive for that input field, but new problems occur when the fields needs to have a slightly different behaviour for every form. Sometimes it needs to be disabled, other times you want the label to change, so your directive will contain a ton of arguments again.

This can be solved by using Kent’s angular-formly module. This module allows you to create a complete form including (pre-styled) fields with just a single directive. Your html template will look as clean and simple as the following example:

FormFields will contain the configuration of your fields where you can define its label, its validations, its input type, etc… .

The values entered in these fields, will bind to the formData object. An example as you would place it on your controller:

This will result in a form containing an input field with label “Username”, whose value will bind on $scope.formData.username. This field will have a default styling, but you can easily add a custom template for every field.

angular-formly

Since your controller will grow pretty fast with code like this, it could be a good idea to move parts or all of the formFields to a common module, which also creates the possibility to re-use these fields in multiple forms.

I didn’t get a chance to try this module out myself yet, but I would really like to give it a go. If you want to know more about the options of this module (warning, there are a huge amount of them!), I would like to refer to the documentation in the link below.

Documentation: Link

Presentation: Link

Next up?

In the next and last part of our blog series we will discuss the talk highlights of Maurice De Beijer’s talk: “Event-Sourcing your AngularJS application”.

Blog written by Niels Berghen
niels
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

we-are-hiring

Leave a Reply

avatar
  Subscribe  
Notify of