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, February 27, 2016

Basic CRUD Operation in angularjs without Database.

In this blog  we will make simple create, read, update and delete operation using  AngularJS to develop an application for performing CRUD operations with HTML. We will use the following features of AngularJS in our application.I hope it will help you to understand basic logic of Angularjs.
Some Angular Directives used in this example:-
Directives use to add capability of extending HTML. They are the most important part of AngularJS. Here are some in-built directives used in this example.
For more details of directive follow this link:-
  1. ng-app:- Used to auto bootstrap the AngularJS application. This is typically applied to the root of HTML document e.g. <html>, <body>.
  2. ng-controller:- Used to attach the controller class to the view. This helps to expose the action methods and the scope model from the controller to be accessible to view.
  3. ng-model:- Used to bind the scope model declared in the controller to the UI elements e.g. input, select,etc.
  4. ng-repeat:- Used to instantiate the template for each item in the source collection received from the scope of the controller.
  5. ng-click:- Executes the action method form the controller class when the element on the View is clicked
Basic Example of Crud operation using HTML :-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library  to support Angularjs in your application inside head tag with script tag.
Crud.html:-
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="library//crud.js"></script>
</head>
<body>
<div ng-app="MyApp" class="container" ng-controller="Book">
<table class="table table-striped table-bordered">
<tr>
<td>ID</td>
<td>
<input type="text" class="form-control" ng-model="item.id" /></td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" class="form-control" ng-model="item.name" /></td>
</tr>
<tr>
<td>EmailID</td>
<td>
<input type="text" class="form-control" ng-model="item.email" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" class="form-control" ng-model="item.password" /></td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" class="form-control" ng-model="item.phone" /></td>
</tr>
<tr>
<td class="text-right" colspan="2">
<button ng-click="addItem(item)" class="btn btn-primary">
Add
</button>
</td>
</tr>
</table>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>EmailID</th>
<th>Phone</th>
<th>Edit</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><span ng-hide="editMode">{{item.id}}</span>
<input type="text" ng-show="editMode" ng-model="item.id" />
</td>
<td>
<span ng-hide="editMode">{{item.name}}</span>
<input type="text" ng-show="editMode" ng-model="item.name" />
</td>
<td>
<span ng-hide="editMode">{{item.email}}</span>
<input type="text" ng-show="editMode" ng-model="item.email" />
</td>
<td>
<span ng-hide="editMode">{{item.phone}}</span>
<input type="text" ng-show="editMode" ng-model="item.phone" />
</td>
<td>
<i ng-hide="editMode" ng-click="editMode = true; editItem(item)" class="glyphicon glyphicon-edit"></i>
<i class="glyphicon glyphicon-saved" ng-show="editMode" ng-click="editMode = false"></i>
</td>
<td>
<i ng-click="removeItem($index)" class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Step 3:-Create js file
Crud.js:-
var app = angular.module('MyApp', []); //create model
app.controller("Book", function ($scope) { //create controller
$scope.items = [];
$scope.addItem = function (item) {  //to add item
$scope.items.push(item);
$scope.item = {};
},
$scope.removeItem = function (index) {   //to remove item
console.log(index);
$scope.items.splice(index, 1)
},
$scope.editItem = function (index) { //to edit item
$scope.editing = $scope.items.indexOf(index);
}
});
Step 4:-Run your page..
Output like this:-


Description:- We are using single controller "Book" and module "app" to manage data from html  page.coming data from html view "item" store in array "items".for delete remove row from array.for show data bind item $scope value in html element using ng-model in table.for good design using bootsrap.css.
For video session follow:-https://www.youtube.com/watch?v=w-mSJshwEzg
Note:-CRUD with database on next blog.


Bikesh Srivastava AngularJs
Friday, February 19, 2016

What is Routing in AngularJs?

AngularJS routes empower you to make diverse URLs for various substance in your application. Having diverse URLs for various substance empowers the client to bookmark URLs to particular substance, and send those URLs to companions and so on. In AngularJS each such bookmarkable URL is known as a routes. 

 AngularJS routes empowers you to demonstrate distinctive substance relying upon what routes is picked. A routes is indicated in the URL after the # sign. In this way, the accompanying URL's all point to the same AngularJS application, however every point to various routes
