Tuesday, 16 February 2021

Top 20 AngularJS Interview Questions

 

Ques. 1): What is Angular JS ?

Answer: AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don’t need any other dependencies to make it work.AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.AngularJS handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

 

Ques. 2): What are the advantages of the AngularJS framework?

Answer: The AngularJS framework offers many advantages for web development like:

        It supports MVC pattern

        It supports animations along with client-server communication

        It provides two-way data binding that is not possible in other cases.

        It supports angular and static template

        It supports dependency injection

        It supports full rest services

        It applies animations

        It offers to add custom directives

        It supports event Handlers

 

Ques. 3): Please explain the difference between Angular and AngularJS?

Answer: The differences between Angular and AngularJS are stated as follows:

      Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead

      Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI

      Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively

      Mobile Support - AngularJS doesn’t have mobile support while Angular does have

      Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular

      Routing - For routing, AngularJS uses $routeprovider. when() whereas Angular uses @RouteConfig{(…)}

      Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features

      Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure

      Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

 

Ques. 4): What is the Template, scope and controller in AngularJS ?

Answer:

Template: The template is the HTML portion of the angular app. It is exactly like a static HTML page, except that templates contain additional syntax which allows data to be injected in it in order to provide a customized user experience.

Scope: The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

Controller: The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.

 

Ques. 5): Could we make an angular application to render on the server-side?

Answer: Yes, we can, with Angular Universal, a technology provided by Angular capable of rendering applications on the server-side.

The benefits of using Angular Universal are:

    Better User Experience: Allows users to see the view of the application instantly.

    Better SEO: Universal ensures that the content is available on every search engine leading to better SEO.

    Loads Faster: Render pages are available to the browsers sooner, so the server-side application loads faster.

 

Ques. 6): How do you share data between controllers in AngularJs?

Answer: We can share data by creating a service, Services are the easiest, fastest, and cleaner way to share data between controllers in AngularJs. There are also other ways to share data between controllers, they are

        Using Events

        $parent, nextSibling, controllerAs

        Using the $rootScope

 

Ques. 7): Difference between SessionStorage, Cookies, and LocalStorage

Answer:

SessionStorage: In session storage, data stored in a specific session, and it will be lost in a case the browser tab closed for a particular time or session. In session storage, it stores 5MB maximum size of data.

Cookies: Cookies help to store that data that needs to send back to the server by request. The usage of cookies relies on the duration and typeset from either the client-side or the server size. In cookies, it stores 4MB, the maximum size of data.

LocalStorage: In local storage, there is no expiration date for storing of data. In this case, it is possible to clear the data only either with JavaScript or the browser cache. In local storage, it stores the maximum size of data as compared to session storage and cookies.

 

Ques. 8): Explain Dependency Injection?

Answer:  Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular.

Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

 

Ques. 9): What is the SPA (Single page application) in AngularJs?

Answer: Single page application is a web application that used to load a single HTML page. It also helps to update the page to make the users connect with the application. With the help of HTML and AJAX, it is possible by the SPA to create responsively, and fluid web app without entertaining invariant page reloads. In this way, one can able to make responsive UI without taking the assistance of page flicker.

 

Ques. 10): Difference between AngularJS and JavaScript Expressions?

Answer: Below are some major difference between AngularJS and JavaScript Expressions

    Both can contain literals, operators, and variables.

    AngularJS expressions can be written in HTML but JavaScript expressions are not.

    AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

    AngularJS expressions support filters, while JavaScript expressions do not.

 

Ques. 11): What is the AOT (Ahead-Of-Time) Compilation? What are its advantages?

Answer:  An angular application consists of components and templates which a browser cannot understand. Therefore, every Angular application needs to be compiled before running inside the browser. The Angular compiler takes in the JS code, compiles it, and then produces some JS code. It is known as AOT compilation and happens only once per occasion per user.

There are two kinds of compilation that Angular provides:

JIT(Just-in-Time) compilation: the application compiles inside the browser during runtime

AOT(Ahead-of-Time) compilation: the application compiles during the build time.

Advantages of AOT compilation:

      Fast Rendering: The browser loads the executable code and renders it immediately as the application is compiled before running inside the browser.

      Fewer Ajax Requests: The compiler sends the external HTML and CSS files along with the application, eliminating AJAX requests for those source files.

      Minimizing Errors: Easy to detect and handle errors during the building phase.

      Better Security: Before an application runs inside the browser, the AOT compiler adds HTML and templates into the JS files, so there are no extra HTML files to be read, thus providing better security for the application.

 

Ques. 12): What is the ng-App directive in AngularJs?

Answer: The ng-App directive in AngularJs is used to specify the AngularJs Application. It is used to call the root element of an AngularJs app. Also, it can be stored near <body> or <html> tag. It is possible to show any number of ng-app directives in the HTML document. However, it is possible to bootstrap only one application automatically. Moreover, the other applications are needed to bootstrap manually.

