Angularjs Interview Questions and Answers

1) What is Angular.js?
AngularJS is a javascript framework used for creating single web page applications. It allows
you to use HTML as your template language and enables you to extend HTML’s syntax to
express your application’s components clearly
2) Explain what are the key features of Angular.js ?
The key features of angular.js are
● Scope
● Controller
● Model
● View
● Services
● Data Binding
● Directives
● Filters
● Testable
3) Explain what is scope in Angular.js ?
Scope refers to the application model, it acts like glue between application controller and the
view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document
Object Model) structure of the application. It can watch expressions and propagate events.
4) Explain what is services in Angular.js ?
In angular.js services are the singleton objects or functions that are used for carrying out
specific tasks. It holds some business logic and these function can be called as controllers,
directive, filters and so on.
5) Explain what is Angular Expression? Explain what is key difference between angular
expressions and JavaScript expressions?
Like JavaScript, Angular expressions are code snippets that are usually placed in binding
such as {{ expression }}
The key difference between the JavaScript expressions and Angular expressions
● Context : In Angular, the expressions are evaluated against a scope object, while
the Javascript expressions are evaluated against the global window
● Forgiving: In Angular expression evaluation is forgiving to null and undefined,
while in Javascript undefined properties generates TypeError or ReferenceError
● No Control Flow Statements: Loops, conditionals or exceptions cannot be used in
an angular expression
● Filters: To format data before displaying it you can use filters
6) With options on page load how you can initialize a select box ?
You can initialize a select box with options on page load by using nginit
directive
● <div ngcontroller
= “ apps/dashboard/account ” ngswitch
● On = “! ! accounts” nginit
= “ loadData ( ) ”>
7) Explain what are directives ? Mention some of the most commonly used directives in
Angular.js application ?
A directive is something that introduces new syntax, they are like markers on DOM element
which attaches a special behavior to it. In any Angular.js application, directives are the most
important components.
Some of the commonly used directives are ngmodel,
ngApp,
ngbind,
ngrepeat
,
ngshow
etc.
8) Mention what are the advantages of using Angular.js ?
Angular.js has several advantages in web development.
● Angular.js supports MVS pattern
● Can do two ways data binding using Angular.js
● It has perdefined
form validations
● It supports both client server communication
● It supports animations
9) Explain what Angular JS routes does ?
Angular js routes enable you to create different URLs for different content in your application.
Different URLs for different content enables user to bookmark URLs to specific content. Each
such bookmarkable URL in Angular.js is called a route
A value in Angular JS is a simple object. It can be a number, string or JavaScript object.
Values are typically used as configuration injected into factories, services or controllers. A
value should be belong to an Angular.js module.
Injecting a value into an Angular.js controller function is done by adding a parameter with the
same name as the value
10) Explain what is data binding in Angular.js ?
Automatic synchronization of data between the model and view components is referred as
data binding in Angular.js. There are two ways for data binding
1. Data mining in classical template systems
2. Data binding in angular templates
11) What makes angular.js better ?
● Registering Callbacks: There is no need to register callbacks . This makes your
code simple and easy to debug.
● Control HTML DOM programmatically: All the application that are created using
Angular never have to manipulate the DOM although it can be done if it is required
● Transfer data to and from the UI: Angular.js helps to eliminate almost all of the
boiler plate like validating the form, displaying validation errors, returning to an
internal model and so on which occurs due to flow of marshalling data
● No initilization code: With angular.js you can bootstrap your app easily using
services, which autoinjected
into your application in Guice like dependency
injection style
12) Explain what is string interpolation in angular.js ?
In angular.js the compiler during the compilation process matches text and attributes using
interpolate service to see if they contains embedded expressions. As part of normal digest
cycle these expressions are updated and registered as watches.
13) Mention the steps for the compilation process of HTML happens?
Compilation of HTML process occurs in following ways
● Using the standard browser API, first the HTML is parsed into DOM
● By using the call to the $compile () method, compilation of the DOM is performed.
The method traverses the DOM and matches the directives.
● Link the template with scope by calling the linking function returned from the
previous step
14) Explain what is directive and Mention what are the different types of Directive?
During compilation process when specific HTML constructs are encountered a behaviour or
function is triggered, this function is referred as directive. It is executed when the compiler
encounters it in the DOM.
Different types of directives are
● Element directives
● Attribute directives
● CSS class directives
● Comment directives
15) Explain what is linking function and type of linking function?
Link combines the directives with a scope and produce a live view. For registering DOM
listeners as well as updating the DOM, link function is responsible. After the template is
cloned it is executed.
● Prelinking
function: Prelinking
function is executed before the child elements are
linked. It is not considered as the safe way for DOM transformation.
● Post linking function: Post linking function is executed after the child elements are
linked. It is safe to do DOM transformation by postlinking
function
16) Explain what is injector?
An injector is a service locator. It is used to retrieve object instances as defined by provider,
instantiate types, invoke methods and load modules. There is a single injector per Angular
application, it helps to look up an object instance by its name.
17) Explain what is the difference between link and compile in angular.js?
● Compile function: It is used for template DOM Manipulation and collect all of the
directives.
● Link function: It is used for registering DOM listeners as well as instance DOM
manipulation. It is executed once the template has been cloned.
18) Explain what is factory method in angular.js?
For creating the directive, factory method is used. It is invoked only once, when compiler
matches the directive for the first time. By using $injector.invoke the factory method is
invoked.
19) Mention what are the styling form that ngModel adds to CSS classes ?
ngModel adds these CSS classes to allow styling of form as well as control
● ngvalid
● nginvalid
● ngpristine
● ngdirty
20) Mention what are the characteristics of “Scope”?
● To observer model mutations scopes provide APIs ($watch)
● To propagate any model changes through the system into the view from outside of
the Angular realm
● A scope inherits properties from its parent scope, while providing access to shared
model properties, scopes can be nested to isolate application components
● Scope provides context against which expressions are evaluated
21) Explain what is DI (Dependency Injection ) and how an object or function can get a
hold of its dependencies ?
DI or Dependency Injection is a software design pattern that deals with how code gets hold of
its dependencies. In order to retrieve elements of the application which is required to be
configured when module gets loaded , the operation “config” uses dependency injection.
These are the ways that object uses to hold of its dependencies
● Typically using the new operator, dependency can be created
● By referring to a global variable, dependency can be looked up
● Dependency can be passed into where it is required
22) Mention what are the advantages of using Angular.js framework ?
Advantages of using Angular.js as framework are
● Supports two way databinding
● Supports MVC pattern
● Support static template and angular template
● Can add custom directive
● Supports REST full services
● Supports form validations
● Support both client and server communication
● Support dependency injection
● Applying Animations
● Event Handlers
23) Explain the concept of scope hierarchy? How many scope can an application
have?
Each angular application consist of one root scope but may have several child scopes. As
child controllers and some directives create new child scopes, application can have multiple
scopes. When new scopes are formed or created they are added as a children of their parent
scope. Similar to DOM, they also creates a hierarchical structure.
24) Explain what is the difference between angular.js and backbone.js?
Angular.js combines the functionalities of most of the 3rd party libraries, it supports individual
functionalities required to develop HTML5 Apps. While Backbone.js do their jobs individually.
25) Who created Angular JS ?
Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed
by Google.

