Thursday, December 18, 2014

Latest AngularJS interview question - Part 2

With continuation of AngularJS interview question series, after Part 1, here is list of 2nd set of 10 AngularJS interview questions and their answers. These interview questions covers mainly "Directives" in AngularJS.

Latest AngularJS interview question - Part 1


Q11. What are templates in AngularJS?
Ans: In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. In other words, if your HTML page is having some Angular specific elements/attributes it becomes a template in AngularJS.

Q12. What are directives in AngularJS?
Ans: Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children. When AngularJS finds the directive at the time of rendering then it attaches the requested behavior to the DOM element. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass.

Q13. Can we create our own directives?
Ans: YES. AngularJS allows us to create our own custom directive.

Q14. What are different type or classification of directives?
Ans: AngularJS directives can be classified in 4 different types .
  • Element directives
  • Attribute directives
    <span ng-directive></span>
  • CSS class directives
    <span class="ng-directive: expression;"></span>
  • Comment directives

Q15. What is the name of directive is used to bootstrap an angular app?
Ans: ng-app directive is used to auto-bootstrap an AngularJS application. The ng-app directive defines the root element of the application and is typically present in the root element of the page - e.g. on the <body> or <html> tags.

Q16. Can AngularJS have multiple ng-app directives in a single page?
Ans: The answer is NO. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If you have placed another ng-app directive then it will not be processed by AngularJS. You need to manually bootstrap the second app, instead of using second ng-app directive.

Q17. Can angular applications (ng-app) be nested within each other?
Ans: NO. AngularJS applications cannot be nested within each other.

Q18. Can you bootstrap multiple angular applications on same element?
Ans: NO. If you try to do that then it will show an error "App Already Bootstrapped with this Element". This usually happens when you accidentally use both ng-app and angular.bootstrap to bootstrap an application. You can also get this error if you accidentally load AngularJS itself more than once.

Q19. In how many different ways, you can define a directive and what is the best practice?
Ans: Angular generally prefers camelCase for directives. But since HTML is not case-sensitive so it refers to directive in DOM in lower case form, delimited by dash (eg. ng-app). But when Angular complies then it normalize the directives.

Below are example of valid directive declaration.
  • ng-model
  • ngModel
  • ng:model
  • ng_model
  • data-ng-model
  • x-ng-model

The normalization process is as follows:
1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

The best practice to use dash-delimited (ng-model) or directly camelCase form (ngModel). If you are using HTML validation tool, then it is advised to use data- prefixed version. And it also answers another question which is "Difference between ng-* and data-ng-*".


Q20. Mention some angularJS directives and their purpose?
Ans: The beauty of AngularJS directives is that they are self explainatory. By just looking at directive name, you will get the idea about purpose and use of directive. Below are some mostly used directives.

ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Event Listeners
ng-click : Click event to bind on HTML elements.
ng-dbl-click
Mouse event listeners
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover

Keyboard event listeners
ng-keydown
ng-keyup
ng-keypress
ng-change


It's a long list. You can find about all the directives here.


That completes Part-2 as well. Keep visiting for upcoming set of interview questions and answers. You can also subscribe to RSS feed, follow us on Facebook and twitter to get the updates about this blog.

You can also Download jQuery Interview Questions free eBook.
Read more...

Wednesday, December 17, 2014

Latest AngularJS interview question - Part 1

Last year we published Latest jQuery interview questions and answers and thank you for your overwhelming response. And now we have come up with latest AngularJS interview question. These interview question covers basic to advance. These interview questions will help you to prepare for the interviews, quick revision and provide strength to your technical skills.

We will be interview questions in multiple posts. So here is first post with initial set of AngularJS interview question.

Also read Latest AngularJS interview question - Part 2



Q1. What is AngularJS?
Ans: AngularJS is open source client side MV* (Model – View – Whatever) framework for creating dynamic web applications. It gives life to your static HTML and makes it dynamic with its magic. It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.

Q2. Is AngularJS a framework, library or a plugin?
Ans: The suitable answer is that its a framework. As its lightweight so people also get confused between library and framework.AngularJS is open source client side MVC framework for creating dynamic web applications.

