AngularJS

Question 1

What is AngularJS?

Answer 1

AngularJS is an MVC framework for building web applications. The core features include HTML enhanced with custom component and data-binding capabilities, dependency injection and strong focus on simplicity, testability, maintainability and boiler-plate reduction.

AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).

AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.

Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.

Question 2

What are Directives?

Answer 2

At a high level, 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.

Question 3

What are AngularJS Prefixes $ and $$ for?

Answer 3

To prevent accidental name collisions with your code, AngularJS prefixes names of public objects with $ and names of private objects with $$

Question 4

What is data binding in AngularJS?

Answer 4

Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.

Question 5

What is scope in AngularJS?

Answer 5

Scopes are objects that refer to the model. They act as glue between controller and view.

Question 6

What are the controllers in AngularJS?

Answer 6

Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.

Question 7

What are the services in AngularJS?

Answer 7

AngularJS come with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

Question 8

What are the filters in AngularJS?

Answer 8

Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.

Question 9

Explain directives in AngularJS.

Answer 9

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

Question 10

Explain templates in AngularJS.

Answer 10

Templates 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”.

Question 11

What is routing in AngularJS?

Answer 11

It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.

Question 12

What are the advantages of AngularJS?

Answer 12

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 uses dependency injection and make use of separation of concerns.

AngularJS provides reusable components.

With AngularJS, developer writes less code and gets more functionality.

In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.

AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Question 13

What are the disadvantages of AngularJS?

Answer 13

Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

Question 14

Which are the core directives of AngularJS?

Answer 14

ng-app − This directive defines and links an AngularJS application to HTML.

ng-model − This directive binds the values of AngularJS application data to HTML input controls.

ng-bind − This directive binds the AngularJS Application data to HTML tags.

Question 15

Explain AngularJS boot process.

Answer 15

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.

Question 16

What is MVC?

Answer 16

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.

Question 17

Explain ng-app directive.

Answer 17

ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

Question 18

Explain ng-model directive.

Answer 18

ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

Question 19

Explain ng-bind directive.

Answer 19

ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control’s data when model data is updated by controller.

Question 20

Explain ng-controller directive.

Answer 20

ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

Question 21

How AngularJS integrates with HTML?

Answer 21

Step 1 − Include angularjs javascript libray in the html page
script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”

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”

Question 22

Explain ng-init directive.

Answer 22

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

Question 23

Explain ng-repeat directive.

Answer 23

ng-repeat directive repeats html elements for each item in a collection.

Question 24

What are AngularJS expressions?

Answer 24

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.

Question 25

Explain ng-show directive.

Answer 25

ng-show directive shows a given control.

Question 26

Explain ng-hide directive.

Answer 26

ng-hide directive hides a given control.

Question 27

Explain ng-click directive.

Answer 27

ng-click directive represents a AngularJS click event.

Question 28

How angular.module works?

Answer 28

angular.module is used to create AngularJS modules along with its dependent modules.

var mainApp = angular.module("mainApp", []);
Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.

Question 29

How to validate data in AngularJS?

Answer 29

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.

Question 30

Explain ng-include directive.

Answer 30

Using AngularJS, we can embed HTML pages within a HTML page using ng-include directive.

div ng-app = “” ng-controller = “studentController”
div ng-include = “‘main.htm’”
div ng-include = “‘subjects.htm’”

Question 31

How to make an ajax call using Angular JS?

Answer 31

AngularJS provides $https: control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https: can be used to get the data from server in the following manner:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

Question 32

What is use of $routeProvider in AngularJS?

Answer 32

$routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

Question 33

What is $rootScope?

Answer 33

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

Question 34

What is a service?

Answer 34

Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $https: is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

Question 35

Is AngularJS extensible?

Answer 35

Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.

Question 36

On which types of component can we create a custom directive?

Answer 36

AngularJS provides support to create custom directives for following type of elements.

Element directives − Directive activates when a matching element is encountered.

Attribute − Directive activates when a matching attribute is encountered.

CSS − Directive activates when a matching css style is encountered.

Comment − Directive activates when a matching comment is encountered.

Question 37

What are the core features of AngularJS?

Answer 37

DATA BINDING
SCOPE
CONTROLLER
SERVICES
FILTERS
DIRECTIVES
TEMPLATES
ROUTING
MODEL VIEW CONTROLLER
DEEP LINKING
DEPENDENCY INJECTION

Question 38

What is AngularJS Data Binding?

Answer 38

Data-binding − It is the automatic synchronization of data between model and view components.

Question 39

What is AngularJS Scope?

Answer 39

Scope − These are objects that refer to the model. They act as a glue between controller and view.

Question 40

What is AngularJS Controller?

Answer 40

Controller − These are JavaScript functions that are bound to a particular scope.

Question 41

What is AngularJS Service?

Answer 41

Services − AngularJS come with several built-in services for example $https: to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Question 42

What is AngularJS Filter?

Answer 42

Filters − These select a subset of items from an array and returns a new array.

Question 43

What is AngularJS Directives?

Answer 43

Directives − Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel…)

Question 44

What is AngularJS Templates?

Answer 44

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”.

Question 45

What is AngularJS Routing?

Answer 45

Routing − It is concept of switching views.

Question 46

What is AngularJS Model View Controller?

Answer 46

Model View Whatever − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.

Question 47

What is AngularJS Deep Linking?

Answer 47

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.

Question 48

What is AngularJS Dependency Injection?

Answer 48

Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.