Tuesday, April 12, 2016

Making Your Own Google Tag In AngularJS

Playtime blog post!  So I made a custom tag on a lark the other day.  Here it is.



It is what it looks like.  It makes a link to Google with search results for Chef Ramsay.  Let's make this tag.


Taking Advantage Of Directives In Angular

Directives can do a few interesting things.  For this project, the goal is to make a new HTML tag.  A skeleton for this directive will get us started.




We really just want this directive used as a tag element and nothing else.  Setting the restriction to "E" will impose that limit.

jQuery level manipulation sounds nice given what we're going for.  The link method that Angular allows for is good for that.  Let's stub that one out a little.




What to do next?  That element argument is useful.  It's a jQuery object of sorts that seems to be referring to our custom tag.  What can we do with a jQuery object?  Messing with the information between the two "google" tags could be nice.




Pretty straight forward.  Grab the text.  Cut together a string representing a hyperlink.  Plug the resulting link back in.  All done.


In Summing Up

This is a just me fooling around here.  If custom tags are the sort of thing that you want to take a more serious look into, there are better tutorials out there.  Jakob Jenkov is one of my favorite resources for Angular JS and I recommend checking him out.  Just make sure to read his critique section first.  There's wisdom in what he's saying there.

And that's all for now.  Cheers.