Front End Developer (AngularJS) Interview Questions And Answers

AngularJS fits the definition of a framework the best, even though it's much more lightweight than a typical framework and that's why many confuse it with a library.

scope is an object that refers to the application model. It is the glue between application controller and the view. Both the controllers and directives have reference to the scope, but not with each other. It is an execution context for expressions and arranged in hierarchical structure. Scopes can watch expressions and propagate events.

The startup time heavily depends on your network connection, state of the cache, browser used and available hardware, but typically we measure bootstrap time in tens or hundreds of milliseconds.

The runtime performance will vary depending on the number and complexity of bindings on the page as well as the speed of your backend (for apps that fetch data from the backend). Just for an illustration we typically build snappy apps with hundreds or thousands of active bindings.

In a website, front-end is the part that users accesses while interacting with the website including images, buttons, colours, animations, forms, typography etc.

While the frontend developer is a programmer that codes the front end of a website and ensures that a visibility of site remains same throughout different web browsers.

CoffeeScript is a small programming language that compiles into JavaScript. It helps to write JavaScript code better by providing you with a more consistent syntax and avoiding the irregular nature of JavaScript language

The basic rule for Coffee Script
Whitespace matters: There are no curly braces in CoffeeScript
No parentheses: Functions that take arguments do not require parentheses

This is pretty simple but at the same time some people never came across a triple equals or never wondered what's the difference.
Double equals == is used to compare the value of two operands:

"2" == 2; // true
2 == 2; // true
Triple equals === is used to compare the value AND type of two operands:

"2" === 2; // false
2 === 2; // true

You can add a new method to a javascript class using prototype:

function Person(name) {
this.name = name;
}
Person.prototype.walk = function() {
console.debug(this.name + " is walking.");
}
// Calling the new method
var person = new Person("Hussain");
person.walk(); // "Hussain is walking."
It's worth mentioning that adding methods via prototype is the most inexpensive way in terms of performance since the method is tied to the prototype of the class. It means, for every new instance of class Person, you will have access to the prototype's walk() method. Now, if you declare walk() method inside the Person class, you will end up recreating the method for every new instance of Person.

There are several technical differences between these two types of requests, regarding length limitation, security, caching and a few others. But if someone asks you WHEN would you use it, I'd say one of the most important points that any front-end developer should take into account is that we should only use GET for idempotent requests, it means requests that don't make significant changes in the backend system or database but if you do need to make inserts, updates or deletes in a database, trigger emails or any other major action, POST is recommended.

The workflow of a modern front-end developer has changed vastly in the past four or five years. A huge array of tools are available to build organized, scalable web applications by abstracting out many of the complexities and automating repetitive tasks. Each developer will share a different workflow which will give some insight into their organizational capacity and general technical preferences.

null is an object that has no value. undefined is a type.

Anonymous functions are functions without a name. They are stored in a variable and are automatically invoked (called) using the variable name.


var x = function(a, b) {
console.log(a * b)
}

x(3, 5); // 15

stringify is used to transform JSON into a string.

When you interview a whole group of developers, you’ll notice that the ones who work on side projects on their own tend to be special. These are the coders who love what they do and do it without any capitalist incentives.

The answer to this question can also give you some insight into their leadership and project management qualities. If the developer is leading a multi-team project in their spare time, it can give you an idea about their character.

Although these questions aren’t very technical in nature, they can help you get a good idea about the candidate’s abilities.

JavaScript is read line by line. Sometimes, this can result in what seems like a subsequent line of code being executed prior to an earlier line of code. A callback function is used to prevent this from happening, because it is not called until the previous line of code has fully executed.

Here are two decent resources on callbacks with JavaScript and jQuery.

Jasmine and QUnit are JavaScript testing frameworks. I would familiarize yourself with the basics.

MVC stands for Model View Controller. MVCs typically organise web applications into a well-structured pattern, making code easier to maintain. The term is well-known by developers and some famous examples of MVCs include Backbone.js and AngularJS. What makes this question interesting is not whether the interviewee has used a MVC, but what his or her preferences and experience reveal. Candidates who are able to articulate why they use one MVC over another, show that they are engaged in what they do, care about the technology they use, and have considered different options. You want to be able to trust your front end developer to keep up to date with new relevant technologies and have a clear idea of when and what should be used.

Every web project starts with everything neat, all CSS is organized in blocks or different CSS files and you know where everything is, right?
Right, until your project gets bigger, deadlines get tight, more developers come on board and someday you notice a strange behavior in some elements of the page. When you inspect their styles you spot lots of css overrides coming from everywhere. This is the moment you realize how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of code in your stylesheets. This is possible because Sass works with variables, nested syntax and mathematical operations.
In my opinion one of the nicest features of sass is the possibility to write a selector just once and put all styles for that inside it. Do you need a more specific selector under an existing one? Just nest the specifics into the generic one.

Check out the example below taken from their official website. It's awesome how it can "neatify" your code.

/* .sass */
table.hl
margin: 2em 0
td.ln
text-align: right

li
font:
family: serif
weight: bold
size: 1.2em
/* .css */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}

li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}

As the UI gets more and more complex we need some good ways to keep it more and more maintainable and reusable, and Some MVC frameworks for javascript have been widely adopted lately and it's a good plus if you have already used before and knows what's the benefits of them. The most famous MVC frameworks are backbone.js and angular.js, it's hard to not hear about them.

There are many advantages in using these frameworks, I can point out some of them:

☛ Organization: Forces your webapp to follow a well structured pattern;

☛ Maintainable: With organization comes an easy to maintain code;

☛ UI Binding: Some frameworks allow you to do that. So everytime your model changes, the view reflects it and vice-versa;

☛ Decoupled client: MVC frameworks like backbone.js incentivise you to use REST API's though their urlRoot attribute in their Models;

☛ Reusable components: Create reusable visual components;

☛ Single-page apps: Build single-page apps with Ajax requests;

☛ Friendly URL's: Native support for client-side url mapping;

In javascript there's no classes like in Java, what we actually call a class is in reality a function simulating a class behaviour. For being so flexible, there are many ways to create a class in javascript, below you'll find 3 ways of doing that.

Class using function as a constructor:
function Person(name) {
this.name = name;
}
// Creating an object
var person = new Person("Hussain");
person.name; // "Hussain"
It's very important to notice that you have to use the keyword new when creating a new instance of that class otherwise you will have logical problems regarding the this will reference window object.

Class Literal notation:
var person = {
name: "",
setName: function(name) {
this.name = name;
}
}
person.setName("Hussain");
person.name; // "Hussain"
In this example we don't use a function to define our class, we are creating a singleton object person with one attribute and one method. You can use that object straightaway, no instantiation in this case.
That notation is useful when you don't need to create instances of that class or you'll use it just once in your application.

Singleton through a function:
var person = new function() {
this.setName = function(name) {
this.name = name;
}
this.sayHi = function() {
return "Hi, my name is " + this.name;
}
}
person.setName("Hussain");
alert(person.sayHi()); // Hi, my name is Hussain
As you can see in the code snippet above, we have a function like the first example and besides we also have the new keyword before the function declaration. It means that we are creating one instance of that class at the same time we are declaring it.

Functions in CoffeeScript is an (Optional) list of parameters followed by an arrow and then the function body.

For example, log = (message) à console.log message

☛ CoffeeScript allows you to express your program with a lot less code than JavaScript
☛ It has a lot of lightweight add-ons like Ruby string Interpolation and Python style list comprehension
☛ Makes everyday tasks easier to perform with CoffeScript rather than JavaScript

The skills required for the Front End Developer includes

☛ HTML
☛ CSS
☛ JavaScript
☛ JQuery

Additional Skills:
Some additional skills that might be helpful will be

☛ Knowledge of cross browser testing
☛ Knowledge of CMS like WordPress, Joomla or Drupal
☛ Knowledge of PHP and OOP’s ( object oriented programming)
☛ Knowledge of SEO, and tools like Flash and Dreamweaver

AngularJS is an open-source JavaScript system grew by Google. It helps you to make (SPA)single-page applications or one-page web applications that just require HTML, CSS, and JavaScript on the client side. In light of MV-* design, it allows us to build very much organized, effortlessly testable, and viable front-end applications. AngularJS has adapted the best approach to web advancement.
Through it we can easily bind model data to html element, build dynamic html element, make logical decision and do both accept or send data through RESTful API.Advanced AngularJs Interview Questions and Answers

Although all this think can be done through JQuery but with AngularJS we can do all those stuff structurally. That is we can maintain a development structure which required for enterprise web application development, for example, we can extend html’s syntax and build re-useable custom component.

There is no question, JavaScript systems like AngularJS, Ember and so on are the eventual fate of web development.

AngularJS Key Features:
☛ Two way data binding: It allows us to bind data dynamically to html element that come from application’s back-end and also synchronized html element’s data value with front-end model at run-time i.e. it provide the feature of two way data binding.
☛ Directive: It allows us to build re-useable custom directives. Which can save lot of time when we build large scale web application. Also it provide lots of built-in directive out of the box such as ng-repeat, ng-if, ng-model, etc. So that we can easily build single page web application.
☛ Web-Service: It provide built in support for building restful and soap web service.
☛ Model-View-Controller: It support concept of mode-view-controller of modern web application developed. Through $scope provider we can make model which can be blinded to the View (HTML), and through function and restful-service ($resource, $http, etc.) we can build controller in AngularJS.
☛ Routing Service: It provide built-in routing facilities through $routeProvider service.
☛ Dependency Injection: It support the concept of dependency injection like J2EE web app and Spring framework.
☛ Security: We can easily implements front-end resource access controlling mechanism through various out of box component of this framework.
☛ Filter: It provide various built-in filter to convert data to desired format for view purpose such as currency, date, lowercase, uppercase, etc.

Use the ng-switch and ng-switch-when directives as shown below.

<div ng-switch on="account.status">
<div ng-switch-when="AMBER">
<img class="statusIcon"
src='apps/dashboard/amber-dot.jpg' />
</div>
<div ng-switch-when="GREEN">
<img class="statusIcon"
src='apps/dashboard/green-dot.jpg' />
</div>
<div ng-switch-when="RED">
<img class="statusIcon"
src='apps/dashboard/red-dot.jpg' />
</div>
</div>

Like any other technology, AngularJS is not impervious to attack. Angular does, however, provide built-in protection from basic security holes including cross-site scripting and HTML injection attacks. AngularJS does round-trip escaping on all strings for you and even offers XSRF protection for server-side communication.

AngularJS was designed to be compatible with other security measures like Content Security Policy (CSP), HTTPS (SSL/TLS) and server-side authentication and authorization that greatly reduce the possible attack vectors and we highly recommended their use.