Tag Archives: JavaScript

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

How to set Cookies to share across all subdomains using JavaScript

Browser Cookies, is a very handy feature that enables us as a web developer to do so many interactive programming. Recently since HTML5 raised up, its Web Storage is replacing this feature. But there is one area where Web Storage fails to achieve the result – subdomain access. There we have to again jump back for old school document.cookie method.

In this very quick tutorial, lets discuss how we can setup browser cookies that can be accessed from all subdomains and root domain. But proceeding further requires basic knowledge of cookies, and if you need to learn, Tutorial Point has good article on JavaScript Cookies.

Steps:

  1. Prepare the cookie name/value
  2. Get the top level domain and assign as .domain.com
  3. Set the path to root path=/
  4. Set Expires (optional)

Lets set up a example cookie. Example take as ‘Last time report generated’ to showup across subdomains.

//variables
var LastReportGenerated="Jul 11 2013",
baseDomain = '.cssjunction.com',
expireAfter = new Date();

//setting up  cookie expire date after a week
expireAfter.setDate(expireAfter.getDate() + 7);

//now setup cookie
document.cookie="Report={'ReportName':'MainReport', 'lastGenerated':" + LastReportGenerated + "}; domain=" + baseDomain + "; expires=" + expireAfter + "; path=/";

Major thing to take care here is:

Your domain must be in format of “.domain.com” – dot and root domain and your path=/ always. If you don’t setup your path=/, auto path will be saved as from where the cookies is being saved hence it wont be accessible across any subdomain.

You can try copy paste code above in the Console, and see the result in Resource Panel. If you happen to successfully run the script above, you will get a preview:

JavaScript Cookie

Now that ‘Report’ cookie should be available across all subdomains like = main.cssjunction.com, tuts.cssjunction.com etc.

Must read books for Web Desingers/Front End Developers in 2011

A book list for Web Designers and Front End Developers, one must read to keep your knowledge aligned with current standard of emerging web technology.

 

What is your preffered reading method? Reading on screen or reading printed books? I often choose printed books to read. Laying down on ground somewhere in park (or you may choose bed) and turning pages over, reading, makes more enjoyable (than just makign eyes bigger with tears looking at screen) – only possible if you choose to read printed books.

Web industry is such a emerging field where last things goes (usually, not always) too obsolete and if you dont keep yourself upto date with current standards, it shows there is a high possibility that your competitor will left you behind and steal more clients.

So, what takes it to be updated, well said staying upto date with current web standards and new technologies?
In order to answer question above and help you to do so, I have listed a essential books, reading upon, you ll gain good and aligned knowledge with current web trends.

List goes :

Smashing Book #2

By: Smashing Magazine

Smashing Book 2

Hardboiled Web Design

By: Andy Clark

hardboiled-web-design

HTML5 & CSS3

By: SitePoint

Getting Good with JavaScript

By: Andrew Burgess

Responsive Web Design

By: ETHAN MARCOTTE

Responsive Web Design

Rockstar WordPress Designer 2

By: Rohan Mehta

WordPress Designer 2

Magento Theme Designer

By: Richard Carter

Magento1.4 Theme Design

Distinctive Design

By: Alexander Dawson

Distinctive Design

Introducing HTML5

By: Bruce Lawson, Remy Sharp

Introducing HTML5

Other recommendations:

Enjoy reading, Happy reading !!!