ANGULARJS INTERVIEW QUESTIONS
Explain what is a $scope in AngularJS
Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Scopes are objects that refer to the model. They act as glue between controller and view.
This question is important as it will judge a persons knowledge about a $scope object, and it is one of the most important concepts in AngularJS. Scope acts like a bridge between view and model.
Explain Angular JS boot process?
When the page is loaded in the browser, following things happen:
HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.
Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.
What is MVC ?
Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts:
Model - It is the lowest level of the pattern responsible for maintaining data.
View - It is responsible for displaying all or a portion of the data to the user.
Controller - It is a software Code that controls the interactions between the Model and View.
How do you share data between controllers?
Using a service is the cleanest, fastest and easiest way to test.
However, there are couple of other ways to implement data sharing between controllers, like:
– Using events
– Using $parent, nextSibling, controllerAs, etc. to directly access the controllers
– Using the $rootScope to add the data on (not a good practice)
What is the difference between ng-show/ng-hide and ng-if directives?
ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.
ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.
We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.
What is a digest cycle in AngularJS?
In each digest cycle Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.
Some people think initially, that Angular has a kind of poll mechanism that checks every few milliseconds if something on the model changed so it can update the view accordingly. This is not true.
There are basically three possible cases when the state of an application can change and these are the only moments where $digest cycles are needed. The case are:
User Interaction through events - The user clicks UI controls like buttons and in turn triggers something in our application that changes state.
XMLHttpRequests - Also known as AJAX. Something in our app requests some data from a server and update model data accordingly.
Timeouts - Asynchronous operations cause through timers that can possibly change the state of our application
Where should we implement the DOM manipulation in AngularJS?
In the directives. DOM Manipulations should not exist in controllers, services or anywhere else but in directives.
Is it a good or bad practice to use AngularJS together with jQuery?
It is definitely a bad practice. We need to stay away from jQuery and try to realize the solution with an AngularJS approach. jQuery takes a traditional imperative approach to manipulating the DOM, and in an imperative approach, it is up to the programmer to express the individual steps leading up to the desired outcome.
AngularJS, however, takes a declarative approach to DOM manipulation. Here, instead of worrying about all of the step by step details regarding how to do the desired outcome, we are just declaring what we want and AngularJS worries about the rest, taking care of everything for us.
How would you specify that a scope variable should have one-time binding only?
By using “::” in front of it. This allows the check if the candidate is aware of the available variable bindings in AngularJS.
What is the difference between one-way binding and two-way binding?
– One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value
Explain how $scope.$apply() works
$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)
Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values
What makes the angular.copy() method so powerful?
It creates a deep copy of the variable.
A deep copy of a variable means it doesn’t point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well
How would you make an Angular service return a promise?
What is the role of services in AngularJS and name any services made available by default?
AngularJS Services are objects that provide separation of concerns to an AngularJS app.
– AngularJS Services can be created using a factory method or a service method.
– Services are singleton components. All components of the application (into which the service is injected) will work with single instance of the service.
– An AngularJS service allows developing of business logic without depending on the View logic which will work with it.
Few of the inbuilt services in AngularJS are:
– the $http service: The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP
– the $log service: Simple service for logging. Default implementation safely writes the message into the browser’s console
– the $anchorScroll: it scrolls to the element related to the specified hash or (if omitted) to the current value of $location.hash()
AngularJS Services help create reusable components.
A Service can be created either using the service() method or the factory() method.
A typical service can be injected into another service or into an AngularJS Controller.
What are Directives?
Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
This question is important because directives define the UI while defining a single page app. You need to be very clear about how to create a new custom directive or use the existing ones already pre-build in AngularJS.
When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?
When you create a directive, it can be used as an attribute, element or class name. To define which way to use, you need to set the restrict option in your directive declaration.
The restrict option is typically set to:
‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name
‘M’ - only matches comment
These restrictions can all be combined as needed:
‘AEC’ – matches either attribute or element or class name
Also JAVASCRIPT QUESTION
How Browser Works, what happens, exactly?
When you type a web address into your browser (for our analogy that's like walking to the shop):
The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).
The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.
Provided the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).
The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).
What is ReST services?
Representational State Transfer (REST) is an architectural style that specifies constraints, such as the uniform interface, that if applied to a web service induce desirable properties, such as performance, scalability, and modifiability, that enableservices to work best on the Web.
What is a ReST end point?
In REST, the resource typically refers to some object or set of objects that are exposed at an API endpoint. /api/users/johnny. An endpoint by itself is just a reference to a uri that accepts web requests that may or may not be RESTful. /services/service.asmx
What is the ReST protocol?
REST stands for Representational State Transfer. (It is sometimes spelled "ReST".) It relies on a stateless, client-server, cacheable communications protocol -- and in virtually all cases, the HTTP protocol is used. REST is an architecture style for designing networked applications.
What is meant by the term “RESTful API”?
Conforming to the REST constraints is generally referred to as being “RESTful”
An API can be considered “RESTful” if it has the following features (not a complete list just the main ones):
Client–server – The client handles the front end the server handles the backend and can both be replaced independently of each other.
Stateless – No client data is stored on the server between requests and session state is stored on the client.
Cacheable – Clients can cache response (just like browsers caching static elements of a web page) to improve performance.
Complying with these constraints, and thus conforming to the REST architectural style enables any kind of distributed hypermedia system to have desirable emergent properties, such as performance, scalability, simplicity, modifiability, visibility, portability, and reliability. A common trend I have seen is to use absolute urls for RESTful APIs which are meaningful.
What Are Cookies? What is a Cookie?
Cookies are small files which are stored on a user's computer. They are designed to hold a modest amount of data specific to a particular client and website, and can be accessed either by the web server or the client computer. This allows the server to deliver a page tailored to a particular user, or the page itself can contain some script which is aware of the data in the cookie and so is able to carry information from one visit to the website (or related site) to the next.
What's in a Cookie?
Each cookie is effectively a small lookup table containing pairs of (key, data) values - for example (firstname, John) (lastname, Smith). Once the cookie has been read by the code on the server or client computer, the data can be retrieved and used to customise the web page appropriately.
Why are Cookies Used?
Cookies are a convenient way to carry information from one session on a website to another, or between sessions on related websites, without having to burden a server machine with massive amounts of data storage. Storing the data on the server without using cookies would also be problematic because it would be difficult to retrieve a particular user's information without requiring a login on each visit to the website.
If there is a large amount of information to store, then a cookie can simply be used as a means to identify a given user so that further related information can be looked up on a server-side database. For example the first time a user visits a site they may choose a username which is stored in the cookie, and then provide data such as password, name, address, preferred font size, page layout, etc. - this information would all be stored on the database using the username as a key. Subsequently when the site is revisited the server will read the cookie to find the username, and then retrieve all the user's information from the database without it having to be re-entered.
Who Can Access Cookies?
When a cookie is created it is possible to control its visibility by setting its 'root domain'. It will then be accessible to any URL belonging to that root. For example the root could be set to "What is a Cookie" and the cookie would then be available to sites in "What is a Cookie" or "What is a Cookie" or "What is a Cookie". This might be used to allow related pages to 'communicate' with each other. It is not possible to set the root domain to 'top level' domains such as '.com' or '.http://co.uk' since this would allow widespread access to the cookie.
By default cookies are visible to all paths in their domains, but at the time of creation they can be retricted to a given subpath - for example "http://www.whatarecookies.com/im...".
HTTP (HyperText Transfer Protocol)
HTTP is a stateless protocol. That means, It doesn’t contain any information regarding the client.
It works as a request-response protocol in the client-side computing model.
As it’s an Application Layer Protocol within the Framework Internet Protocol Suite, needs a Transfer Layer Protocol (usuallyTransmission Control Protocol) for data transmission.
It carries request from Client-side (web browser) to the web server, known as HTTP Request. And again the response from the web-server to the browser, known as HTTP Response.
HTTP Request:
· HTTP Request means transferring a request form the client side to the server.
· It contains different types of HTTP Request Methods, which are used to indicate the type of the request.
· It has URI which locate the destination.
· It also has Protocol Version (Example: HTTP/1.1)
· Then comes the Request Header, which contains information regarding the
client environment like, Accept-Charset, Accept-Encoding, Authorization,etc.
· Then there is a Message Body section, which contains actual information regarding the request.
HTTP Response:
· HTTP Response means transferring a response of the client’s request by the web server.
· First it contains the protocol name, its version, status code of the request, and a brief description of the status code.
· Then it contains Response Header, which contain the information
of the server side environment.
· After that it has, Message Body, which contain the actual response for the client.
Hope you find it useful, I know too much long answer, but there are questions with Answers as well.
Meet The Experts : https://nareshit.com/angularjs-online-training/
Top comments (0)