The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.
There are four valid options for restrict:
'A' (Attribute)- <span my-directive></span>
'C' (Class)- <span class="my-directive:expression;"></span> 'E' (Element)- <my-directive></my-directive>
'M' (Comment)- <!-- directive: my-directive expression -->
Javascript Developer
Monday, December 30, 2019
What are the new features introduced in Angular 5?
Angular 5 came with a lot of new features which help and
attract developer at any point of time on Angular specific task. It also has
some earlier bug fixing which also helps angular developer for smooth coding.
AOT feature is making as a default feature.
- 1. Activating watching mode which helps developer especially in debug.
- 2. Introducing type checking utility for the template.
- 3. Metadata saving and fetching utility making more advance which makes it more flexible.
- 4. Unwanted ts file like *.ngfactory.ts has been removed permanently.
- 5. Displaying error message are more meaningful which help angular developer on error investigation.
- 6. Feature upgrades are more smooth then earlier.
- 7. Introducing new Tree shakeable components help angular developer for a new feature.
- 8. More advance in case of Hybrid upgrade application.
- 9. Improve their performance more than earlier versions.
What are the key
components of Angular?
Angular has the below key components,
- 1. Component: These are the basic building blocks of angular application to control HTML views.
- 2. Modules: An angular module is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task.
- 3. Templates: This represent the views of an Angular application.
- 4. Services: It is used to create components which can be shared across the entire application.
- 5. Metadata: This can be used to add more data to an Angular class.
Thursday, September 7, 2017
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:
}
}
});
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.
• 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.
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.
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 }}
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>
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.
Wednesday, September 6, 2017
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
|
|
Converts the specified
string to lowercase.
|
||
|
|
|
Converts the specified
string to uppercase.
|
||
|
|
|
Invokes the iterator
function once for each item in obj collection, which can be
|
||
either an object or an array.
|
||
|
||
|
|
|
Determines if a reference
is undefined.
|
||
|
|
|
Determines if a reference
is defined.
|
||
|
|
|
Determines if a reference
is an Object.
|
||
|
|
Subscribe to:
Posts (Atom)
What is restrict option in directive?
The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class...
-
JavaScript is a general-purpose programming language designed to let programmers of all skill levels control the behavior of software objec...
-
The delete operator is used to delete all the variables and objects used in the program ,but it does not delete variables declared with...