7+ Year Exp in IT Industry, Working as Technical Lead at HytechPro| Consultant | Leadership, Corporate Trainer | Motivational, Technical Speaker | Career Coach | Author | MVP | Founder Of RVS group | Trained more than 4000+ IT professionals | Azure | DevOps | Agile | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF...
Sunday, 31 January 2016

How to use multiple Module in single View/HTML page in angularjs?

 Example of module dependencies
In this blog we'll describe how to use multiple module in single controller and how to use provider in Angularjs .for more understanding see given image below.
Step 1:-Create HTML page using angularjs.js library or CDN:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<script src="angular.js"></script>
<script src="script.js"></script>
<body ng-app="mainModule">
<div ng-controller="mainController">
<strong>provider1 ID:</strong> <br/>
<strong>provider2 ID:</strong> <br/>
<strong>provider3 ID:</strong> <br/>
<strong>provider4 ID:</strong>
Step 2:-Create script.js file
//Definition of a BaseProvider item to utilize
//in various occasions crosswise over various modules.
var BaseProvider = capacity ()
var providerID;
return {
setID: capacity (id)
providerID = id;
$get: capacity ()
return {
getProviderID: capacity ()
return providerID;
angular.module("childModule1", [ ]).provider("provider1", BaseProvider)
.config(function (provider1Provider)
}).provider("provider2", BaseProvider).config(function (provider2Provider)
angular.module("childModule2", ["childModule3"])
.provider("provider1", BaseProvider).config(function (provider1Provider)
}).provider("provider3", BaseProvider).config(function (provider3Provider)
angular.module("childModule3", [ ]).provider("provider1", BaseProvider)
.config(function (provider1Provider)
}).provider("provider4", BaseProvider).config(function (provider4Provider)
//"mainModule" relies on upon "childModule1" and "childModule2". The "provider1" //example
//in "childModule2" overrides the "provider1" example characterized in //"childModule1"
//in light of the fact that both the modules are conditions of "mainModule" and in the //conditions
//exhibit "childModule2" comes after "childModule1". In the event that the conditions cluster was
//["childModule2", "childModule1"] then "provider1" in "childModule1" would //override
//"provider1" in "childModule2". "provider1" in "childModule3" is overridden by the
//same definition in alternate modules on the grounds that alternate modules are //closer to
//the foundation of the pecking order (they are offspring of "mainModule", while //"childModule3"
//is an offspring of "childModule2").
//I can get every one of the suppliers in alternate modules through Dependency //Injection
//on the grounds that there's just a level (with no order) gathering of supplier names
//in the entire AngularJS application and it doesn't rely on upon the modules chain of //importance.
.controller("mainController", capacity ($scope, provider1, provider2, provider3, provider4)
//Set variables on the degree to reference the diverse suppliers from the HTML layout
$scope.provider1 = provider1;
$scope.provider2 = provider2;
$scope.provider3 = provider3;
$scope.provider4 = provider4;
angular.module("mainModule", ["childModule1", "childModule2"])
Brief Description:-
In AngularJS, we call benefit any item enrolled in a module through the accompanying capacities: esteem, administration, production line, supplier. 
A module can rely on upon different modules in this way framing a chain of importance, however benefits characterized into modules don't shape a progressive system and when the application is stacked they all go into a one of a kind namespace. An administration is obvious (and accessible for Dependency Injection) to every one of the modules stacked in the same application freely of the modules progressive system.
An administration name can be utilized to enlist just a solitary administration in the entire application. 
mainModule relies on upon childModule1 and childModule2 while childModule2 depends just on childModule3. 

For every module we can see the names of the enrolled administrations and the same name provider1 is utilized by all the tyke modules to enlist diverse administrations. 

The provider1 occasion in childModule2 overrides the provider1 occurrence characterized in childModule1 in light of the fact that both the modules are conditions of mainModule and in the conditions exhibit childModule2 comes after childModule1. In the event that the conditions cluster was [childModule2, childModule1] then provider1 in childModule1 would override provider1 in childModule2. provider1 in childModule3 is overridden by the same definition in alternate modules on the grounds that alternate modules are closer to the foundation of the order (they are offspring of mainModule, while childModule3 is an offspring of childModule2).
Bikesh Srivastava AngularJs

What is $apply() and $filter in AngularJs?


The $scope.$apply() work takes a capacity as parameter which is executed, and after that $scope.$digest() is called inside. That makes it less demanding for you to ensure that all watches are checked, and in this way all information ties invigorated. Here is a $apply()
$scope.$apply(function() {
$scope.data.myVar = "Another worth";


There are two way use filter in angular js
1:-filter in view or HTML page with expression {{--|--}}.
AngularJS provides filters to transform data by default using in expression with HTML tag:
  • 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.
  • limitTo ::Limits an array/string, into a specified number of elements/characters.
  • lowercase ::Format a string to lower case.
  • number ::Format a number to a string.
  • orderBy ::Orders an array by an expression.
  • uppercase ::Format a string to upper case.
<p>The name is {{ lastName | uppercase }}</p>  
You can use filter properties after {{--|--}} with any HTML tag.
2:-filter in Angular controller.
Step 1:-Create Html page using Angular.js file
<div ng-app>
<div ng-controller="Demo">
<input type="text" ng-model="search">
<tr ng-repeat="item in items">
Step 2:-Create .Js file 
Step 3:-Inject $filter in your controller.
function Demo($scope, $filter)
$scope.items = [
{id:1, name:'Bikesh'},
{id:2, name:'srivastava'},
{id:3, name:'Alok'},
{id:4, name:'srivastava'},
{id:5, name:'Hitesh singh'}];
$scope.items2 = $scope.items;
$scope.$watch('search', function(val)
$scope.items = $filter('filter')($scope.items2, val);
Bikesh Srivastava AngularJs
Saturday, 30 January 2016

What is $Watch and $digest() in angularJs?

The AngularJS $scope capacities $watch(), $digest() and $apply() are a portion of the focal capacities in AngularJS. Understanding $watch(), $digest() and $apply() is key with a specific end goal to comprehend AngularJS. 

When you make an information tying from some place in your perspective to a variable on the $scope object, AngularJS makes a "watch" inside. A watch implies that AngularJS watches changes in the variable on the $scope object. The system is "viewing" the variable. Watches are made utilizing the $scope.$watch() capacity which I will cover later in this content. 

At key focuses in your application AngularJS calls the $scope.$digest() capacity. This capacity emphasizes through all watches and checks if any of the watched variables have changed. On the off chance that a watched variable has changed, a relating audience capacity is called. The audience capacity does whatever work it needs to do, for occurrence changing a HTML content to mirror the new estimation of the watched variable. Accordingly, the $digest() capacity is the thing that triggers the information tying to upgrade. 

More often than not AngularJS will call the $scope.$watch() and $scope.$digest() capacities for you, however in a few circumstances you might need to call them yourself. Accordingly it is better than average to know how they function. 

The $scope.$apply() capacity is utilized to execute some code, and afterward call $scope.$digest() after that, so all watches are checked and the relating watch audience capacities are called. The $apply() capacity is valuable when incorporating AngularJS with other code. 

I will dive into more insight about the $watch(), $digest() and $apply() works in the rest of this content.


The $scope.watch() capacity makes a watch off some variable. When you enlist a watch you pass two capacities as parameters to the $watch() capacity: 

A worth capacity 

An audience capacity 

Here is an illustration:-
$scope.$watch(function() {},
capacity() {}


The $scope.$digest() capacity emphasizes through every one of the watches in the $scope article, and its tyke $scope objects (in the event that it has any). Whenever $digest() emphasizes over the watches, it calls the worth capacity for every watch. In the event that the worth returned by the quality capacity is not quite the same as the quality it gave back the last time it was called, the audience capacity for that watch is called. 

The $digest() capacity is called at whatever point AngularJS supposes it is fundamental. Case in point, after a catch click handler has been executed, or after an AJAX call returns (after the done()/come up short() callback capacity has been executed). 

You might experience some corner situations where AngularJS does not call the $digest() capacity for you. You will for the most part recognize that by seeing that the information ties don't upate the showed values. All things considered, call $scope.$digest() and it ought to work. Alternately, you can maybe utilize $scope.$apply() rather which I will clarify in the following area.
Bikesh Srivastava AngularJs
Wednesday, 27 January 2016

What are directives in angularJs with Example?

Mandates are JavaScript capacities that control and add practices to HTML DOM components. 
The four capacities are: aggregate, controller, pre-connection and post-Link. 
The aggregate capacity permits the mandate to control the DOM before it is incorporated and connected in this way permitting it to include/evacuate/change orders, and also, include/uproot/change other DOM components. 
The controller capacity encourages order correspondence. Kin and tyke mandates can ask for the controller of their kin and folks to impart data. 
The pre-join capacity takes into account private $scope control before the post-join process starts. 
The post-join strategy is the essential workhorse technique for the order.
In the mandate, post-gathering DOM control happens, occasion handlers are designed, as are watches and different things. In the statement of the order, the four capacities are characterized like this.
Directives definition of each in ng listed below:-

Use this directive to force the angular.element library. This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root elementof the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.
Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Using Angular markup like {{hash}} in a srcset attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrcset directive solves this problem.
This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
Sets the checked attribute on the element, if the expression inside ngChecked is truthy.
Sets the readOnly attribute on the element, if the expression inside ngReadonly is truthy.
Sets the selected attribute on the element, if the expression inside ngSelected is truthy.
Sets the open attribute on the element, if the expression inside ngOpen is truthy.
Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.
Directive that instantiates FormController.
HTML textarea element control with angular data-binding. The data-binding and validation properties of this element are exactly the same as those of the input element.
HTML input element control. When used together with ngModel, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
Binds the given expression to the value of <option> or input[radio], so that when the element is selected, thengModel of that element is set to the bound value.
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }}expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.
Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.
Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction withngRepeat and take effect only on odd (even) rows.
The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction withngRepeat and take effect only on odd (even) rows.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.
Angular has some features that can break certain CSP (Content Security Policy) rules.
The ngClick directive allows you to specify custom behavior when an element is clicked.
The ngDblclick directive allows you to specify custom behavior on a dblclick event.
The ngMousedown directive allows you to specify custom behavior on mousedown event.
Specify custom behavior on mouseup event.
Specify custom behavior on mouseover event.
Specify custom behavior on mouseenter event.
Specify custom behavior on mouseleave event.
Specify custom behavior on mousemove event.
Specify custom behavior on keydown event.
Specify custom behavior on keyup event.
Specify custom behavior on keypress event.
Enables binding angular expressions to onsubmit events.
Specify custom behavior on focus event.
Specify custom behavior on blur event.
Specify custom behavior on copy event.
Specify custom behavior on cut event.
Specify custom behavior on paste event.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Fetches, compiles and includes an external HTML fragment.
The ngInit directive allows you to evaluate an expression in the current scope.
Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to ng-list=", ". You can specify a custom delimiter as the value of the ngListattribute - for example, ng-list=" | ".
The ngModel directive binds an input,selecttextarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
Allows tuning how model updates are done. Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.
The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>element using the array or object obtained by evaluating the ngOptions comprehension expression.
ngPluralize is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see Angular i18n dev guide). You configure ngPluralize directive by specifying the mappings between plural categories and the strings to be displayed.
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShowattribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The.ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHideattribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The.ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
The ngStyle directive allows you to set CSS style on an HTML element conditionally.
The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template.
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Load the content of a <script> element into $templateCache, so that the template can be used by ngInclude,ngView, or directives. The type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive'stemplateUrl.
HTML SELECT element with angular data-binding.
ngRequired adds the required validator to ngModel. It is most often used for input and select controls, but can also be applied to custom controls.
ngPattern adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
ngMaxlength adds the maxlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
ngMinlength adds the minlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
Bikesh Srivastava AngularJs

Life Is Complicated, But Now programmer Can Keep It Simple.