Q3. Is it same as jQuery?
Ans: NO. jQuery is great library for manipulating the DOM, providing better user experience with animations and effects. You can create website using jQuery but not a web application. jQuery is just a library to play around with HTML, where as AngularJS is a framework to build a dynamic web app as it supports two data binding, MVC, allow testability, templates and many more. Its like AngularJS like a toolbox and jQuery is just a tool. You can read more here.

Q4. Does Angular use the jQuery library?
Ans: YES, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Q5. Why AngularJS?
Ans: AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
  • MVC implementation is done right.
  • It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
  • Two way data-binding, form validations, routing supports, inbuilt services.
  • REST friendly.
  • Dependency injection support.
  • It helps you to structure and test your JavaScript code.

Q6. What are the key features/concepts of Angular.js?
Ans: When you start learning AngularJS, you will come across following terms and these are the features/concept of AngularJS.
  • Scope
  • Directives
  • Expression
  • Filters
  • Data Bindings
  • Model
  • View
  • Controller
  • Modules
  • Services
  • Dependency Injection

Q7. Is AngularJS is compatible with all modern browsers?
Ans: YES. AngularJS team run extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

Q8. What is the basic need to start with AngularJS?
Ans: To start with AngularJS, one need to make reference of angular.js. The latest version of AngularJS can be downloaded from AngularJS.com. You can either download the required js file and then host them locally or you can also use google CDN for referencing it. Here is the link for google CDN url for referencing AngularJS.

Q9. How does AngularJS initializes itself?
Ans: The AngularJS has a self-executing anonymous function present in angular.js code, which does the initialization of AngularJS. Here is how below it looks,
(function(window, document, undefined) {

if (window.angular.bootstrap) {
    //AngularJS is already loaded, so we can return here...
    console.log('WARNING: Tried to load angular more than once.');
    return;
  }
 
  //try to bind to jquery now so that one can write angular.element().read()
  //but we will rebind on bootstrap again.
  bindJQuery();
 
  publishExternalAPI(angular);
 
  jqLite(document).ready(function() {
    angularInit(document, bootstrap);
  });
 
})(window, document);
Above function first check if Angular has already been setup. If it has, we return here to prevent Angular from trying to initialize itself a second time. And then it binds jQuery (if present) and publish external API. And finally angularInit() method does the trick for initialization of AngularJS.

Following articles are recommended to know in detail.
How AngularJS Works – Explained with Angular Code
Dissecting Angular: Initializing An App


Q10. What is the bootstrapping in AngularJS?
Ans: Bootstrapping in AngularJS is nothing but just initializing, or starting, your Angular app. AngularJS supports automatic bootstrapping as well as manual way as well. Read more Different ways of bootstrapping AngularJS.

That's all folk for Part-1. Keep visiting for upcoming set of interview questions and answers. You can also subscribe to RSS feed, follow us on Facebook and twitter to get the updates about this blog. Click here to read Part 2.

You can also Download jQuery Interview Questions free eBook.

Read more...

Tuesday, December 16, 2014

Different ways of bootstrapping AngularJS

AngularJS is neat and superheroic JavaScript MVW (Model View Whatever) Framework which allows to extend HTML capabilities with Directives, expression, two way binding. In this post, we will see different ways of bootstrapping AngularJS. Bootstrapping in AngularJS is nothing but just the initialization of Angular app.


There are two ways of bootstrapping AngularJS. One is Automatic Initialization and other is Manually using Script.

When you add ng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.
<html ng-app="myApp">
When angularJS finds ng-app directive, it loads the module associated with it and then compile the DOM.

Another way to bootstrapping is manually initializing using script. Manual initialization provides you more control on how and when to initialize angular App. It is useful when you want to perform any other operation before Angular wakes up and compile the page. Below is the script which allows to manually bootstrap angularJS.
<script>
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
   });
</script>
If you have noticed, it is using document.ready which is great as it will make sure that before bootstrapping your DOM is ready. You don't need to inclued jQuery library reference here, as angularJS has within it. So angular.bootstrap function bootstrap angularJS to document. The second parameter is the name of module. You need to take care of following things while using manual process.
  • Remember angular.bootstrap function will not create modules on the go. So you need to have your modules define, before you manually bootstrap. So below is the correct approach. First define the module and then bootstrap.
    <script>
        angular.module('myApp', [])
          .controller('MyController', ['$scope', function ($scope) {
            $scope.message= 'Hello World';
          }]);
    
       angular.element(document).ready(function() {
          angular.bootstrap(document, ['myApp']);
       });
    </script>
    
  • You cannot add controllers, services, directives, etc after an application bootstraps.

