5 Must Reads to understand AngularJS Service and Factory difference

As a beginner or intermediate, a lot of JavaScript developers tends to get confused between two most vital components of AngularJS – Service and Factory.

Reason, both tend to do kind of similar job, well it looks like initially when we can’t really distinguish the proper usage. I too had these confusions and few of my colleagues happen to ask me this particular question often and often. So here I am, compiled the list of very good writings – this will give you a perfect answer on what are AngularJS Service or Factory, how to use them, what are the differences etc.

  1. Answer by Doug T on StackExchange
  2. Usage example by Gil
  3. A StackExchange Community Wiki 
  4. AngularJS: Factory vs Service vs Provider by Tyler (He has got a cool website, check that out)
  5. AngularJS Service vs Factory – video by DevelopMentor

I hope, after going through those Q/As and the video if you were still in doubt – you have a clear picture of what Service and Factory are made for in AngularJS.

Context Menu using AngularJS Directive

Since the SPA have emerged a lot in Web application market, creating MVC applications using Angular JS have become a mainstream trend.

Here is something reusable for your Angular JS Application to speed up your development – a context menu directive.

Check it out: Custom Context Menu Angular JS Directive/

How to use?

This directive is as simple as it could be. Plug the directive javascripts to you module.  Next assign the attribute to any HTML element.

<button context-menu>Show Options</button>

There is one required attribute ‘menu-items’ to pass your menu items.  This menu item has to be an Array of objects in your current scope with three properties. Example:

    //Menu Items Array
    $scope.menus = [
      {label: 'View',   action: 'callView',   active: true},
      {label: 'Delete', action: 'deleteItem', active: true},
      {label: 'Send',   action: 'sendItem',   active: false},
      {label: 'Share',  action: '',           active: true},
      {label: 'Active', action: 'deactivate', active: false}
    ];

Object structure:

  • label: Text to show on Menu item
  • action: This is the method, that would be executed when clicked on particular item.
  • active: A boolean to toggle the disable/enable of particular item from menu. It doesn’t hide though.

This array has to be accessible where the current context menu is being applied.  Then use that ‘menu-items’ attribute to pass the array reference:

<button context-menu menu-items="menus">Show Options</button>

And now the time to define your function, these function has to be within your scope chain and be accessible to be executed within scope.

    $scope.deleteItem = function(arg){
      console.warn('deleted ...')
    };

    $scope.callView = function(arg){
      console.info('View Call, another method')
    };

That’s all. You have a working context menu. Any time a user right clicks within that element range – context menu show up.

Other Options

There are other features, optional to use.

  • Fix pointer for opening context menu

If you wish your context menu to open always from a certain point, not where user has right clicked (cursor position) then all you gotta do is specify a pointer. For that you need an child element with your directive. Pass that element reference using pointer-node attribute. Example:

     <button context-menu menu-items="menus" pointer-node=".showHere">Show Options <span class="showHere">&gt;</span></button>

I recommend using a class selector to pass the reference to directive as I have done above.

Context Menu Behaviour

Once the element is clicked, a dropdown context menu pop down right below it. But this context menu is space sensitive. What I mean by that is, by default the menu tries to open on bottom right side of the element but for some reason of menu detects that it might go outside of window then menu will automatically reposition itself on eight top left, top right, left top, left bottom. Hence when the menu appears it would never be hidden in browser. How do you like that :P?

Full Code

Source Code is available in Github:  https://github.com/shekhardesigner/Context-Menu-Angular-Directive

CSS3 Filter – Invert support in Internet Explorer 10+

CSS3 introduced one of the very fancy feature to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone happy about it.

Here is the list of browser that supports this feature:

  1. Chrome (prefixed)
  2. Firefox
  3. Safari
  4. Opera

and then we have Internet Explorer which still hasn’t put it on shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.

Statements from IE:

I had an requirement to invert white images into black. This was when user switches themes on the website. Hence created this small useful plugin that takes the current image and uses SVG filter solution to invert it into black.

Check out:  InvertImages

Usage is pretty simple.

Let us say you have an white image:

<img src="images/icon-home.png" alt="Home Page" class="icon-home">

And you wish to change this image into black, all you have to is:

$("img.icon-home").invertImages();

For more options, please read this Wiki:  InvertImages jQuery Plugin Wiki

IT FITs Version 2.0 – Our most popular responsive template

It’s been a while but it’s here finally. Version 2.0 of our most popular HTML5 CSS3 Responsive Template.

Major updates since last version:

  • Updated Typography
  • Added large display responsive support
  • Dropped IE8 and older support
  • Removed flashy transitions.

DEMO

If you find any issues and want more features, submit them here in Github – https://github.com/cssjunction/It-Fits

DOWNLOAD

All Code hosting on Github

We have moved our sharing code base on Github. Yes, you heard it right. Today we have completed all code transfers, including demo previews on Github.  This will help us going further track bugs/issues and help resolve in run time. Also the download links will always have the recent one.

Find us on Github CSS Junction

We have published following project on Github as of now:

Happy coding!

a blog for/by web designers