AngularJS Developer

  Home  Client Side Scripting  AngularJS Developer


“AngularJS Developer related Frequently Asked Questions by expert members with job experience as AngularJS Developer. These questions and answers will help you strengthen your technical skills, prepare for the new job interview and quickly revise your concepts”



125 AngularJS Developer Questions And Answers

61⟩ Tell me how does the digest phase work?

In a nutshell, on every digest cycle all scope models are compared against their previous values. That is dirty checking. If change is detected, the watches set on that model are fired. Then another digest cycle executes, and so on until all models are stable.

It is probably important to mention that there is no “.$digest()” polling. That means that every time it is being called deliberately. As long as core directives are used, we don’t need to worry, but when external code changes models the digest cycle needs to be called manually. Usually to do that, “.$apply()” or similar is used, and not “.$digest()” directly.

 185 views

62⟩ Explain me how AngularJS integrates with HTML?

AngularJS being a pure javaScript based library integrates easily with HTML.

Step 1 − Include angularjs javascript libray in the html page

<head>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

Step 2 − Point to AngularJS app

Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:

<body ng-app = "myapp">

</body>

 163 views

63⟩ Explain 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

 204 views

64⟩ Tell me when a scope is terminated, two similar “destroy” events are fired. What are they used for, and why are there two?

The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.

Consider the two below happening in a directive’s postLink function. The AngularJS event:

scope.$on(‘$destroy’, function () {

// handle the destroy, i.e. clean up.

});

And

element.on(‘$destroy’, function () {

// respectful jQuery plugins already have this handler.

// angular.element(document.body).off(‘someCustomEvent’);

});

The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.

 197 views

66⟩ Explain me how to validate data in AngularJS?

AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in seamless way. Use novalidate with a form declaration to disable any browser specific validation.

☛ Following can be used to track error.

☛ $dirty − states that value has been changed.

☛ $invalid − states that value entered is invalid.

☛ $error − states the exact error.

 179 views

68⟩ Tell me what Are The Web Application Security Risks That A Web Developer Should Avoid While Doing Development Using AngularJS?

Following are the most critical web application development flaws that a developer should take care of:

☛ Injection attack.

☛ Broken Authentication and Session Management.

☛ Cross-Site Scripting (XSS)

☛ Insecure direct object references.

☛ Security misconfiguration.

☛ Sensitive Data Exposure.

☛ Missing Functions Level Access Control.

☛ Cross Site Request Forgery (CSRF).

☛ Using components that possess vulnerabilities.

☛ In-validated redirects and forwards.

 189 views

69⟩ Tell me 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()

☛ Why should one know about AngularJS Services, you may ask. Well, understanding the purpose of AngularJS Services helps bring modularity to AngularJS code.

☛ Services are the best may to evolve reusable API within and AngularJS app

 194 views

70⟩ What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window

Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError

No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression

Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it

 176 views

71⟩ Explain me what is data binding in AngularJS? How does it relate to the MVC architecture?

In most templating systems, data binding is unidirectional. When the model and template components are merged together, it creates a view. However, the developer must write code to constantly synchronize the model and the view. AngularJS uses two-way data binding, where any changes to the view will automatically update the model and vice versa. The view is more or less just a projection of the model, which greatly simplifies things from the programmer’s perspective.

 171 views

72⟩ 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

 195 views

73⟩ Please 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

 163 views

75⟩ Tell me the Steps Involved In The Boot Process For AngularJS?

Whenever a web page loads in the browser, following steps execute in the background.

☛ First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript file mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which displays the controller functions gets executed.

☛ In this step, AngularJS browses the complete HTML code to locate the views. If a view is found, it is linked it to the corresponding controller function.

☛ In this step, AngularJS initiates the execution of required controller functions. Next, it populates the views with data from the model identified by the controller. With this the page is ready.

 174 views

76⟩ Tell me what are the advantages of using Angular.js framework?

Angular.js framework has the following advantages:

☛ Supports two way data-binding

☛ 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

 172 views

77⟩ Tell me 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 AngularJS 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 AngularJS module.

Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value

 179 views

78⟩ What is ng-show directive?

ng-show directive shows a given control.

In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.

<input type = "checkbox" ng-model = "showHide1">Show Button

<button ng-show = "showHide1">Click Me!</button>

 172 views

79⟩ Explain me what is provider?

provider is used by AngularJS internally to create services, factory etc. during config phase(phase during which AngularJS bootstraps itself). Below mention script can be used to create MathService that we've created earlier. Provider is a special factory method with a method get() which is used to return the value/service/factory.

//define a module

var mainApp = angular.module("mainApp", []);

...

//create a service using provider which defines a method square to return square of a number.

mainApp.config(function($provide) {

$provide.provider('MathService', function() {

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

});

 170 views

80⟩ Tell me 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.

 194 views