11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/
Saturday, January 23, 2016

What is $rootscope in angularJs?

$rootScope is defined as" An app can have only one $rootScope which will be shared among all the components of an app". Hence it acts like a global variable. All other $scopes are children of the $rootScope shown in image below.
Example of $rootscope in AngularJs:-
By this example you can understand difference between $scope and $rootscope.
$rootscope Flow
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!doctype html>
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
Hello {{msg}}!
<br />
Hello {{name}}!
(rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid green; padding:5px">
Hello {{msg}}!
<br />
Hey {{myName}}!
<br />
Hi {{name}}! (rootScope)
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('myApp', [ ]);
app.controller('Ctrl1', function ($scope, $rootScope) {
$scope.msg = 'World';
$rootScope.name = 'AngularJS';
});
app.controller('Ctrl2', function ($scope, $rootScope) {
$scope.msg = 'Bikesh srivastava Blog';
$scope.myName = $rootScope.name;
});
</script>
</body>
</html>
 Description:-
We are   using  two controllers in the same HTML template and each one manages its own $scope object.In the example we have two controllers, Ctrl1 and Ctrl2, and even though there are some model variables named in the same way for both the controllers, each one resides in its own $scope thus avoiding any conflict (they are in fact different variables even though the name is the same).
I declared $rootscope in  Ctrl1  but using $rootscope value in  Ctrl2,.
you can store $rootscope value in any $scope and any where in any controller.
Bikesh Srivastava AngularJs
Tuesday, January 19, 2016

What is $scope in controller ?

$scope is an article information stockpiling extension, or we can comprehend it as an information distribution center which different items as Controller, Service will utilize and trade of data through it. 
you can make any sort of variables at once and utilize anyplace inside controller.$scope and $rootscope is spine of AngulerJs.
Basic Example of controller in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="simpleController">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
Step 3:-Create Controller:-script.js file
var mainApp = angular.module("mainApp", []);
mainApp.controller('simpleController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Bikesh";
$scope.lastName = "Srivastava";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});
Description:-
First of all  i've created a $scope variable name is"firstName " and set value="Bikesh" and now we are using single controller name is "simpleController " so I  able to use "Bikesh"  on my HTML Part with ng-model or expression {{firstName}}.  But you need to inject $scope in controller.
Bikesh Srivastava AngularJs
Sunday, January 17, 2016

How to use Multiple controller on single HTML/View Page?

Basic Example of Multiple controller on single HTML/View in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="firstController">
<h2>Model managed by the first controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
<div ng-controller="secondController">
<h2>Model managed by the second controller</h2>
<strong>First name:</strong> {{firstName}}<br />
<strong>Middle name:</strong> {{middleName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the middle name: <input type="text" ng-model="middleName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
Step 3:-Create Controller using:-script.js file
          var mainApp = angular.module("mainApp", []);
mainApp.controller('firstController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Bikesh";
$scope.lastName = "Srivastava";

 // Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});

mainApp.controller('secondController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Alok";
$scope.middleName = "Kumar";
$scope.lastName = "Srivastava";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};
});
Description:-
We can define multiple controllers in the same HTML template and each one manages its own $scope object.In the example we have two controllers, firstController and secondController, and even though there are some model variables named in the same way for both the controllers, each one resides in its own $scope thus avoiding any conflict (they are in fact different variables even though the name is the same).
Bikesh Srivastava AngularJs

What is controller in AngularJs?

AngularJS Controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
Basic Example of controller in AngularJs:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="simpleController">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
Step 3:-Create Controller:-script.js file
var mainApp = angular.module("mainApp", []);
mainApp.controller('simpleController', function($scope) 
{
// Initialize the model variables
$scope.firstName = "Bikesh";
$scope.lastName = "Srivastava";
// Define utility functions
$scope.getFullName = function ()
{
return $scope.firstName + " " + $scope.lastName;
};
});
Description:-
In AngularJS, everything has a related extension. Degrees are composed in a progressive system. There is a $rootScope object, the guardian of the considerable number of extents of the AngularJS application, and there are degrees made by a few mandates. The extension progressive system is cognizant with the DOM tree pecking order. At whatever point an extension making order is experienced in the DOM tree, another degree is created.Instead of characterizing model variables specifically on the worldwide $rootScope, as we did with the ng-init mandate, we could aggregate them inside a controller, which is just an ordinary JavaScript capacity with a $scope contention. 

 A controller is characterized in the HTML with a ng-controller mandate determining the name of the JavaScript variable speaking to the controller. In the case, we've characterized thesimpleController variable in a different JavaScript document and that is our controller. 

 A controller makes another extension, so we can characterize our model variables on that degree. We can likewise characterize capacities on the $scope object. 

 The $scope contention in the simpleController capacity is the extension related to our new controller. The degree is made for us by AngularJS and made accessible to our controller capacity through Dependency Injection (DI). Reliance Injection just implies that we pronounce that our capacity relies on upon a $scope object (indicating it as a capacity contention) and AngularJS ought to make it accessible for us so we can utilize it inside the capacity. 

 In the sample, the firstName and lastName variables and the getFullName capacity are characterized in the $scope object oversaw by our simpleController. We don't have to determine the $scope object in the HTML layout since it's certain in the DOM tree established where the ng-controller mandate is indicated.





Bikesh Srivastava AngularJs
Saturday, January 16, 2016

Two Way data Binding In AngularJs

Basic Example of Two way data binding :-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
Step 3:-Run your html page.
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app ng-init="firstName = 'Bikesh'; lastName = 'Srivastava';">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</body>
</html>
Description:-
We have a two way information tying when a model variable is bound to a HTML component that can both change and show the estimation of the variable. When all is said in done, we could have more than one HTML component bound to the same variable. 
We utilize the ng-model order to tie a model variable to the HTML component that can show its quality, as well as change it.
In the sample, we tie the firstName and lastName model variables to several HTML info components. At the point when the page is stacked, the estimation of the data components are instated to those of the individual model variables and at whatever point the client sorts something in an info, the estimation of the model variable is altered also (two way).
Bikesh Srivastava AngularJs
Friday, January 15, 2016

What is AngularJs? One way data binding

AngularJS is a structural framework for dynamic web apps and single page application. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.
Note:-Angularjs follow MVC pattern.
Basic Example of one way data binding:-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
Step 3:-Run your html page.
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app ng-init="firstName = 'Bikesh'; lastName = 'Srivastava';">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span>
</body>
</html>
Description:-
Each HTML ascribe particular to AngularJS is called mandate and has a particular part in an AngularJS application. 
We say that the HTML page is a format since it's not the last form of what will be rendered by the web program and obvious to the client, however it's indeed simply the structure of the website page before it's prepared by AngularJS. 
The ng-application order denote the DOM component that contains the AngularJS application. 
We introduce a few variables firstName and lastName through the ng-init order. 
An information tying can be determined in two unique ways: 
with wavy supports:  
with the ng-tie mandate: ng-bind="varName" 
We're stating one way information tying on the grounds that the model qualities (here the variables speak to the model) are consequently relegated to the HTML placeholder components indicated through the information tying documentation, however the HTML components don't change the qualities in the model (restricted).
Bikesh Srivastava AngularJs

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