And remember Don't mix up automatic and manual way of bootstrapping your app.
Read more...

Tuesday, November 4, 2014

Problem: javascript setTimeout executes function immediately

JavaScript has setTimeout() method which calls a function or evaluates an expression after a specified number of milliseconds. See below code,
setTimeout(function(){alert("Hello")}, 3000);
Above code will display an alert after 3 seconds. Let's take another example,
setTimeout(Func1(), 2000);
You must be thinking that "Func1()" will be executed after 2 seconds. No, You are wrong. The "Func1()" will be executed immediately, without a delay of 2 seconds. Then what setTimeout is doing over here?

Well, We need to remove the parenthesis after "Func1" . Keeping the parentheses invokes the function immediately. The reason is that the first argument to setTimeout should be a function reference, not the return value of the function. So the correct code is,
setTimeout(Func1, 2000);
But then you must be thinking how would you pass arguments to function (if function is expecting arguments)? Well, If you want to pass parameters to the function, you will have to call an anonymous function which in turn will call your function.
setTimeout(function() {
    Func1('hello');
}, 2000);
You may also like: Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Monday, November 3, 2014

How to remove all inline styles using jQuery?

Inline styles are not recommended and it also create problem while managing the site. Here is a one liner jQuery solution to remove all inline styles from the page.
$("* [style]").removeAttr("style");
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Thursday, October 30, 2014

New version of jQuery - jQuery 3.0

Yesterday, jQuery team has announced that jQuery new version will be called 3.0 and it is around the corner for release. We will be updating you with what's new with jQuery 3.0.

Below is excerpt from their blog post

"The concept of versioning gets a little more nuanced with jQuery, where browser compatibility can be just as important as API compatibility. In order to create a slimmer jQuery, the team started shipping two versions in 2013. The first version remained numbered in the 1.x line and, currently at 1.11.1, maintains compatibility with a maximal number of browsers. The second version, starting with 2.0.0 and now at 2.1.1, dropped support for browsers like IE8 or lower in order to streamline the code. Both the 1.x and 2.x versions of jQuery have the same public APIs, even though they differ somewhat in their internal implementations.

The successor to what is now version 1.11.1 will become jQuery Compat 3.0. The successor to jQuery 2.1.1 will be jQuery 3.0. There are two different packages on npm and Bower, but they share the same version to indicate they have the same API behavior.
"

Read complete post
We shall keep you posted with what's comes new and what changes with the new release of jQuery 3.0. Keep visiting!!!!!

Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, October 28, 2014

10 jQuery Plugins to make select box/list awesome

Do you feel that HTML select box style is boring, not eye-catching and looks old? If yes, then find a complied list of 10 awesome and free jQuery plugins which will turn your select list or box or dropdown into an awesome, stylish and eye catching control.

You may also like:

Selectator


Selectator is a jQuery-based replacement for select boxes. It supports searching, and affects the original select box directly, which is used as the data container.


FancySelect


FancySelect is a better select for discerning web developers everywhere and it is easy to use.


HeapBox


HeapBox is plugin for jQuery that replace native HTML selectboxes in your webpages. HeapBox supports themes, events, callbacks, ajax and much more.


Select.js


Select.js is a Javascript and CSS library for creating styleable select elements. It aims to reproduce the behavior of native controls as much as is possible, while allowing for complete styling with CSS.


Select or Die


Select or Die is a jQuery plugin to style/replace select elements.


Minimalect


Minimalect is a jQuery plugin for minimal and custom select replacement.


Selectify


Selectify is a jQuery plugin that turns select element into a stylable and customizable element. The element can receive focus and blur. When focussed, all key strokes for selecting elements will work including browsing by pressing the up and down keys.


ikSelect


ikSelect is a jQuery Plugin to Stylize Selects.


Selecter


Selecter is a jQuery plugin for replacing default select elements. Replace those boring default select elements with something a little nicer. It plays nice with that shiny responsive layout.


Selectize.js


Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...