Object Oriented Javascript

Object-Oriented Javascript:

JavaScript is object-oriented to its core, with powerful, flexible OOP capabilities.

Terminology

Namespace
A container which allows developers to bundle all functionality under a unique, application-specific name.
Class
Defines the characteristics of the object. It is a template definition of variables and methods of an object.
Object
An Instance of a class.
Property
An object characteristic, such as color.
Method
An object capability, such as walk. It is a subroutine or function associated with a class.
Constructor
A method called at the moment of instantiation of an object. It usually has the same name as that of the class containing it.
Inheritance
A class can inherit characteristics from another class.
Encapsulation
A method of bundling the data and methods that use them together.
Abstraction
The conjunction of complex inheritance, methods, properties of an object must be able to simulate a reality model.
Polymorphism
Poly means “many”  and morphism means “forms“. Different classes might define the same method or property.

Prototype-based programming

Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes. This model is also known as class-less, prototype-oriented, or instance-based programming.

Namespace

A namespace is a container which allows developers to bundle up all functionality under a unique, application-specific name. In JavaScript a namespace is just another object containing methods, properties and objects.

The idea behind creating a namespace in JavaScript is simple: one global object is created and all variables, methods and functions become properties of that object. Use of namespaces also minimizes the possibility of name conflicts in an application.