For Example:

//<div ng-app=””>

<p>My first expression: {{178 + 133}} </p>

</div>//

 

Ques. 13): What is the difference between one-way binding and two-way binding in AngularJS ?

Answer: In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.

ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

 

Ques. 14): Explain Angular Authentication and Authorization.

Answer: The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.

Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

 

Ques. 15): What is dependency injection In AngularJs and how does it work?

Answer: AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.

 

Ques. 16): How to enable HTML5 mode in Angular 1.x?

Answer: html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.

angular.module('myApp', [])

    .config(function($routeProvider, $locationProvider) {

        $routeProvider

            .when('/', {

                templateUrl : 'partials/home.html',

                controller : mainController

            })

        // use the HTML5 History API

        $locationProvider.html5Mode(true);

    });

 

Ques. 17): How to access parent scope from child controller in AngularJS ?

Answer: In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.

Example:

<div ng-controller="ParentCtrl">

    <h1>{{ name }}</h1>

    <p>{{ address }}</p>

    <div ng-controller="ChildCtrl">

        <h1>{{ title }}</h1>

        <input type="text" ng-model="$parent.address" />

</div>

 

Ques. 18): Explain all the steps to configure an Angular App (ng-app)

 Answer: There are specific points that need to consider to configure an Angular app:

      First of all, the Angular module should be created

      Then, a controller is assigned to the module

      After that, the module is get linked with the HTML template by the assistance of the Angular App.

      Finally, the HTML template will get linked to the controller with an ng-controller directive.

 

Ques. 19): What is a Mocked Service in AngularJs? How to use it?

Answer: It is the most common type of dependency on AngularJS application. A service can be mocked in two ways by either getting an instance of actual service using an inject block or by implementing a mock service using $provide.

 

Ques. 20): What do you mean by ng-include and ng-click directives in AngularJs?

Answer: The term ng-include is needed to add distinct files on the main page while the ng-include directive adds HTML from an external file. The added content will be considered as child nodes of the particular element. Moreover, the added file should be placed on the similar domain like the document such as <div ng-include=”‘myFile.htm'”></div>. Moreover, ng-click is used in the case when we need to click on a bottom or when there is a need to perform an operation. The main purpose of it conveys AngularJs how to behave in case an HTML element is clicked. For example: //<button ng-click=”count = count + 1″ ng-init=”count=0″>OK</button>//

The above-written code is used for hiking up the count variable by 1 when the button gets clicked.

 

 

 

Top 20 CSS (Cascading Style Sheets ) Interview Questions

 

Ques. 1): What is CSS?

Answer: CSS stands for Cascading Stylesheet. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to HTML documents or web pages. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

 

Ques. 2): What are the different types of CSS?

Answer: Below are the different types of CSS –

      Embedded – Adding the CSS styles in <style> attribute.

      Inline – Adding the CSS to the HTML elements.

      Linked/External – Adding the External CSS file to the HTML document.

 

Ques. 3): Explain the differences between CSS and CSS3.

Answer: Just like HTML5 is the latest standard rolled out for HTML, similarly, CSS3 is the latest standard rolled out for CSS3 that carries many advanced features and it was under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities.

CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise. Some of these are listed below.

1.       Mobile-first mentality

2.       Modular code

3.       Support for web fonts

4.       Faster development and load times

5.       New Color and Images Effects

6.       Bug fixes and improvements

 

Ques. 4): How is a CSS file included or referred to in an HTML document?

Answer: An HTML document can include an external stylesheet using the <link> tag. Here is an example,

<link rel="stylesheet" type="text/css" href="theme.css">

In the above snippet, the rel attribute specifies the relation between the HTML document and the file linked. Here the value stylesheet means that the refered file is a stylesheet for the HTML document. The type attribute also does the same thing. Finally, the href attribute defines the path to the actual file on the server. Here the filename is theme.css and the path is relative to the current HTML document.

 

Ques. 5): What are CSS custom properties?

Answer: CSS variables or custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation. For example,

--main-color: black;

And are accessed using the var() function. For example,

color: var(--main-color);

You can use them without the need of a preprocessor. They cascade. You can set a variable inside any selector to set or override its current value. When their values change (e.g. media query or other state), the browser repaints as needed. You can access and manipulate them in JavaScript.

 

Ques. 6): What is inline CSS?

Answer: Inline CSS allows us to add CSS styles to only a particular element in the DOM. These CSS styles only affect the element that they are defined on in the HTML document. The term inline comes from the fact that the styles are written directly within the HTML tag using the style attribute.

Using the style attribute overrides the styles applied by all other CSS files on the same element. Inline CSS styles take precedence over all other styles at the cost of making the HTML document difficult to read and harder to maintain. An example of inline CSS is

<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

