AngularJS Interview Questions

AngularJS Interview Questions

AngularJS Interview Questions

What is root directive? Can we use angularjs with out ng –app?

The root directive in Angular JS  is ng-app. We  declare this directive in the root element of the main html document(index.html)

  • ng-app is called root directive because the angular framework starts execution  of the application from  ng-app. And this  process is called Auto bootstrap`
  • We can run the angular application without ng-app  through manual bootstrap
  • Manual bootstrap: Execution of the Angular application forcefully with out ng-app is called  Manual bootstrap….
  • Sample code to run the application by using manual bootstrap i.e without using ng-app

<html>

<h1 style=”color:red”  ng-app=”app”  ng-bind=”var_one”></h1>

<h2   id=”myh2” ng-bind=”var_two”></h2>

</html>

Manualbootstrap.js

angular.element(document).ready(function(response){

angular.bootstrap(document.getElementById(“myh2”),[“app”]);

});

In the abovee code where there is ng-app scope that will be executed using auto bootstrap that is h1 element

And the h2 element executes using manual bootstrap

Note:  We have to include (load) the manualbootstrap.js file in the index.html file

Note:  We can use any number of ng-app in the application.. as the application is divided in to number of modules  so we can integrate every modules by creating one more new project each having a  ng-app  shown below

Example:

In app.js file

Var app = angular.module(“app”,[])

Here we can the add different  ng-apps of different modules


Attend Free Demo of Angular JS Online Training


What are the Features of AngularJS?

Angular js is a JavaScript framework to create Rich Internet Applications and the application written in Angular JS are cross browser compatible i.e., executes  on any major web browser.

The most important key features of the Angular JS are

  • Data-Binding: It is automatic data synchronization between model and view..
  • Scope: These are objects that refer to the model. They act as a glue between controller and view.
  • Controller: A controller is aJavaScript file which contains attributes/properties and functions. Each controller has scope as a parameter which refers to the application/module that controller is to control.
  • Services− AngularJS has several built-in services for example $https which is used to make requests using some url and fetch the required data. These services create the objects only once and this object is shared to all the controllers. So they are called singleton objects which are instantiated only once in app.
  • Filters− AngularJS provides filters to transform data

Example: currency Format a number to a currency format. date Format a date to a specified format. Filter Select a subset of items from an array. Json Format an object to a JSON string…

These select a subset of items from an array and return a new array

  • Directives− directives are markers on a DOM element (such as an attribute, element nameor CSS class) that tell AngularJS’s HTML compiler  to attach a specified behaviour to that DOM element

There are two types of directives they are

Pre -defined directives:  These are built in directives provided by the  angular frame work ex: ng-model, ng-bind, ng-repeat etc

Custom directives: creating our own directives based on application requirement called as custom directives

ex: my_directive…………….. custom directive

<my_directive></my_directive>………………….elementt level usage

<div my_directive></div> ……………………………attribute level usage

  • Templates− These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”
  • Routing− It is concept of switching views.   This concept is in question no :4
  • Deep Linking− Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
  • Dependency Injection− AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Dependencies for routing

Loading the Target Templates to the Source Templates without refreshing is called as Routing in Single Page Application

In AngularJs Routing can be done in two ways:

  • ngRoute Module
  • Router Module
  • ngRoute Module: The ngRoute Module routes  your application to different pages without reloading the entire application.
  • Router Module: TheUIRouter is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL ( i.e.  ngroute just route the url and ui router changes the view based on state of application)
  • Development of Single Page Application By Using ngRoute Module.
  • ngRoute is the Predefined Module in AngularJS
  • ngRoute is the Native Module in AngularJS

TO Download the ngRoute module by using bower.

bower.json-

dependencies:{

“angular”:”~1.5.0″,

“angular-route”:”~1.5.0″

}

TO Download the ui-router module by using bower

bower.json –

dependencies:{

“angular”:”~1.6.0″,

“angular-ui-router”:”~0.2.18″

}


What are the Differences Between ngRoute and ui.router module?

  • ngRoute module is “native module” in angularJS
  • var app = angular.module(“app”,[“ngRoute”]);
  • router module is the 3rd party module.
  • var app=angular.module(“app”,[“ui.router”]);
  • ngRoute won’t supports the Nested Views in Single Page Applications.
  • router supports the Nested Views in Single page Application.
  • ngRoute won’t supports the Named Views in Single Page Application.
  • router supports the Named Views in Single page Application.
  • ngRoute won’t Supports the “Objects passing” as URL Parameters
  • router supports the “Objects” as the URL Parameters
  • ngRoute in bower
  • angular-route:’~1.5.0′
  • router in bower
  • angular-ui-router:”~0.2.18″

 


Attend Free Demo of Angular JS Online Training


 

What is MVC?

MVC is a design pattern used to isolate business logic from presentation.

  • The MVC pattern has been given importance by many developers as a useful pattern for the reuse of object code and a pattern that allows them to reduce the time it takes to develop applications with user interfaces.
  • The Model-View-Controller (MVC)is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.

MVC Components

  • Model:The Model component corresponds to all the data related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic related data. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.
  • View:The View component is used for all the UI logic of the application. For example, the Customer view would include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.
  • Controller:Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller would handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller would be used to view the Customer data.

 


What is Ng-init  directive?

  • ng-init directive is used to intialize the application data Statically.
  • ng-init directive is used to define a local variable with value.
  • It is supported by all html elements.

Syntax:  <element ng-init=”expression”>                        </element>

Example:

<div ng-app=”app ”

ng-init=”name=’naresh it’ “>

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

</div>

Note: In this example we are giving   ‘name’ as local variable.


What are the Difference between $scope and  $rootscope?

  • $scope is a glue between controller and view.
  • $rootscope is a parent object of all $scope angular abjects created in a     web page.
  • $scope is created with ng-controller.   $rootscope is created with ng-app.
  • Each angular application has exactly one rootscope, but may have several    child scopes.
  • The s$cope will be available only inside the controller. But we can access $rootscope in all  the controllers.

What is Internationalization ?

Internationalization is the process of developing products in such a way that  they can be localized for languages and cultures easily. Localization (l10n), is the process of adapting applications and text to enable their usability in a particular cultural or linguistic market.

We implement internationalization in two ways i18n and l10n

 


Attend Free Demo of Angular JS Online Training


 

How to implement Internationalization in Angular Js?

To implement Internationalization in angularjs, the angular-translate is an AngularJS module.

  • That brings i18n (internationalization) and l10n (localization) into your Angular app.
  • It allows you to create a JSON file that represents translation data as per language.
  • The angular-translate library (angular-translate.js) also provides built-in directives and filters that make the process of internationalizing simple.
  • i18n and L10n

First we need to install:       

bower install angular-i18n

Example:

<html>

<head>

<title>Angular JS Forms</title>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app = “mainApp” ng-controller = “StudentController”>

{{fees | currency }}  <br/><br/>

{{admissiondate | date }}  <br/><br/>

{{rollno | number }}

</div>

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

<!– <script src = “https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js”></script> –>

<script>

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

mainApp.controller(‘StudentController’, function($scope) {

$scope.fees = 100;

$scope.admissiondate  = new Date();

$scope.rollno = 123.45;

});

</script>

</body>

</html>

Output:

AngularJS Sample Application

$100.00

Feb 27, 2017

123.45


Types of Data Binding in AngularJS?

The data binding is the data synchronization processes between the model and view components

In AngularJS  when model data got changed that time the view data will change automatically and vice versa.

We have two types of data bindings available in AngularJS those are

  1. One-Way data binding
  2. Two-Way data binding

One-Way Data Binding

  • In One-Waydata binding, view will  not update automatically when data model changed.
  • we need to write custom code to make it updated every time.
  • Its not a synchronization processes and it will process data in one.

Two-way Data Binding

In Two-way data binding, view updates automatically when data model changed.

  • Its synchronization processes and two way data binding.
  • This two-way data binding usingng-model
  • If we use ng-model directive in html control it will update value automatically whenever data got changed in input control.

 


Attend Free Demo of Angular JS Online Training


 

Example of One Way Data Binding in AngularJS?

 Following is the example of using one way data binding in AngularJS application.

<!DOCTYPE html>

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

<head>

<title>

AngularJs One way Binding Example

</title>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

<script type=”text/javascript”>

var app = angular.module(‘angularonebindapp’, []);

app.controller(‘angularonebindingCtrl’, function ($scope) {

$scope.name = ‘Welcome to one way binding’;

});

</script>

</head>

<body ng-app=”angularonebindapp”>

<div ng-controller=”angularonebindingCtrl”>

<p>

Message:   {{ name }}

</p>

</div>

</body>

</html>

Here if you observe above code we are binding model values to html elements using data bindings but html elements it won’t change the values in model its one way data binding. Now run application and see the output.

Output of AngularJS One-way Data Binding

Following is the output of AngularJS one way data binding

Message:  Welcome to one way binding


AngularJS Two-way Data Binding?

In Two-way data binding, view (UI part) updates automatically when data model changed. Its synchronization processes and two way data binding that will be like as shown following image. We can achieve this two-way data binding using ng-model directive. If we use ng-model directive in html control it will update value automatically whenever data got changed in input control.

 


Attend Free Demo of Angular JS Online Training


 

How Does Data Binding work in the AngularJS?

In AngularJs, it will remember present values and compare it with previous value. If any changes found in previous value that time change event will fire automatically and it will update data every time when data got changed.

The HTML tells the AngularJs compiler to create the $watch for controller methods and its run inside the $apply method. We will see simple example for two way data binding in angularjs.


Example of Two Way Data Binding in AngularJS?

Following is the example of binding data in two way in AngularJS applications.

<!DOCTYPE html>

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

<head>

<title>

AngularJs Two Binding Example

</title>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

<script type=”text/javascript”>

var app = angular.module(‘angulartwobindapp’, []);

app.controller(‘angulartwobindingCtrl’, function ($scope) {

$scope.name = ‘Welcome to two way binding’;

});

</script>

</head>

<body ng-app=”angulartwobindapp”>

<div ng-controller=”angulartwobindingCtrl”>

Enter Name : <input type=”text” ng-model=”name” style=”width:250px” />

<p>

Entered Name:   {{ name }}

</p>

</div>

</body>

</html>

If you observe above code we defined ng-model objective to html control and used same ng-model value to show input control value. Here whenever we change input control value automatically the appearance value also will get changed. Now we will run and see the output.

Output of AngularJS Two-way Data Binding

Following is the result of two way data binding in angularjs application


What is the need of ng-controller and ng-model in Angular?

The ng-model Directive With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.name = “John Doe”;
});
</script>

  • AngularJS controllerscontrol the data of AngularJS applications.
  • AngularJS controllers are regularJavaScript Objects.

What is the difference between $parse and $eval?

$eval:

  • The AngularJS $eval method is used to executes the AngularJS expression on the current scope and returns the result.
  • In AngularJS, expressions are similar to JavaScript code snippets that are usually placed in bindings such as {{ expression }}.
  • AngularJS used internally $eval to resolve AngularJS expressions, such as {{variable}}.
  • The important difference between $eval and $parse is that $eval is a scope method that executes an expression on the current scope,
  • while $parse is a globally available service. The $eval method takes AngularJS expression and local variable object as parameter.
  • $eval takes an angular expression, evaluates it and returns the actual result of that expression.

 


Attend Free Demo of Angular JS Online Training


 

Is AngularJS Code is Reusable?

I’m using Angular to develop commenting functionality for a web app. currently there are two sections in the application were a user can comment:

  • Category
  • Product
  • About 90% of the commenting functionality is the same for both sections and as such I would like to make this reusable – i.e write some service or controller that I can reference/use as a base.
  • So far, my research seems to point to using a factory service but unfortunately this doesn’t seem to work (I’ve spent the whole day running through various tutorials).
  • It is quite possible that I am over thinking this and making it far too complicated but I honestly don’t know which way to turn anymore.

Here with a quick and dirty overview of what I have so far:

HTML view for the category

  • Controller for the category (receives data from service and posts data to service in order to bind data to model)
  • Service for the category (retrieve and stores all the necessary data)
    The product uses the same logic and a lot of the code in the service and controller will be duplicated. I’ve merged the two services into one service successfully but I’m having trouble doing the same for the controller.

Do I:

Write a base controller that will communicate with the above mentioned service and that will hook up with the two existing controllers

(OR)

Write a factory/provider service that hooks up to the two existing controllers as well as the above mentioned service.


What is the difference between ngshow and ngif and Ng hide?

ng-Show/nghide

  • ngShow directive is a part of module ng.
  • It is used to show or hide the elements based on boolean values.
  • The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
  • ngShow/ngHide work with the show and hide events that are triggered when the directive expression is true and false in Animations
  • The great part about these directives is that “we don’t have to do any of the showing or hiding ourselves with CSS or JavaScript”.
  • Supported by all HTML elements
  • Both ng-show and ng-if receive a condition and hide from view the directive’s element in case the condition evaluates to false.
  • ng-show (and its sibling ng-hide) toggle the appearance of the element by adding the CSS display: none style.
  • The ng-hide directive hides the HTML element if the expression evaluates to true.
  • ng-hide is also a predefined CSS class in AngularJS, and sets the element’s display to none.

Syntax:

<element ng-show=”expression”></element>

Parameter:

Value        Description

—–          ———–

expression    An expression that will show the element only if the expression returns true.

Example:

<!DOCTYPE html>

<html>

<body ng-app=””>

Show HTML: <input type=”checkbox” ng-model=”myVar”>

<div ng-show=”myVar”>

<h1>Welcome</h1>

<p>Welcome to my Show Directive.</p>

</div>

</body>

</html>

 


Attend Free Demo of Angular JS Online Training


 

How to implement securities in angular js? And what do u mean by IAutho?

Security?

  • Security is one of the most important parts of writing a web application—perhaps the most important part!
  • Angular is not made to enhance security of our web application but to help the web application run smooth and user-friendly.
  • Do not mix client and server templates
  • Do not use user input to generate templates dynamically
  • Do not run user input through $scope.$eval (or any of the other expression parsing functions)
  • You can not access a angular variable/scope from console of your browser .
  • It Prevents cross-side-scripting attacks.
  • Prevents HTML injection attacks.
  • NG-CSP directive is given in angular to stop injecting inline codes to the application.
  • you have to send every http using ajax and you need to have an api for the back-end.
  • When developers build client apps with server back ends they approach the application as though they control the entire ecosystem.
  • Assumptions are often made that the client they built will only ever talk to the server side APIs they built in the way they designed them.
  • HTTP Requests, Whenever your application makes requests to a server there are potential security issues that need to be blocked.
  • Using Local Caches, There are various places that the browser can store (or cache) data.
  • Within AngularJS there are objects created by the $cacheFactory.
  • These objects, such as $templateCache are used to store and retrieve data,
  • Primarily used by $http and the script directive to cache templates and other data.
  • Similarly the browser itself offers local Storage and session Storage objects for caching
  • Attackers with local access can retrieve sensitive data from this cache even when users are not authenticated.

What is AngularJS?

  • AngularJs is a client side UI frame work and also Client side JavaScript Framework for building Dynamic web application,it fallows MVC(Model View Controller)pattern.
  • It has set of ready to use modules to simplify building of Single Page Applications.

Advantages of AngularJS?

  • AngularJS supports MVC Pattern
  • It supports two way data-binding
  • It supports both client and server communication
  • It supports Animation
  • Event handles
  • Supports Rest full services
  • Supports Static and Angular Templates
  • AngularJS provides reusable components.

Disadvantages of AngularJS?

  • Not security
  • Difficult to understanding the Angular Application because of no coding standards given by venders
  • Client should enable the JavaScript then only you can run the Angular Applications
  • More than 2000 watchers can severely lag the UI. That limits the complexity of your Angular forms, especially big data grids and lists.

 


Attend Free Demo of Angular JS Online Training


 

Advantages of AngularJS?

  • Global community support is one of the factors, that can easily make Angular the best javascript framework. Developers and designers constantly collaborate and contribute to the community, increasing credibility and reliability of the framework.
  • It is a full-fledged frameworkthat can run in any browser or platform. Moreover, it is consistent, overwhelmed with ready-made tools, ng components are robust and quite mature, as contrasted with React.
  • Two-way data bindis probably the top feature, as it diffuses the impact after every minor data change and does way with the need for further effort with data sync in view and model.

Given the fact that our company makes active use of ng2, it is essential to include react vs angular 2 comparison as well.

  • TypeScript is an enhanced JS super-set that supplies optional static type checking, object-based programming patterns, and high-performance typing features.

What are the Advantages of React JS?

  • JSX is a JS syntax that enables HTML quotes and usage of HTML tag syntax for subcomponents rendering. It promotes building of machine-readable code and provides ability to compound components in one compile-time verified file.
  • Prompt renderingis among the best features of React that gives a significant edge over Angular. The technology comprises smart methods to mitigate the amount of DOM operations, optimize and accelerate the updates process. Virtual DOM (Document Object Model) is of great use while handling vast databases.
  • The core difference between reactjs and angularjs is that React is JS-centric, while ng2 remains HTML-centric. JavaScript is far more robust, than HTML, that makes React far more simple, focused and consistent.

 What is Routing?

Loading the Target Templates to the Source Templates without refreshing is called as Routing in Single Page Application

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.

In how many ways we can achieve the Routings  in Angular Js

In AngularJs Routing can be done in two ways:

  • ngRoute Module
  • Router Module

ngRoute Module: The ngRoute Module routes  your application to different pages without reloading the entire application.

Ui.Router Module: The UIRouter is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL ( i.e.  ngroute just route the url and ui router changes the view based on state of application)

 


Attend Free Demo of Angular JS Online Training


 

What are the advantages of services in angularjs?

  • Gives us the instance of a function (object)- You just instantiated with the ‘new’ keyword and you’ll add properties to ‘this’ and the service will return ‘this’.When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service. (Hypothetical Scenario)
  • Singleton and will only be created once
  • Reusable components
  • Dependencies are injected as constructor arguments
  • Used for simple creation logic
  • If you’re using a class you could use the service provider

Syntax: module.service(‘serviceName’, function);


In how many can we create the services?

There are  5 types of services we can create

  • Using the service() method
  • Using the factory() method
  • Using the provider() method
  • Using the value() method
  • Using the constant() method

What are the types of scopes available in custom directives?

  • Scopeis an object that refers to the application model. It is an execution context for  Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.
  • This is to ease the understanding of the $scope in the custom directives. While creating custom directives we have to apply different types of functionalities, so for that we must know about the $scope behavior in the directives.
  • $scope has a very important role in AngularJS, it works as a mediator (or like a glue) between the logic & view in an Angular application.Now if we talk about the custom directives, then first question which arises is-

“In any application if we want some specific functionality and we want to reuse that in whole application module, then for this we need to develop a set of code. Angular calls it directives.”

I am not going to discuss so much about custom directives basics here. In this blog I am just focusing on use of $scope into directives.

  • So, when we create a custom directive ithas a default scope, which is the parent scope (the controller’s scope from where the directive is called). This behavior is by default, until and unless we do not set the scope.
  • As we know that whenever we define a directive, there is a “directive definition object” (DDO), in which we set some parameters like- restrict, template, require, scope etc.

 


Attend Free Demo of Angular JS Online Training


 

 What is component? How do we create it and Advntages?

  • In AngularJS, a Component is a special kind ofdirective that uses a simpler configuration which is suitable for a component-based application structure.
  • Components can be registered using the.component() method of an AngularJS module (returned by module()). The method takes two arguments:
  • The name of the Component (as string).
  • The Component config object.

Advantages of Components:

  • simpler configuration than plain directives
  • promote sane defaults and best practices
  • optimized for component-based architecture
  • writing component directives will make it easier to upgrade to Angular

Use of compile and link function ?

  • Compilation phase a directive also has a chance to modify the DOM node before a scope is attached to it;
  • Compilation phase we do not have access to the $scope data
  • If the directive needs to access the scope, its link function allows that

In the link phase the data i.e. ($scope) is attached to the template function and executed to get the final HTML output.


What is Isolate scope?

  • An isolate scope is a scope that exists separately with no prototypal inheritance at all; a clean slate. To create an isolate scope it’s as simple as setting thescope property to an empty object hash {}.

How to get custom currency symbol using filters?

Html:

<div ng-app ng-controller=”myCtrl”>

<div>Currency: <input ng-model=”currencySymbol”/></div>

<div>Currency Amount: <input ng-model=”currencyAmount”/></div>

<div>formatted: {{currencyAmount | currency:currencySymbol}}</div>

</div>

Javascript:

function myCtrl($scope) {

$scope.currencySymbol = ‘USD$’;

$scope.currencyAmount = ‘100.1232131’;

}


How Databinding works Internally in AngularJS?

AngularJS handle data-binding mechanism with the help of three powerful functions: $watch(), $digest() and $apply(). Most of the time AngularJS will call the $scope.$watch() and $scope.$digest() functions for you, but in some cases you may have to call these functions yourself to update new values.

$watch() – This function is used to observe changes in a variable on the $scope. It accepts three parameters: expression, listener and equality object, where listener and equality object are optional parameters.

$digest() – This function iterates through all the watches in the $scope object, and its child $scope objects (if it has any). When $digest() iterates over the watches, it checks if the value of the expression has changed. If the value has changed, AngularJS calls the listener with the new value and the old value. The $digest() function is called whenever AngularJS thinks it is necessary. For example, after a button click, or after an AJAX call. You may have some cases where AngularJS does not call the $digest() function for you. In that case you have to call it yourself.

$apply() – Angular do auto-magically updates only those model changes which are inside AngularJS context. When you do change in any model outside of the Angular context (like browser DOM events, setTimeout, XHR or third party libraries), then you need to inform Angular of the changes by calling $apply() manually. When the $apply() function call finishes AngularJS calls $digest() internally, so all data bindings are updated.


AngularJS: How to name directives?

Quick tips to avoid issues with custom directive names AngularJS directives allow us to use our own vocabulary to create semantic HTML components. To take advantage of that we should be aware of how it works to avoid some annoying and hard to find issues.

 


Attend Free Demo of Angular JS Online Training


 

Differences between defining and using?

Before start digging into the best practices, let’s understand the fundamentals. Let’s see how to define and then, how to use an directive.


Advantages Of AngularJS?

  • Built by Google: AngularJS has been developed as well as maintained by dedicated Google engineers.
  • AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
  • AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience.
  • AngularJS code is unit testable.
  • AngularJS provides reusable components.
  • With AngularJS, developer write less code and get more functionality.
  • AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.
  • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.

Life Cycle Of AngularJS ?

 The three phases of the life cycle of an AngularJS application happen each time a web page is loaded in the browser.

The following sections describe these phases of an AngularJS application.

1) The Bootstrap Phase:- The first phase of the AngularJS life cycle is the bootstrap phase, which occurs when the AngularJS JavaScript library is downloaded to the browser.

  • AngularJS initializes its own necessary components and then initializes your module, which the ng-app directive points to. The module is loaded, and any dependencies are injected into your module and made available to code within the module.

2) The Compilation Phase:-The second phase of the AngularJS life cycle is the HTML compilation stage.

  • Initially when a web page is loaded, a static form of the DOM is loaded in the browser.
  • During the compilation phase, the static DOM is replaced with a dynamic DOM that represents the AngularJS view.
  • This phase involves two parts: traversing the static DOM and collecting all the directives and then linking the directives to the appropriate JavaScript functionality in the AngularJS
  • built-in library or custom directive code. The directives are combined with a scope to produce the dynamic or live view.

3) The Runtime Data Binding Phase:- The final phase of the AngularJS application is the runtime phase, which exists until the user reloads or navigates away from a web page. At that point, any changes in the scope are reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.

  • AngularJS behaves differently from traditional methods of binding data.
  • Traditional methods combine a template with data received from the engine and then manipulate the DOM each time the data changes. AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than traditional methods.

 


Attend Free Demo of Angular JS Online Training


What are ng-repeat special variables?

  • The ng-repeat directive has a set of special variables which you are useful while iterating the collection. These variables are as follows:

1) $index

2) $first

3) $middle

4) $last

  • The $index contains the index of the element being iterated. The $first,

$middle and $last returns a Boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.


What is $scope and $rootScope?

  • $scope is an object that is accessible from current component e.g Controller, Service only. $rootScope refers to an object which is accessible from everywhere of the application. You can think $rootScope as global variable and $scope as local variables

What is event handling in AngularJS?

  • When we want to create advanced AngularJS applications such as User Interaction Forms, then we need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on.
  • AngularJS has a simple model for how to add event listeners.
  • We can attach an event listener to an HTML element using one of the following

AngularJS event listener directives:

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Can angular applications (ng-app) be nested within each other?

  • AngularJS applicationscannot be nested within each other. Only oneAngularJS application can be auto-bootstrapped per HTML document. The firstngApp found in the document will be used to define the root element to auto-bootstrap as an application

How to handel event in Angularjs ?

  • To handle an event that is emitted or broadcasted, you use the$on()
  • Syntax :$on(name, listener)

Mention what are the styling form that ngModel adds to CSS classes ?

 ngModel adds these CSS classes to allow styling of form as well as control

  • ng- valid
  • ng- invalid
  • ng-pristine
  • ng-dirty

Who created Angular JS ?

AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. The two originally envisioned their project, GetAngular, to be an end-to-end tool that allowed web designers to interact with both the frontend and the backend.

Google.

One of the original creators, Adam Abrons stopped working on AngularJS but Misko Hevery and his manager, Brad Green, spun the original GetAngular project into a new project, named it AngularJS, and built a team to create an maintain it within Google.

One of AngularJS’ first big wins internally at Google occurred when the company DoubleClick was acquired by Google and they started rewriting part of their application using AngularJS. Because of DoubleClick’s initial success, Google seems to have invested even more resources into Angular and has blessed AngularJS for internal and external product usage.

Because of this, the Angular team inside Google has grown rapidly.


Attend Free Demo of Angular JS Online Training


 

Share this post