Let’s create a global object called MYAPP:

// global namespace
var MYAPP = MYAPP || {};

Here in above code sample we have first checked whether MYAPP is already defined (either in same file or in another file). If yes, then use the existing MYAPP global object, otherwise create an empty object called MYAPP which will encapsulate method, functions, variables and objects.

We can also create sub-namespaces:

// sub namespace
MYAPP.event = {};

The class

JavaScript is a prototype-based language which contains no class statement, such as is found in C++ or Java. This is sometimes confusing for programmers accustomed to languages with a class statement. Instead, JavaScript uses functions as classes. Defining a class is as easy as defining a function. In the example below we define a new class called Person.

function Person() { } 
or 
var Person = function(){ }

The object (class instance)

To create a new instance of an object obj we use the statement new obj, assigning the result (which is of type obj) to a variable to access it later.

In the example below we define a class named Person and we create two instances (person1and person2).

function Person() { }
var person1 = new Person();
var person2 = new Person();

The constructor

The constructor is called at the moment of instantiation (the moment when the object instance is created). The constructor is a method of the class. In JavaScript, the function serves as the constructor of the object therefore, there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

The property (object attribute)

Properties are variables contained in the class; every instance of the object has those properties. Properties should be set in the prototype property of the class (function) so that inheritance works correctly.

In the example below we define the firstName property for the Person class and we define it at instantiation.

function Person(firstName) {
  this.firstName = firstName;
  console.log('Person instantiated');
}

var person1 = new Person('Alice');
var person2 = new Person('Bob');

// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"



			
		

Bootstrap Tutorial

Bootstrap:
Bootstrap is a free collection of tools for creating websites and web applications in responsive web design using this css framework which supports mobiles,tablets and desktops.

Note: Before you include bootstrap.min.js, you should even include jquery. Without jquery bootstrap wont work as many of components of bootstrap are dependent on jquery. Hence have like below for sure..

<script src=”bootstrap/js/jquery-1.11.1.min.js”></script>
<script src=”bootstrap/js/bootstrap.min.js”></script>

Mandatory add meta tag for viewport which enables support for mobiles and tablets. Like <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.

Wanna see the difference between responsive and non responsive design??

Just open the two following links in different tabs first..

1. http://getbootstrap.com/examples/non-responsive/

2. http://livedemo00.template-help.com/wt_51334/index.html

Now click restore down as shown below..

26-09-2014 11-07-41

Now drag it to left and right to see the difference between responsive and non responsive websites.

26-09-2014 11-09-13

Use .container for a responsive fixed width container.Use .container-fluid for a full width container, spanning the entire width of your viewport.

Creating layouts:

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Extra small devicesPhones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

26-09-2014 11-19-37

From the above image i hope you can understand that default page width/container will be divided in to 12 cols. We can either use col-xs/col-sm/col-md/col-lg to divide columns. Here we consider col-md in dividing. If we want 12 cols in a row, you should have class row where inside you shud have col-md-1 for 12 times. Similarly if you need 3 cols have col-md-4,for 2 cols have col-md-6 and 1 column col-md-12.

Eg:

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

If you want to have this grid options for all mobiles,tablets and desktops..

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix

26-09-2014 12-16-09

For the above image if we use clearfix all column grid heights will be appeared to be same.

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

26-09-2014 12-20-20

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
26-09-2014 12-22-16

Body copy

Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Lead body copy

Make a paragraph stand out by adding .lead.

Inline text elements

For highlighting a run of text due to its relevance in another context, use the <mark> tag. – Market text

For indicating blocks of text that have been deleted use the <del> tag. – Deleted text

For indicating blocks of text that are no longer relevant use the <s> tag. – Strikethrough text

