What are different ways to invoke a directive?

There are four methods to invoke a directive in your angular app which are equivalent.

Method	Syntax
As an attribute	<span my-directive></span>
As a class	<span class="my-directive: expression;"></span>
As an element	<my-directive></my-directive>
As a comment	<!-- directive: my-directive expression -->

How to create custom directives in AngularJS?

You can create your own custom directive by using following syntax:



var app = angular.module('app', []);

//creating custom directive syntax
app.directive("myDir", function () {

return {

restrict: "E", //define directive type like E = element, A = attribute, C = class, M = comment

scope: { //create a new child scope or an isolate scope

title: '@' //@ reads the attribute value,
//= provides two-way binding,

//& works with functions
},

template: "<div>{{ myName }}</div>",// define HTML markup

templateUrl: 'mytemplate.html', //path to the template, used by the directive

replace: true | false, // replace original markup with template yes/no

transclude: true | false, // copy original HTML content yes/no


controller: function (scope) { //define controller, associated with the directive template

//TODO:

},


link: function (scope, element, attrs, controller) {//define function, used for DOM manipulation

//TODO:

}

}

});

What is the role of ng-app, ng-init and ng-model directives?

The main role of these directives is explained as:

• ng-app - Initialize the angular app.

• ng-init - Initialize the angular app data.

• ng-model - Bind the html elements like input, select, text area to angular app model.

What are Directives in AngularJS?

AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.

AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.

There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

How AngularJS expressions are different from the JavaScript expressions?

AngularJS expressions are much like JavaScript expressions but they are different from JavaScript expressions in the following ways:

1. Angular expressions can be added inside the HTML templates.

2. Angular expressions doesn't support control flow statements (conditionals, loops, or exceptions).

3. Angular expressions support filters to format data before displaying it.

What are Expressions in AngularJS?

AngularJS expressions are much like JavaScript expressions, placed inside HTML templates by using double braces such as: {{expression}}. AngularJS evaluates expressions and then dynamically adds the result to a web page. Like JavaScript expressions, they can contain literals, operators, and variables.
There are some valid AngularJS expressions:

• {{ 1 + 2 }}

• {{ x + y }}

• {{ x == y }}

• {{ x = 2 }}


• {{ user.Id }}

What are Filters in AngularJS?

Filters are used to format data before displaying it to the user. They can be used in view templates, controllers, services and directives. There are some built-in filters provided by AngularJS like as Currency, Date, Number, OrderBy, Lowercase, Uppercase etc. You can also create your own filters.

Filter Syntax


{{ expression | filter}}


Filter Example


<script type="text/javascript">

{ { 14 | currency } } //returns $14.00 </script>

What is Angular Prefixes $ and $$?

To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.

What is Global API?

Global API provides you global functions to perform common JavaScript tasks such as comparing objects, deep copying, iterating through objects, and converting JSON data etc. All global functions can be accessed by using the angular object. The list of global functions is given below:

Name	Description
angular.lowercase	Converts the specified string to lowercase.
angular.uppercase	Converts the specified string to uppercase.
angular.forEach	Invokes the iterator function once for each item in obj collection, which can be
	either an object or an array.
angular.isUndefined	Determines if a reference is undefined.
angular.isDefined	Determines if a reference is defined.
angular.isObject	Determines if a reference is an Object.

When dependent modules of a module are loaded?

A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.

In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.

What is difference between config() and run() method in AngularJS?

Configuration block – This block is executed during the provider registration and configuration phase. Only providers and constants can be injected into configuration blocks. This block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config() method.

angular.module('myModule', []).
config(function (injectables) { // provider-injector

// This is an example of config block.
// You can have as many of these as you want.

// You can only inject Providers (not instances)

// into config blocks.
}).

run(function (injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)

// into run blocks

});

Run block – This block is executed after the configuration block. It is used to inject instances and constants. This block is created using run() method. This method is like as main method in C or C++.

The run block is a great place to put event handlers that need to be executed at the root level for the application.

For example, authentication handlers.

How angular modules load the dependencies?

An angular module use configuration and run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.

What is core module in AngularJS?

ng is the core module in angular. This module is loaded by default when an angular app is started. This module provides the essential components for your angular app like directives, services/factories, filters, global APIs and testing components.

What components can be defined within AngularJS modules?

You can define following components with in your angular module:

1. Directive

2. Filter

3. Controller

4. Factory

5. Service

6. Provider

7. Value

8. Config settings and Routes

What are Modules in AngularJS?

AngularJS modules are containers just like namespace in C#. They divide an angular app into small, reusable and functional components which can be integrated with other angular app. Each module is identified by a unique name and can be dependent on other modules. In AngularJS, every web page (view) can have a single module assigned to it via ng-app directive.

Creating an AngularJS module

<script type="text/javascript">


// defining module angular.module('myApp', []);


//OR defining module which has dependency on other modules angular.module('myApp', ['dependentModule1', 'dependentModule2']);

</script>

Using an AngularJS module into your app

You can bootstrap your app by using your AngularJS module as given below:

<html ng-app="myApp">

<head>

...

</head>

<body>

...

</body>

How AngularJS handle the security?

AngularJS provide following built-in protection from basic security holes:

1. Prevent HTML injection attacks.

2. Prevent Cross-Site-Scripting (CSS) attacks.

3. Prevent XSRF protection for server side communication.

Also, AngularJS is designed to be compatible with other security measures like Content Security Policy (CSP), HTTPS (SSL/TLS) and server-side authentication and authorization that greatly reduce the possible attacks.

What are AngularJS features?

The features of AngularJS are listed below:

1. Modules

2. Directives

3. Templates

4. Scope

5. Expressions

6. Data Binding

7. MVC (Model, View & Controller)

8. Validations

9. Filters

10. Services

11. Routing

12. Dependency Injection

13. Testing

What is the size of angular.js file?

The size of the compressed and minified file is < 36KB.

What browsers AngularJS support?

The latest version of AngularJS 1.3 support Safari, Chrome, Firefox, Opera 15+, IE9+ and mobile browsers (Android, Chrome Mobile, iOS Safari, Opera Mobile).

AngularJS 1.3 has dropped support for IE8 but AngularJS 1.2 will continue to support IE8.

Is AngularJS a library, framework, plugin or a browser extension?

AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable, and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries.

It is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.

How to access jQLite or jQuery with AngularJS? OR What is angular.element() in AngularJS?

jQuery lite or the full jQuery library if available, can be accessed via the AngularJS code by using the element() function in AngularJS. Basically, angular.element() is an alias for the jQuery function i.e.

angular.element() === jQuery() === $()

For Example:

<html>

<head>

<script src="lib/angular.js"></script>

<script type="text/javascript">

var app = angular.module('app', []);

app.controller("mainCtrl", function ($scope, $element) { $scope.clickme = function () {

var elem = angular.element(document.querySelector('#txtName')); console.log(elem.val())// console the value of textbox

};

});

</script>

</head>

<body ng-app="app">

<div ng-controller="mainCtrl">

<input type="text" id="txtName" value="Shailendra Chauhan" /> <button type="button" ng-click="clickme()">Click me</button>

</div>

</body>

</html>

What is jQLite or jQuery lite?

 jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery.

Here is a table of supported jQuery methods by jQLite.

jQuery Method

Limitation, if any

bind()	Does not support namespace, selectors and eventData
children	Does not support selectors
clone()
contents()
css()
data()
detach()
empty()
eq()
find()	Limited to lookups by tag name
hasClass()
html()
text()	Does not support selectors
on()	Does not support namespace, selectors and eventData
off()	Does not support namespace, selectors
one()	Does not support namespace, selectors
parent()	Does not support selectors
prepend()
prop
ready()
remove
removeAttr()
removeClass()
removeData()
replaceWith()
toggleClass()
triggerHandler()	Passes a dummy event object to handlers
unbind()	Does not support namespace
val()
wrap()

addClass()

after()

append()

attr()

Compare the features of AngularJS and jQuery?

The comparison of AngularJS and jQuery features are given below:

Features	jQuery	AngularJS
Abstract The DOM	Y	Y
Animation Support	Y	Y
AJAX/JSONP	Y	Y
Cross Module Communication	Y	Y
Deferred Promises	Y	Y
Form Validation	N	Y
Integration Test Runner	N	Y
Unit Test Runner	Y	Y
Localization	N	Y
MVC Pattern	N	Y
Template	N	Y
Two-way Binding	N	Y
One-way Binding	N	Y
Dependency Injection	N	Y
Routing	N	Y
Restful API	N	Y