ASP.NET,MVC,SQL,Azure,DevOps,ANGULAR,WEB API,SSRS,WCF,C#,JQUERY TUTORIALS

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

http://bikeshsrivastava.blogspot.in/2016/01/part-7what-are-directives-in-angularjs.html

ng-app:- Used to auto bootstrap the AngularJS application. This is typically applied to the root of HTML document e.g. <html>, <body>.
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.
ng-model:- Used to bind the scope model declared in the controller to the UI elements e.g. input, select,etc.
ng-repeat:- Used to instantiate the template for each item in the source collection received from the scope of the controller.
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.

7 Comments

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 .

Step 1:-

Create a module named mainApp and load ngRoute as a dependent module in your module.
Configure the routes using $routeProvider.
We use two paths in the example, /home and /viewStudents.
We use only one controller in this example, StudentController
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.
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.

The ng-app auto-bootstraps our application mainApp
The ngView directive is the placeholder of the views ( home.html and viewStudents.html).
Include angular.min.js and angular-route.min.js in your application
Include main.js which we have created in the first step.
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:-

Save all the files in the same location.

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

Link:-https://www.youtube.com/watch?v=uF5jiRLRLX8&feature=em-subs_digest

Add Comment

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.

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.

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.

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.

Add Comment

Bikesh Srivastava AngularJs

Sunday, January 31, 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:-

<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<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>
</div>
</body>
</html>

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

3 Comments

Bikesh Srivastava AngularJs

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

$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.
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">
<table>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>

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

1 Comment

Bikesh Srivastava AngularJs

ASP.NET, MVC, AZURE , Azure DevOps, ANGULAR, Typescript, WEB API, SSRS, WCF , C#, JQUERY TUTORIALS

Please Like and Share

Basic CRUD Operation in angularjs without Database.

What is Routing in AngularJs?

Run your application:-

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

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

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

$apply():-

$filter():-

Total Pageviews

Follow me on

Contact Me

Followers

Labels

Subscription

Blog Archive

Popular Posts

FOLLOW ME ON TWITTER