Routing Architecture
Routing Architecture .
 Step 1:-
  1. Create a module named mainApp and load ngRoute as a dependent module in your module.
  2. Configure the routes using $routeProvider.
  3. We use two paths in the example, /home and /viewStudents.
  4. We use only one controller in this example, StudentController
  5. StudentController is initialized with an array of students and a message. We will be showing the message in the home page and the students list in viewStudents page.
  6. Save this file as main.js.
main.js:- 
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/home'
});
});
mainApp.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Bikesh', city:'Noida'},
{name: 'Brijesh', city:'Sikkim'},
{name: 'Dinesh', city:'UP'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
  Step 2:-Create two html page
  home.html:-
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>
</div>
 viewStudents.html:-
<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a href="#/home"> Back</a>
</div>
  Step 2:-Create index.html page.
  1. The ng-app auto-bootstraps our application mainApp
  2. The ngView directive is the placeholder of the views ( home.html and viewStudents.html).
  3. Include angular.min.js and angular-route.min.js in your application
  4. Include main.js which we have created in the first step.
  5. Save the file as index.html

index.html:-

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Routing</title>
</head>
<body>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Run your application:-

  1. Save all the files in the same location.
  2. open index.html with your browser or type the URL in your browser, For example:yourLocationURL/index.html
Note:-You can refer this video to more understanding
Bikesh Srivastava AngularJs
Thursday, February 4, 2016

What's the difference between factory,service and provider?

Factory:-
When you're utilizing a Factory you make an item, add properties to it, then give back that same article. When you pass this administration into your controller, those properties on the item will now be accessible in that controller through your plant.
factory1-4
An industrial facility is a basic capacity which permits you to include some rationale before making the item. It gives back the made item. 
It is only a gathering of capacities such as a class. Subsequently, it can be instantiated in various controllers when you are utilizing it with constructor capacity.

Service:-
When you're utilizing Service, it's instantiated with the "new" watchword. Therefore, you'll add properties to "this" and the administration will give back 'this'. When you pass the administration into your controller, those properties on "this" will now be accessible on that controller through your administration.
ServiceExample2
An administration is a constructor capacity which makes the article utilizing new watchword. You can add properties and capacities to an administration object by utilizing this catchphrase. Not at all like production line, it doesn't return anything. 
It is a singleton object. Use it when you have to share a solitary article over the application. For instance, confirmed client points of interest.

Provider:-It returns  value always  by using $get() function.
Providers are the only service you can pass into your .config() function with provider name. Use a provider when you want to provide module-wide configuration for your service object before making it available.
p16

The greatest thing to recall about Providers is that they're the main administration that you can go into the app.config part of your application. This is of tremendous significance in case you're expecting to adjust some part of your administration object before it's accessible all over the place else in your application. Albeit fundamentally the same to Services/Factories, there are a couple of contrasts which we'll talk about.
Initially we set up our Provider similarly we did with our Service and Factory. The variables underneath are our "private" and aide capacity.

Example of Factory,Service and Provider in AngularJs:-
<html>
<head>
<title>AngularJS Service Factory and Providers</title>
<script src="angular.js"></script>
</head>
<body>
<div class="container" style="padding-top:20px;">
<div ng-app="myApp" ng-controller="myController">
<p>From Service: {{serviceName}}</p>
<p>From Factory: {{factoryName}}</p>
<p>From Provider: {{providerName}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName) {
this.name = newName;
return this.name;
};
});
//defining factory
app.factory('myFactory', function () {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function (newName) {
serviceObj.name = newName;
};
return serviceObj;
});
//defining provider
app.provider('configurable', function () {
var privateName = '';
this.setName = function (newName) {
privateName = newName;
};
this.$get = function () {
return {
name: privateName
};
};
});
//configuring provider
app.config(function (configurableProvider) {
configurableProvider.setName("Bikesh Srivastava----Provider Example");
});
//defining controller
app.controller('myController', function ($scope, myService, myFactory, configurable) {
$scope.serviceName = myService.setName("Bikesh srivastava---Service Example");
myFactory.setName("Bikesh srivastava -----Factory Example");
$scope.factoryName = myFactory.name;
$scope.providerName = configurable.name;
});
</script>
</body>
</html>
Note:- Factories are functions that return the object always , while services are constructor functions of the object which are instantiated with the "new" keyword.
Bikesh Srivastava AngularJs

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