Simple Angular Crud Operation

By -

Now I show you how to create CRUD(Create, Read, Update, Delete) using AngularJS Without using Database. By using this following code you can create simple crud for users.

<!doctype html>
<html lang="en">
  <head>
    <title>Angular Crud</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="style.css">
 
    <!-- Java Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl">
    <div class="container">
      <hr>
      <button type="button" class="btn btn-info float-md-right" data-toggle="modal" data-target="#myModal">New User</button>
    <h2>Main User Page</h2>
    <span class="clearfix"></span>
      <div class="alert alert-success alert-dismissable" ng-if="message">
        <a href="#" class="close" ng-click="clearMessage()">&times;</a>
        <strong>{{message}}!</strong>
      </div>
    <div class="table-responsive" style="margin-top: 18px;">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>S No.:</th>
        <th>Username</th>
        <th>Email</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users">
        <td>{{$index+1}}.</td>
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>
         <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
        </td>
        <td>
          <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
        </td>
      </tr>
   
    </tbody>
  </table>
      </div>
    </div>
 

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
 
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Save User</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">

            <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">User Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model ="newUser.name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Email</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model ="newUser.email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Full Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model ="newUser.fullname">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success" ng-click="addUser()" data-dismiss="modal">Add User</button>
    </div>
  </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div> 
    </div>
  </div>

    <!-- Modal for Edit -->
  <div class="modal fade" id="myModalEdit" role="dialog">
    <div class="modal-dialog">
 
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit User</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">

            <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">User Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model="clickedUser.name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Email</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model="clickedUser.email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Full Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" ng-model="clickedUser.fullname">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success" ng-click="editUser()" data-dismiss="modal">Save Changes</button>
    </div>
  </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div> 
    </div>
  </div>

<!-- Modal for Delete -->
  <div class="modal fade" id="myModalDelete" role="dialog">
    <div class="modal-dialog">
 
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Delete User</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <strong style="color: red">Are you sure you want to delete " {{clickedUser.name}} " User?</strong>
         
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser()">Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
      </div> 
    </div>
  </div>
  <script >
    var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope){
  console.log("My controller.....");
 
 
    $scope.users = [
      {name: "rohit", email: "rohit@gmail.com", fullname: "rohit rohit"},
      {name: "ram", email: "ram@gmail.com", fullname: "ram ram"},
      {name: "ghi", email: "ghi@gmail.com", fullname: "ghi ghi"}
    ];

  $scope.addUser = function(){
    $scope.users.push($scope.newUser);
    $scope.newUser = {};
    $scope.message = "New User Added successfully";
  };

  $scope.selectUser = function(user){
    console.log(user);
    $scope.clickedUser = user;
  };

  $scope.editUser = function(){
    $scope.message = "User Edited successfully";
  };

  $scope.deleteUser = function(){
    $scope.users.splice($scope.users.indexOf($scope.clickedUser));
    $scope.message = "User Deleted successfully";
  };

  $scope.clearMessage = function(){
    $scope.message = "";
  };

});
  </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

Laravel 5 Chart example using Charts Package

By -
Image
It's always a good fit for understanding if we use some graphical way display our progress report using the chart. So if you are working with laravel 5 framework then you can use chart very simple way and best layout. There are several js libraries available for a chart like chartjs, highcharts, google, material, chartist, fusioncharts, Morris, plottablejs etc. in this example we will just use one laravel "ConsoleTVs/Charts" composer package and you can use all the chart library. Using above library you can simply create following Charts. 1. line chart 2. area chart 3. bar chart 4. pie chart 5. donut chart 6. geo chart 7. gauge chart 8. temp chart 9. percentage chart 10. progress bar chart 11. areaspline chart 12. scatter chart Using ConsoleTVs/Charts package we can simply create above lists on the chart. We don't require to write jquery code for the chart we can manage it from a controller method. So here I give you a very easy example o
Read more

Laravel Stats Tracker

By -
Image
Why? Storing user tracking information, on indexed and normalized database tables, wastes less disk space and ease the extract of valuable information about your application and business. Usage As soon as you install and enable it, Tracker will start storing all information you tell it to, then you can in your application use the Tracker Facade to access everything. Here are some of the methods and relatioships available: How you write your won method : <?php class Tracker Extends Eloquent {     public $attributes = ['hits' => 0];     protected $fillable = ['ip', 'date'];     public $timestamps = false;     protected $table = 'visitor';     public static function boot() {         // When a new instance of this model is created...         static::creating(function ($tracker) {             $tracker->hits = 0;         } );         // Any time the instance is saved (create OR update)       
Read more

PHPMyBackup - A PHP MySQL differential backup script

By -
A PHP MySQL differential backup script PHPMyBackup is a PHP script designed for backing up an entire MySQL server on the command line. What makes it unique is it only uses use  differential  methods to dump only the changes as it keeps a local copy of all the synced databases & tables. Software features Only download changed/altered tables (checksum) Allows specifying subset of databases for backups (supports wildcard) Allows skipping of specified databases from backups (supports wildcard) Allows skipping of specified tables or table-data (supports wildcard) Integrates with  mysqldump  client for individual sql dumps Backup rotation Limitations No database locking during backup. because a separate `mysqldump` is called for every table download, only table locking is used. This has been tested in several environments, but your own full testing is always advised! Requirements A MySQL user on the server with ‘SELECT’ & ‘LOCK TABLES’ permissions tar  with 
Read more