Use Google’s AngularJS Directives to quickly add Social Media Elements to your website

tree-directory-angularjsAt first, Google’s AngularJS Directives sounds a little complicated but then I realized that its a great way to make small changes that will make major updates to all the pages without using the back end.

Most advanced programmers would probably just use an “include” method and have the back end server do all the work but if you want to create it on the client-side with Javascript in mind, I think Directives can do a lot of the hard work.

What’s the benefit of having the code execute on the front end?   Performance, speed, and access to some of that data available while you are offline. Let’s start by adding the basic.  You will need to download Angularjs.   The next thing you will have to do is set up the index file and get started with HTML5.  Here’s an example of how I would start with the bare minimum file directory.


<!DOCTYPE html>
<html ng-app="NINJA">
        <title>Ninj App</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
        <meta name="description" content="some ninja">
        <meta name="keyword" content="ninja, coding">
        <link rel="icon" type="image/png" href="images/favicon.png">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
      <li><a href="home.html"><i class="fa fa-home"></i>Home</a></li>
      <li><a href="about.html"><i class="fa fa-shield"></i>About</a></li>
      <li><a href="contact.html"><i class="fa fa-comment"></i>Contact</a></li>
    <h1>Cool Title !</h1>    
    <p> Lorum ipsum and that other shit you put to get your paragraph started as dummy content</p>

    <script src="js/lib/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/directives/socialwidget.js"></script>  


So now you see the “<social-ninja>” and most of you might think, that looks wrong?

Well this is how directives work by adding your own tags.  You must include the angular script at the top of your other Javascript files.  So I’m using the font awesome library to get the icon images but you can do the old school way with just links or using a png or jpeg image and have them click on it to go to your social networking site. The next thing you need to do is set up the app. Now you will noticed that I put the “ng-app” on the html, you can put it in the body tag but I’m doing it the way, Google recommends, so deal it but try to have fun and experiment.

Here’s the app.js script that I would use for this example:


var ninja = angular.module('NINJA',[]);


Now the website knows that there is an angular app with the object name of ‘ninja’  so we can start adding controllers, directives or services. Since we’re just on directives,  let’s start by making a folder called directives inside the JS (javascript) folder. Some people will add all the code in to app.js file cause it’s easy but when you start to building larger web apps, you probably want to keep everything organized right? I mean you can put all your PS4 or Xbox games in on of those CD spindles but that’s just being lazy and disorganized.

I put the social networking directive in the js/directives folder and called it “socialwidget.js” because it’s sort of like a widget used with php in WordPress.

So let’s move on to the actual directives code. So Angularjs wants you to camel case the directive and it will output everything with a hyphen.  So you should write it with a camel case ‘socialNinja’ on the Javascript directive side and then you will write the element as ‘social-ninja’ on the HTML side. If its a small app, you can just keep it simple and make it one word.

ninja.directive('socialNinja', function(){    
        return {
            restrict: 'E',
            templateUrl: "js/template/social.html"


So that ninja object is attached to the directive and will return as an element that will extract the data from the template in the js/template/social.html file.

What does the social.html file look like? It’s simple and old school, well I used font awesome but basically just a small div with classes that you can stylize later.  Instead of going to every page and changing the url for each one, you change the social.html page and it will make changes on all the pages that your stick this single element tag.

<div class="floating-icons">   
  <a href=""><i class="fa fa-facebook"></i></a>
  <a href=""><i class="fa fa-twitter"></i></a>
  <a href=""><i class="fa fa-youtube"></i></a>
  <a href=""><i class="fa fa-google-plus"></i></a>


So you can imagine that these templates are endless with possibilities.  You can create one that is a contact form and plug it into your html site or even a slideshow. Your website can have multiple directives on your website so you can keep your site manageable and remove directives when they don’t apply to a certain page on your website.  I think a footer would be a good directive because you know it’s something that doesn’t change much but it’s on every page of your website.  I hope this gives you a quick insight on adding a short AngularJS template into your website. When you want to update the “AngularJS” code, all you have to do is change one file in the template or view folder of your website, update the directive and it affects all the other pages that you stick the custom element into.