Hello friends, we have meet with last post “convert date to custom date”. Now after so many days we meet today with newest post. In this post we will see AngularJs SweetAlert. In website alert message is so normal. Some of the site use simple alert to show message to the user. Alert write using JavaScript language, you can use alert in the JavaScript. The alert is very simple and not good for user interface. So for the best user interface you can use SweetAlert using angularjs.An angularjs have so many components to show alert message, from that components we use one component that is angular-sweetalert. It is very easy to install it and use in the angularjs application. You can learn more about angular-sweetalert from the site. Let’s see example
Step 1: Open visual studio or visual studio code, which version you have. In this tutorial we will use visual studio code because we will use AngularJs framework and it is JavaScript related code. So you can write code in visual studio code. In this editor, we install the packages by visual studio code command prompt. In this tutorial we will create project in visual studio code editor.
Step 2: Open visual studio code and create project folder like (SweetAlertDemo). In this project folder we have create one sub-folder for project related files because so many files we need to create web application. In project folder we have create one scripts folder and in script folder create one module (.js) file. When create web application using angularjs, we must create module file in the project. This module file is important in the angularjs application. A module is a collection of services, directives, filters, and configuration information.
app.js
var app = angular.module ('SweetAlert', ['oitozero.ngSweetAlert']);
Step 3: In the modular we need to inject component like above oitozero.ngSweetAlert”. Modular file is created then create controller file. The controller is attached with .html file if bind data in UI side (.html) you can bind data from controller and the controller call to service for getting data from server.You can create more than one controller in one controller (.js) file. In controller you can inject component like SweetAlert.We have created SweetAlertController.js controller file.
Step 4: A controller is define using data-ng-controller or ng-controller directive. A controller is a JavaScript object that containing attributes, properties and functions. Controller accepts $scope as a parameter which refers to the application/module that controller is to control. The data-ng-controller=”myCtrl” attributes is an AngularJS directive. It defines a controller.
sweetAlertController.js
app.controller ('sweetAlertController', ['$scope','SweetAlert', function ($scope, sweetAlert) {
}]);
Step 5: Two files are created, that one is module (app.js) and second is controller (sweetAlertController). Now, install the bower component from bower site or using nuget-package manager in visual studio. First of all download the (angular.js) file, this file is most important in angular web application you must inject this file in main page.
Step 6: Second is angular-sweetalert and sweetalert component. This component is required for this example. For show alert message you can use angular-sweetAlert and sweetAlert component. The entire Js file created or downloaded then now we create (.html) page their us can display our data.
sweetAlert.html
<! DOCTYPE html>
<html data-ng-app="SweetAlert">
<head>
<!-- Page title set in pageTitle directive -->
<title>Sweet Alert Demo</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../bower_components/sweetalert/dist/sweetalert.css">
</head>
<body data-ng-controller="sweetAlertController">
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sweetalert/SweetAlert.js"></script>
<script src="../bower_components/sweetalert/dist/sweetalert.min.js"></script>
<!-- Anglar App Script -->
<script src="../scripts/app.js"></script>
<!-- endbuild -->
<!-- Angular Controllers -->
<script src="../controllers/sweetAlertController.js"></script>
</body>
</html>
Step 7: You can see above, we have injected the modular (data-ng-app=”SweetAlert”).It is most important to inject module file in html page (main page).you can create more than one module file in project. Second is controller injected (data-ng-controller=”sweetAlertController”) in body tag. The modular and controller is injected then now inject component file like (angular.js, SweetAlert.js, sweetalert.min.js and css file sweetalert.css, app.js and sweetAlertController.js) files.
Step 8: In above .html file we have injected bootstrap files for the better user interface. For better interface we have inject .css file and .js file like (bootstrap.min.css and bootstrap.js). From controller we have declare some static data for binding in .html page. This declared data we will show on Html (UI) side with bootstrap classes or css. So it's looked very attractive.
app.controller ('sweetAlertController', ['$scope','SweetAlert', function ($scope, sweetAlert) {
$scope.datas = ['C','C++','C#','Java','Python','PHP','JavaScript'];
}]);
Step 9: Now, above data will display on sweetAlert.html page. In .html page we binding data and their we provide delete functionality to delete binded data. The data bind from .html page with bootstrap classes for better user interface. When user try to delete then we notify to user you are confirm to delete this data.
<! DOCTYPE html>
<html data-ng-app="SweetAlert">
<head>
<!-- Page title set in pageTitle directive -->
<title>SweetAlert Demo</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../bower_components/sweetalert/dist/sweetalert.css">
</head>
<body data-ng-controller="sweetAlertController">
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sweetalert/SweetAlert.js"></script>
<script src="../bower_components/sweetalert/dist/sweetalert.min.js"></script>
<!-- Anglar App Script -->
<script src="../scripts/app.js"></script>
<!-- endbuild -->
<!-- Angular Controllers -->
<script src="../controllers/sweetAlertController.js"></script>
<div>
<div class="row" style="padding:10px">
<div class="col-md-3">
</div>
<div class="col-md-6">
<table class="table table-bordered active">
<th>ID</th>
<th>Language</th>
<th>Action</th>
<tr data-ng-repeat="data in datas">
<td>{{$index + 1}}</td>
<td>{{data}}</td>
<td><button class="btn btn-danger btn-xs" ng-click="removeLanguage(data)"> Delete </button></td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
Step 10: We have bind data in using div tag and in table format. In the tag we have use data-ng-repeat to bind one by one data in new row with delete option. Run the application, You can see output. Below output, you can see data bind in table format using bootstrap with delete option. Now, we will see SweetAlert message when click on the delete button. When click on delete button we get confirmation from the user.
app. controller ('sweetAlertController', ['$scope','SweetAlert', function ($scope, sweetAlert) {
$scope.datas = ['C','C++','C#','Java','Python','PHP','JavaScript'];
$scope.removeLanguage = function (selectedItem) {
sweetAlert.swal ({
title: "Are you sure?",
text: "Language will be deleted!",
type: "warning",
ShowCancelButton: true,
ConfirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!",
CancelButtonText: "No, cancel!",
closeOnConfirm: false,
closeOnCancel: true
}, function (isConfirm) {
If (isConfirm) {
//....Add your code to delete selected data....
//....End............
//....Alert Message When Successfull Deleted
sweetAlert.swal ({type: "success", title: "Successfully Removed" });
}
});
}
}]);
Step 11: This confirmation dialog is part of the SweetAlert component. Will see confirmation dialog when click on delete button. In confirmation dialog two options are available Yes and No. If you click on “No, cancel!” button then confirmation dialog is close without any delete action. If you click on “Yes, delete it” then delete that row data as you code.
Step 12: After successfully deleted raw data, we show the successful message to the user using SweetAlert. If any error occurred then you can show error message, you have set the type is error and set title of “Something wrong” message or your custom message. Click on the “Yes delete it” option, and then show successful deleted raw data message with right symbol.
sweetAlert.swal ({type: "success", title: "Successfully Removed" });
You can see successful alert message using SweetAlert in above figure. You can use so different alert message in your angularjs application with angular bower component. Click on “Ok” button and close the SweetAlert message box.
Thanks again,
Subscribe to:
Post Comments (Atom)
Recents
-
In the previous article, we have seen How to create editable cell in jquery datatable . Here In this article, we will learn, How to imple... -
In this post we will learn “ How to create editable cell in jquery datatable ”. Basically in all sites data are displaying in the table f... -
In this article I will explain “ How to add dynamic textbox and save values to database in Asp.Net using C# ” with an example. I have use... -
In this Tutorial, we will see “ How to create a captcha code in asp.net ”. You must have seen that most of all sites have the captcha co... -
In this blog we will learn “ How to encrypt and decrypt string in Asp.net with C# ”. I will explain how to encrypt string and then decrypt...
Popular
-
In the previous article, we have seen How to create editable cell in jquery datatable . Here In this article, we will learn, How to imple... -
In this post we will learn “ How to create editable cell in jquery datatable ”. Basically in all sites data are displaying in the table f... -
In this article I will explain “ How to add dynamic textbox and save values to database in Asp.Net using C# ” with an example. I have use... -
Hello Friend’s, after so long time we meet here with the new post “ How to create a simple dashboard using AngularJs Material? ” In this p... -
In this Tutorial, we will see “ How to create a captcha code in asp.net ”. You must have seen that most of all sites have the captcha co...
About Me
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
Learn More →
No comments:
Post a Comment