For indicating additions to the document use the <ins> tag. – Inserted text

To underline text use the <u> tag. – Underline text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

For emphasizing a snippet of text with a heavier font-weight. <strong>tag for bold

For emphasizing a snippet of text with italics. <em> for italics

Alignments of text:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Tables: For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  ...
</table>
Use .table-striped to add zebra-striping to any table row within the <tbody>.
<table class="table table-striped">
  ...
</table>

Add .table-bordered for borders on all sides of the table and cells.

Add .table-hover to enable a hover state on table rows within a <tbody>.

Add .table-condensed to make tables more compact by cutting cell padding in half.

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

success-green,info-blue,warning-orange,danger-red

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Add .form-inline to your <form> for left-aligned and inline-block controls.

<input type="text" class="form-control" placeholder="Text input">
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>

Difference between disabled and readonly: 26-09-2014 12-44-39

<button type="button" class="btn btn-default">Default</button>
btn btn-success,
btn btn-info,
btn btn-warning,
btn btn-danger

Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

CSS Interview Concepts

CSS:

CSS stands for Cascading Style Sheets

A CSS rule set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

###############################################################

Selectors:

The id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.

The style rule below will be applied to the HTML element with id=”para1″:

Example

#para1 {
text-align: center;
color: red;
}

The class selector finds elements with the specific class.

The class selector uses the HTML class attribute.

To find elements with a specific class, write a period character, followed by the name of the class:

In the example below, all HTML elements with class=”center” will be center-aligned:

Example

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class=”center” will be center-aligned:

Example

p.center {
text-align: center;
color: red;
}
or p #id{ }

Grouping Selectors

h1, h2, p {
text-align: center;
color: red;
}

###################################################################

background-color: #6495ed;

background-image: url(“paper.gif”);

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

background-image: url(“gradient_bg.png”);
background-repeat: repeat-x; or repeat-y

Showing the image only once is specified by the background-repeat property:

background-image: url(“img_tree.png”);
background-repeat: no-repeat;

Background – Shorthand property

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

All CSS Background Properties

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

##########################################################################

CSS Text

h1 {
color: #00ff00;

text-align: center;right;justify;

text-decoration: none;overline;line-through;underline

text-transform: uppercase;lowercase;capitalize

text-indent: 50px;
}

Imp text properties:

direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height

#####################################

CSS Font

p {
font-family: “Times New Roman”, Times, serif;
}

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal – The text is shown normally
  • italic – The text is shown in italics
  • oblique – The text is “leaning” (oblique is very similar to italic, but less supported)

The font-size property sets the size of the text.

font-size: 40px; or  font-size: 2.5em; /* 40px/16=2.5em */

All CSS Font Properties

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

########################################

CSS Links

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
}/* visited link */
a:visited {
color: #00FF00;
}/* mouse over link */
a:hover {
color: #FF00FF;
}/* selected link */
a:active {
color: #0000FF;
}

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
  • #############

#############################################################################

In HTML, there are two types of lists:

  • unordered lists – the list items are marked with bullets
  • ordered lists – the list items are marked with numbers or letters

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

ul {
list-style-image: url(‘sqpurple.gif’);
}

All CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker

###############################################################

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:
CSS box-model

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

Example

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

CSS Border

w3schools

border-style: solid;
border-width: 5px;

border-color: red;

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

#################################################################################

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

The margin property can have from one to four values.

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px
  • margin: 25px;
    • all four margins are 25px

CSS Padding

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The padding property can have from one to four values.

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding: 25px;
    • all four paddings are 25px

CSS Display and Visibility

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Hiding an Element – display:none or visibility:hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

###################################################################

CSS Positioning

overflow Specifies what happens if content overflows an element’s box auto
hidden
scroll
visible
inherit
position Specifies the type of positioning for an element absolute
fixed
relative
static
inherit
z-index Sets the stack order of an element number
auto
inherit

 

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:

Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example

h2.pos_left {
position: relative;
left: 20px;
}

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Here is a visual:

The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:

Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

####################################################################################

CSS Float

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

img {
float: right;
}

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

Example

.text_line {
clear: both;
}
#########################################################################################

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector

Descendant Selector

The descendant selector matches all element that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

div p {
background-color: yellow;
}

Child Selector

The child selector selects all elements that are the immediate children of a specified element.

The following example selects all <p> elements that are immediate children of a <div> element:

Example

div > p {
background-color: yellow;
}

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

The following example selects all <p> elements that are placed immediately after <div> elements:

Example

div + p {
background-color: yellow;
}

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

Example

div ~ p {
background-color: yellow;
}

CSS3 Tutorial

CSS3 IntroductionCSS3 BordersCSS3 BackgroundsCSS3 GradientsCSS3 Text EffectsCSS3 FontsCSS3 2D TransformsCSS3 3D TransformsCSS3 TransitionsCSS3 AnimationsCSS3 Multiple ColumnsCSS3 User Interface

 

CSS3 Borders: Border radius,box shadow,border image

CSS3 Backgrounds: background-size,background-repeat,background-origin

CSS3 Gradients: Linear,radial and elliptical gradients for webkit(chrome and safari),o(opera),moz(mozilla)

CSS3 Text: text-shadow: 5px 5px 5px #FF0000;

CSS3 2D Transforms: scale(),skew(),rotate,translate,matrix

CSS3 3D Transforms: rotateX(), rotateY(),rotateZ()..similarly scaleX…skewX()…

######################################################################################

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3

#######################################################################################

CSS3 Animations

With CSS3, we can create animations which can replace Flash animations, animated images, and JavaScripts in existing web pages.

 

HTML5 Interview Concepts

HTML:

how many types of doctypes in html??

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

HTML4 – has 3 doctypes like

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;
HTML5 has only one doctype  <!DOCTYPE html>
################################################################################
What are html meta elements??
Meta elements are tags used in HTML or XHTML documents to provide structured metadata about a Web page. They are part of a web page’s head section.
A special HTML tag that provides information about a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page’s content. Many search enginesuse this information when building their indices.Metadata will not be displayed on the page, but will be machine parsable.

The scheme attribute is not supported in HTML5.

HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5: <meta charset=”UTF-8″>

Example 1 – Define keywords for search engines:

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Example 2 – Define a description of your web page:

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

Example 3 – Define the author of a page:

<meta name=”author” content=”Hege Refsnes”>

Example 4 – Refresh document every 30 seconds:

<meta http-equiv=”refresh” content=”30″>
##################################################################
Computer coding formatting elements in html?
<em> Renders as emphasized text
<strong> Defines important text
<dfn> Defines a definition term
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

#################################################################

What are HTML attributes?

Attributes provide additional information about HTML elements. like id,name,class,value etc etc. For images..src,width,height,alt etc etc like that.

###################################################################

Styling HTML with CSS

CSS styling can be added to HTML elements the following 3 ways:

  • Inline – using the style attribute in HTML elements
  • Internal – using the <style> element in the <head> section
  • External – using external CSS files

The common way to add styling, is to put CSS syntax in separate CSS files.

#####################################################################

HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.

Block level elements normally start (and end) with a new line, when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

Inline elements are normally displayed without line breaks.

Examples: <b>, <td>, <a>, <img>

The HTML <div> element is a block level element that can be used as a container for other HTML elements.

The HTML <span> element is an inline element that can be used as a container for text.

############################################################################

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

HTML5 Semantic Elements
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
aside Defines content aside from the content (like a sidebar)
footer Defines a footer for a document or a section
details Defines additional details
summary Defines a heading for the details element

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout

section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

##############################################################################

Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS

  1. Tables are usually more bytes of markup.(Longer to download, and more bytes of traffic for the host.)
  2. Tables usually prevent incremental rendering.(Takes longer for the user to see anything on the page.)
  3. Tables may require you to chop single, logical images into multiple ones.(This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
  4. Tables break text copying on some browsers.(That’s annoying to the user.)
  5. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>).(They limit what you can actually do in terms of layout.)
  6. Once you know CSS, table-based layouts usually take more time to implement.(A little effort up-front learning CSS pays off heavily in the end.)
  7. Tables are semantically incorrect markup for layout.(They describe the presentation, not the content.)
  8. Tables make life hell for those using screen readers.(Not only do you get the other benefits of CSS, you’re also helping out the blind/partially-sighted. This is a Good Thing.)
  9. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.(Have you seen CSS Zen Garden?)

