IronShay

Ironing code, geek t-shirts and even presentations!

NAVIGATION - SEARCH

ngValue - CodeValue's first AngularJS Conference!

Hi all!

I am delighted to announce CodeValue's first AngularJS conference - ngValue.

This conference has been in our minds for a while now and finally we got the time to make it happen. It will take place on the 26th of November at Cinema City, Herzeliyya, Israel. 

In the last 3 years my division at CodeValue, the Web divison,  has been involved in various angular-based projects. We have learned a lot from these projects and come to conclusions which we carry to our next projects - where we make use of our vast experience and of course, learn even more.
ngValue is intended to fullfil our desire to share our experience. It is targeted towards devs, leaders and decision makers who are thinking about getting into AngularJS or had some experience with it already and would like to get some insights from our experience.

The conference is gonna be half a day and will be all around AngularJs  - from the basics, through best practices and case studies, to our expert panel where you can ask us any question you like.

It's gonna be super awesome, so beware!  :)

For registration and more details, visit the conference website: http://www.ngvalue.co.il

Feel free to contact me if you have any questions.
All the best,
Shay.

Code Snippet: Find an Element in Page By its Angular Scope ID

Recently I was working on one of my projects and ran into a very illusive scope - I needed to know to which element it belonged but just couldn't find it on through the Elements Panel. So I wrote a small code snippet that you can paste to the console, or put somewhere in your code - it searches the DOM stating from a root element that it's given and looks for an element that has an angular scope with a specific ID attached to it.

function findScope(id, el) {
  if (angular.element(el).scope().$id == id) { return el; }
  for (var i = 0; i < el.childNodes.length; i++) {
    var result = findScope(id, el.childNodes[i]);
    if (result) { return result; }
  }
}

// Example usage:
findScope('05W', document.body);
Enjoy!
Shay.

Using Inline Templates for Directives

When writing angular directives you usually use two kinds of templates - a string that goes into the template property, or a path to a file containing the template which goes into the templateUrl property. The less known brother of these is the inline template option, which is what this blog post is about.

What are Inline Templates?

Inline templates are templates that you define inside your HTML pages within <script> tags. This is an "in-between" approach between the string template and the file template - on the one hand, you don't have to define the template as a string (who loves doing that?? it's such a horrible experience) and on the other hand, angular doesn't need to request the template from the server because it already loads with the page.

What Is It Good For?

A lot!
Well, a few use cases that this approach will make sense for:
  • Instead of using the template property which forces you to write the template as a string.
    If you're a fan of concatenating strings, then this might not appeal to you. But if you are, hmmm, well, you probably have other problems :)
  • When you create a DSL for your application which involves a bunch of directives which will, for sure, be loaded - put all the templates on the main page. This will eliminate the calls to the server for fetching the templates.
  • The last bullet works for every directive that will certainly be loaded at some point.
In my applications I usually create a single partial page which gets loaded with the master layout page and put there all the directive templates I need.

How do You Define Inline Templates?

It's very simple!
To define the template, just add a <script> tag with type="text/ng-template" and a unique id, for example, id="/templates/my-head.html":


On the directive side, use the templateUrl property and set its value to the script tag id. In our case, that would be "/templates/my-head.html":
m.directive("myHead", function() {
  return {
    templateUrl: "/templates/my-head.html"
  };
});

Why Not, Then?

There a few disadvantages for using inline templates that you should be aware of:
  • Some IDEs will not provide autocompletion inside <script> tags. 
  • People usually prefer to have the template file on its own because it's easier to find on the file tree.
    This is pretty true. However, you can continue working with separate file and then write a simple build script that will take all the template files and bundle them into a single file before going to production.

Summary

Inline directive templates is a super simple and powerful solution that makes a lot of sense for various use cases. For some reason the documentation on this feature is pretty much not existing so I hope now it will get the acknowledgment it deserves :)

Write Angular and prosper!
Shay.