Please Like and Share

I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

//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){provider1Provider.setID("provider1-childModule1");}).provider("provider2", BaseProvider).config(function (provider2Provider){provider2Provider.setID("provider2-childModule1");});angular.module("childModule2", ["childModule3"]).provider("provider1", BaseProvider).config(function (provider1Provider){provider1Provider.setID("provider1-childModule2");}).provider("provider3", BaseProvider).config(function (provider3Provider){provider3Provider.setID("provider3-childModule2");});angular.module("childModule3", [ ]).provider("provider1", BaseProvider).config(function (provider1Provider){provider1Provider.setID("provider1-childModule3");}).provider("provider4", BaseProvider).config(function (provider4Provider){provider4Provider.setID("provider4-childModule3");});//"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).

$apply():-

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()Example:-

$scope.$apply(function() {$scope.data.myVar = "Another worth";});

$filter():-

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.

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.

$watch()

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() {});

$digest()

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.

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

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.

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.

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

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=" | ".

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.

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

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.