##################################################################################

What is Responsive Web Design?

  • RWD stands for Responsive Web Design
  • RWD can deliver web pages in variable sizes
  • RWD is a must for tablets and mobile devices

Using Bootstrap

Another way to create a responsive design, is to use an already existing CSS framework.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs.

Bootstrap helps you to develop sites that look nice at any size; screen, laptop, tablet, or phone

#######################################################################################

HTML Form Tags

= Tag added in HTML5.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

#######################################################################################

New HTML5 Elements

The most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New form controls like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s are:

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage(Local storage is a powerful replacement for cookies)
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

###############################################################################

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” old browsers to handle “unknown” HTML elements. How to teach??

HTML5 defines 8 new semantic HTML elements. All these are block level elements.

To secure correct behavior in older browsers, you can set the CSS display property to block:

Teach example

header, section, footer, aside, nav, main, article, figure {
display: block;
}
##################################################################

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Read more about HTML5 Semantics.


New Form Elements

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

##########################################################################

New Input Types

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#########################################################################

HTML5 Graphics

Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

 


New Media Elements

Tag Description
<audio> Defines sound or music content
Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content

###################################################################################

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> – Clearly defines its content.

 

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>
  • <footer>
  • <details>
  • <summary>
  • <mark>
  • <time>
HTML5 Semantic Elements

The <section> element defines a section in a document. Grouping of content.

Eg: A Web site’s home page could be split into sections for introduction, content, and contact information.

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

  • Forum post
  • Blog post
  • Newspaper article

An article can contains sections also..

#####################################################################

Difference between DIV & Section elements?

<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

the only difference between the DIVelement and the SECTION element is semantics. In other words, it’s themeaning of the section of code you’re dividing up.

Any content that is contained inside a DIVelement does not have any inherent meaning.

###############################################################

Difference between section and article?

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

################################################################################

The <header> element specifies a header for a document or section.

The <footer> element specifies a footer for a document or section.

The <nav> element defines a set of navigation links.

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

With HTML5, images and captions can be grouped together in <figure> elements:

<figure>
<img src=“pic_mountain.jpg” alt=“The Pulpit Rock” width=“304” height=“228”>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>
###############################################################################

Why Semantic HTML5 Elements?

With HTML4, developers used their own favorite attribute names to style page elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.

##############################################################################

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

The <datalist> element is used to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element’s list attribute to bind it together with a <datalist> element.

<form action=“demo_form.asp” method=“get”>
<input list=“browsers”>
<datalist id=“browsers”>
<option value=“Internet Explorer”>
<option value=“Firefox”>
<option value=“Chrome”>
<option value=“Opera”>
<option value=“Safari”>
</datalist>
</form>

In the above example, input list (browsers) and datalist id should be always same

####################################################################################

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> tag specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

<form action=“demo_keygen.asp” method=“get”>
Username: <input type=“text” name=“usr_name”>
Encryption: <keygen name=“security”>
<input type=“submit”>
</form>

#################################################################################

The <output> element represents the result of a calculation (like one performed by a script).

##################################################################################

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation.

This chapter covers the new input types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

<input type=“number” name=“quantity” min=“1” max=“5”>

<input type=“date” name=“bday”>

<input type=“color” name=“favcolor”>

<input type=“range” name=“points” min=“0” max=“10”>

<input type=“month” name=“bdaymonth”>

<input type=“week” name=“week_year”>

<input type=“time” name=“usr_time”>

<input type=“datetime” name=“bdaytime”>

<input type=“email” name=“email”>

<input type=“search” name=“googlesearch”>

<input type=“search” name=“googlesearch”>

<input type=“url” name=“homepage”>

#########################################################################

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

  • autocomplete
  • novalidate

New attributes for <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#################################################################

<video width=“320” height=“240” controls>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
Your browser does not support the video tag.
</video>

MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video – Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

######################################################################

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files could only be played with a plug-in (like flash).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