In the above example, using the style attribute, some styles are specified on the h1 element but it makes the document dirty. These styles will only affect this h1 element only and all other h1 elements will stay the way they are.

 

Ques. 7): How does absolute positioning work in CSS?

Answer: In absolute positioning, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

 

Ques. 8): List out some of the properties in added in CSS3?

Answer: Below are the some of the properties in CSS3-

        Border Images

        New Web fonts

        Multi Column layout

        Box Shadows

        Text Shadows

        Transform property

 

Ques. 9): How do you target something inside or around another element?

Answer: To target something that’s next to something else or target something only if it’s inside a particular container, there is a way.

If you’re wanting to style occurrences of a certain class inside another class, you can write the following:

.nav .nav-item { ... }

The above targets any .nav-item inside .nav.

If you only want those that are immediately inside the .nav as opposed to any level deep, you can add the > character, like so:

.nav > .nav-item { ... }

Want to target a button only if it’s next to another button? The + character has got you covered:

.button + .button { ... }

 

Ques. 10): What is the difference between “display:none” and “visibility:hidden” in CSS?

Answer:

    “Display:none” – This will just hide the element and does not take any space of the element.

    “visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document.

 

Ques. 11): What is a CSS selector?

Answer: A CSS selector allows us to select the required elements in an HTML document that need to be styled in a certain way. It is also referred to as a connection between the stylesheet and HTML files. There are different types of CSS selectors, however, the simplest ones are element, class and id selectors.

 

Ques. 12): What would be the difference between “width:auto” and “width:100%” in CSS?

Answer: “width:auto” reaches to the full width and it will subtract borders, paddings, margins etc. from the available space where as “width:100%” will force the element to be as wide as its parent element and will add additional spacing which can cause some problems.

 

Ques. 13): What are the advantages and disadvantages of using embedded stylesheets?

Answer: The advantages of Embedded Style Sheets are as follows.

    It is possible to generate classes for use on multiple tag types in the document.

    In comparison to In External Style Sheets, no extra download is compulsory to import the information.

    The disadvantages of Embedded Style Sheets are as follows.

    Controlling the styles for multiple files from one file is not possible.

 

Ques. 14): What is the exclamation (!) symbol used to in CSS?

Answer: The exclamation symbol (!) is generally used to denote a style as important. The styles that are marked as !important override the styles that are not. For example, if there are two CSS classes applied on the same element. Class A add a color red to the text but class B adds a green color. Now, generally, the style that is applied later will persist. But if either of the classes has the !important declaration will never be overridden by other styles.

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

 

Ques. 15): What is an ID selector?

Answer: ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit.

#abc123 {

color: red;

background: black

}

 

Ques. 16): How are attributes used to style HTML elements in CSS?

Answer: There are a few attributes that apply to all tags, like class and id, but a lot of tags have their own ones. For example, input tags can have a type (text, number, radio, etc) and a tags can have href.

You can target elements with particular attributes by using square brackets: [attribute="value"].

For example, you can target all input fields that are of type radio like so:

input[type="radio"] {

     background-color: #eee;

}

 

Ques. 17): What changes would you normally add to your print-stylesheet?

Answer: A print-stylesheet needs to make sure that the document looks clean and is easily readable when the document is printed. This requires some fanciness and beauty-elements to be taken away from the document to make it easier on the eyes when printed. Some most common things we do in a print-stylesheet are listed below.

Remove unwanted items - Usually it's just your organisation logo and page content that you'll want to appear on the printed version of the web page. You'll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details. You may also want to remove certain images and adverts, especially animated images as these won't make sense when printed.

Format the page - There's nothing worse than printing off a web page to find the last few words of each line cut off. It's also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you'll need are: width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper.

Change the font - It is personal preference, but some print stylesheets do change the font size (often to 12pt) but this isn't generally a very good idea. If users increase text size on the screen then the text will print in this larger font size... unless you specify a fixed font size in the print stylesheet.

Links - Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the printout.

 

Ques. 18): Explain the term “pseudo-class” in reference to CSS3.

Answer: Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class. Some of the pseudo classes are link, visited, hover, active, focus etc.

 

Ques. 19): What are web safe fonts and fallback fonts?

Answer: Not all operating systems and browsers have the same fonts installed. Web safe fonts are fonts that are commonly pre-installed on many computer systems, such as Arial and Times New Roman. In case the browser or operating system doesn’t recognize the first font you set (e.g. Ubuntu), you should choose a web safe fallback font to display (e.g. Arial), followed by a generic font family (e.g. sans-serif).

If your fallback font doesn’t display either, the browser can pick a generic font in the sans-serif family.

 

Ques. 20): What are pseudo classes and what are they used for?

Answer: Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.

Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.

They all start with a single colon and look like this:

.link:hover { ... }

.link:active { ... }

.tab:first-child { ... }

.tab:last-child { ... }

.avatar:nth-child(2n) { ... }