Front End Developer (AngularJS)

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.

Scope

The job of the Scope is to detect changes to model objects and create an execution context for expressions. There is one root scope for the application (ng-app) with hierarchical children scopes. It marshals the model to the view and forwards events to the controller.

Controller

The Controller is responsible for construction of the model and connects it to the view (HTML). The scope sits between the controller and the view. Controllers should be straightforward and simply contain the business logic needed for a view. Generally you want thin controllers and rich services. Controllers can be nested and handle inheritance. The big difference in AngularJS from the other JavaScript frameworks is there is no DOM manipulation in controllers. It is something to unlearn when developing in AngularJS.

Model

In AngularJS, a Model is simply a JavaScript object. No need to extend anything or create any structure. This allows for nested models - something that Backbone doesn’t do out-of-the-box.

View

The View is based on DOM objects, not on strings. The view is the HTML. HTML is declarative – well suited for UI design. The View should not contain any functional behavior. The flexibility here is to allow for multiple views per Controller.

Services

The Services in AngularJS are singletons that perform common tasks for web applications. If you need to share common functionality between Controllers, then use Services. Built-in AngularJS, Services start with a $. There are several ways to build a service: Service API, Factory API, or the $provide API.

Data Binding

Data Binding in AngularJS is a two-way binding between the View and the Model. Automatic synchronizing between views and data models makes this really easy (and straightforward) to use. Updating the model is reflected in View without any explicit JavaScript code to bind them together, or to add event listeners to reflect data changes.

Directives

Now this is cool. AngularJS allows you to use Directives to transform the DOM or to create new behavior. A directive allows you to extend the HTML vocabulary in a declarative fashion. The ‘ng’ prefix stands for built-in AngularJS directives. The App (ng-app), Model (ng-model), the Controller (ng-controller), etc. are built into the framework. AngularJS allows for building your own directives. Building directives is not extremely difficult, but not easy either. There are different things that can be done with them. Please check out AngularJS’s documentation on directives.

Filters

The Filters in AngularJS perform data transformation. They can be used to do formatting (like I did in my Directives example with padding zeros), or they can be used to do filter results (think search).

Validation

AngularJS has some built-in validation around HTML5 input variables (text, number, URL, email, radio, checkbox) and some directives (required, pattern, minlength, maxlength, min, max). If you want to create your own validation, it is just as simple as creating a directive to perform your validation.

Testable

Testing is a big concern for enterprise applications. There are several different ways to write and run tests against JavaScript code, thus against AngularJS. The developers at AngularJS advocate using Jasmine tests ran using Testacular. I have found this method of testing very straightforward and, while writing tests may not be the most enjoyable, it is just as importable as any other piece of developing an application.

The following pattern is the one that I personally prefer and is called 'module pattern', where we separate our javascript into logical modules, or namespaces. What you'll see below is an example of how I would separate my user module.

// Declaring my main namespace

var myapplication = myapplication || {};

// Declaring modules usermodule

myapplication.usermodule = (function() {

// createMessage: only accessible inside this module

var createMessage = function(message) {

return "Hello! " + message;

}

return {

// sayHello is a public method

sayHello: function(message) {

return createMessage(message);

}

}

})();

// Declaring another module

myapplication.adminmodule = (function(){

// your code here

})()

// This is how we call sayHello

myapplication.usermodule.sayHello("This is my module");

Some explanation on the code above

Take a look at the previous code and notice how I create my module using the notation below. It makes the function to be executed immediately because of the parenthesis at the end of the command. The result of the execution will be an object which will be set to my variable myapplication.usermodule.

...

myapplication.usermodule = (function() {

// code to be executed immediately

})();

So applying this pattern to your code you may have multiple modules and you have the control over what you want to make public and what to keep private. Besides your code will be more organized therefore easy to maintain.

There is no definitive answer to the question, but it will give a front end developer the chance to evaluate their own experience and also reveal their expectations. To a certain extent the difference between UI/UX and front end development is the difference between design and implementation. UI/UX tends to look more at the human-side of the design process, including undertaking research by asking the questions about how users interact with a website, which would then form the basis for design concepts. A UI/UX designer would also do testing and evaluation post-implementation. Understanding the front end needs of your own company before asking this question gives an insight into the candidate’s potential fit.

MVC stands for model view controller. MVCs typically organize webapps 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 angular.js. What makes this question interesting is not whether the frontend interviewee has used an 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 and have considered different options. You want to be able to trust your frontend developer to keep up to date with which technologies are relevant and have a clear idea of when and what should be used.

XHTML is an HTML that follows the XML rules, which means a XHTML document must have well-formed markups in order to be rendered properly in all web browsers. Differently from XHTML, the HTML document can be rendered in most of the browsers even with markup errors such as no closing tags or wrong nested tags.

And how do I create a XHTML document?

XHTML is basically a HTML document with some rules that need to be applied. Have a look at these examples below and spot the differences.

<head>

<title>This is head</title>

</head>

<BODY>

This is the body of the document with body tag in capital letters

Notice that there's no close body tag and no tag as well.

This HTML document above can be opened with no problems in Chrome, even containing many markup errors because most browsers can fix them for you automatically.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

</body>

</html>

The code above is a well-formed XHTML document and that's the minimum you must have in order to render it. Notice the declaration of the doctype at the top of the document and the namespace (xmlns) attribute in html open tag. These elements are mandatory as well as all the tags in lowercase.

Mode-View-Controller (MVC) is a design pattern. It can be represented in AngularJS framework as follow:

Model: Model in AngularJS is just a JavaScript object which contains properties either primitive such as string, integer, Boolean, array or complex type object. Its main responsibility to hold data that come from controller or service. Some time it also contains business logic which related to view.

View: It’s just a plain HTML page with embedded AngularJS directives and expression. In AngularJS we mainly represent model data through view.

Controller: It’s a JavaScript function which main responsibility to bind model data to view and vise-versa. It can also contains business logic through which it determine which model goes to which view. Controller also responsible for bind model data that come http request or other services.