<audio controls>
<source src=“horse.ogg” type=“audio/ogg”>
<source src=“horse.mp3” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.

Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

############################################################################

The <object> element defines an embedded object within an HTML document.

It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.

<object width=“400” height=“50” data=“bookmark.swf”></object>

The element is supported in all major browsers.

The element also defines an embedded object within an HTML document.

<embed width=“400” height=“50” src=“bookmark.swf”>

Youtube:

<object width=“420” height=“315”
data=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>
</object>

<embed width=“420” height=“315”
src=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>

##############################################################################

What is HTML Local Storage?

With HTML local storage, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, local storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.

The data is stored in name/value pairs, and a web page can only access data stored by itself.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

HTML Local Storage Objects

HTML local storage provides two objects for storing data on the client:

  • window.localStorage – stores data with no expiration date
  • code.sessionStorage – stores data for one session (data is lost when the tab is closed)

Before using local storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

// Store
localStorage.setItem(“lastname”, “Smith”);
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

Example explained:

  • Create a localStorage name/value pair with name=”lastname” and value=”Smith”
  • Retrieve the value of “lastname” and insert it into the element with id=”result”

The example above could also be written like this:

// Store
localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

The syntax for removing the “lastname” localStorage item is as follows:

localStorage.removeItem(“lastname”);

Angularjs Interview Questions

CSS:-
——–
1. What doctype you are going to use for a mobile device? (iPad, iPhone etc)
2. What are the advantages of bootstrap over other css frameworks?
3. Why we use bootstrap for our web design?
4. How will you design pages for mobile devices? (Responsive)
5. Tell the exact syntax for media queries in css?
6. Difference between id and class?
7. Difference between absolute and relative?
8. How will you write css for specific browsers?
9. How will you include css or javascript files for a specific browser?
10. Which way is best for css inclusion, Internal or External?
11. If an external css class doesn’t take effect while applying the same style in inline, then that style will take
effect. How you handle that situation?
12. List css3 features
13. Tell the box-shadow syntax
14. If you have included 3 css files one by one, then which css style will take precedence

HTML5 & AngularJS:-
—————————–
15. List HTML5 features?
16. How do you find whether a browser supports html5 or not?
17. Tell the difference between NodeJS and AngularJS?
18. Can we use AngularJS with NodeJS?
19. Can we connect database through NodeJS?
20. Difference between $scope and $rootScope and how many in each we can create in a project?
21. What is the purpose of ng-cloak directive?
22. How to hide html rendering with angular brackets while loading angularjs?
23. Difference between ngRepeat and ngOptions?
24. Difference between services and factory in angular js?
25. Tell about $routeProvider
26. How do you use a service inside controller?
27. What is directive?
28. What are the restrict options available in directive?
29. What is link and its use in directive?
30. What is compile and its use in directive?

General:-
————
31. Tell about Data abstraction
32. Tell about abstract class in oops

Javascript & JQuery:-
—————————–
33. How to write a class in javascript?
34. What is constructor in javascript and when it will execute?
35. How do you achieve inheritance in javascript?
36. What is prototype in javascript?
37. Tell about live method in jquery?
38. Tell alternative method to live?
39. What is event delegation in jquery?
40. What is event propagation in javascript?
41. How do you stop event propagation?

Javascript

1. Basics
2. window object, document object
3. OOPS Based javascript
4. Inheritance
5. Prototype and its chain
6. Constructor
7. Object literal
8. apply, call and bind methods
9. closure
10. event delegation & event propagation

AngularJS

1. basics and its common features
2. dependency injection
3. directives (deep knowledge)
4. scope and rootscope
5. services
6. factories
7. providers
8. $http, $resource, $location, $q
9. promises
10. $apply, $digest, $apply vs $digest

Few URLS:
http://www.interviewquestionspdf.com/2014/12/angularjs-interview-questions-and.html

http://www.web-technology-experts-notes.in/2014/11/angularjs-interview-questions-and-answers-for-experienced.html

http://www.code-sample.com/2014/05/angularjs-interview-questions-and.html

http://java.dzone.com/articles/angularjs-interview-questions