AngularJS là gì? AngularJS là một khung phát triển front end mã nguồn mở triển khai kiến trúc MVVM (Model-View-ViewModel). AngularJS dựa trên JavaScript. Nó được duy trì bởi Google và được cho là một trong những khuôn khổ phổ biến nhất. Điều này chủ yếu là do nó nhận được sự hỗ trợ tuyệt đối từ Google và kết hợp các xu hướng thị trường mới nhất. AngularJS chủ yếu được sử dụng để phát triển các ứng dụng một trang hoặc các SPA.

  • Thực hiện CURD with angularjs

  • B1 tạo api: bạn có thể tạo api tại đây

vd: bảng product gồm các thông tin: mã, tên, số lượng, giá bán, giá nhập, miêu tả sau khi bạn tạo api sẽ có đường dẫn api sau: https://63379dcf132b46ee0be3304d.mockapi.io/api/products

method url code respone
GET /products 200 List
GET /products/:id 200 products
POST /products 201 products
PUT /products/:id 200 products
DELETE /products/:id 200 products

B2: tạo file html

index.html

lưu ý:

  • Thêm tập lệnh dưới đây vào bên trong thẻ <> của tệp html. Đó là liên kết CDN sẽ giúp bắt đầu với Angular.
  • Tạo tệp main.js trong cùng một thư mục và tham chiếu tệp đó bằng thẻ script: \
 <body ng-app="demo_product">
    <div ng-controller="myctrl">
        <div class="m-portlet">
            <div class="m-portlet">

                <!-- begin thêm mới product-->
                <form id="form_create_product" ng-submit="onFormSubmit($event)" class="col-8 offset-2">
                    <div class="modal-header">
                    </div>
                    <div><input type="text" value="" ng-model="product.id" style="display: none;"></div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-form-label">Tên sản phẩm</label>
                            <input type="text" class="form-control" id="ten" ng-model="product.ten" value="">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">số lượng</label>
                            <input type="text" class="form-control" id="soLuong" ng-model="product.so_luong" value="">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">giá nhập</label>
                            <input type="text" class="form-control" id="giaNhap" ng-model="product.gia_nhap" value="">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">giá bán</label>
                            <input type="text" class="form-control" id="giaBan" ng-model="product.gia_ban" value="">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">mô tả</label>
                            <textarea id="my-textarea" class="form-control" name="" rows="3" id="moTa"
                                ng-model="product.mieu_ta" aria-valuetext=""></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                    
                        <button type="submit" class="btn btn-primary">thêm 
                        </button>
                        <button type="submit" class="btn btn-primary" ng-click="edit($index)"> sửa
                        </button>
                    </div>
                </form>
                <!-- end Thêm Mới product-->

                <!-- begin hiển thị thông tin product -->
                <div>
                    <table id="custom-table" class="table table-bordered m-table d-sm-table m-table--head-bg-primary">
                        <thead>
                            <tr>
                                <td>mã </td>
                                <td>tên</td>
                                <td>số lượng</td>
                                <td>giá nhập </td>
                                <td>giá bán</td>
                                <td>miêu tả</td>
                                <td>edit</td>
                                <td>delete</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="product in products">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                    <button type="button" class="btn btn-primary" ng-click="selectProduct(product)">
                                        Sửa
                                    </button>
                                </td>

                                <td> <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                        ng-click="delete(product)">
                                        Xoá
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="main.js" type="text/javascript"></script>
</body>

3:


  // đường dẫn api khởi tạo ở bước 1
  let productAPI = "https://63379dcf132b46ee0be3304d.mockapi.io/api/products"
  
  var app = angular.module("demo_product", []);
app.controller("myctrl",function($scope, $http, $window){
  // khởi tạo product
    $scope.product = {
        id:"",
        ten:"",
        so_luong:"",
        gia_nhap:"",
        gia_ban:"",
        mieu_ta:""
    }
  // khởi tạo một mảng để chứa các thông tin của product
$scope.products = []
$http.get(productAPI)
.then(function(data){$scope.products = data.data})
.catch(function(e){
    console.log(e)
})

lưu ý:

$http.get(url).then().catch() là viết tắt của $http({method : “GET”, url : url}).then().catch()

4: thêm mới products

  
  $scope.onFormSubmit= function(event){
    event.preventDefault()
    $http.post(productAPI, $scope.product)
    .then(function(){$window.location.reload()})
    .catch(function(e){console.log(e)})}

5: update sản phẩm

  
 // lấy thông tin của product
// item là đối tượng truyền vào
  $scope.selectProduct = function(item){
        var id = item.id;
        $http.get(productAPI+"/"+id)
        .then(function(data){$scope.product = data.data
        console.log(data)})
        .catch(function(e){console.log(e)})
    }

// thực hiên update 
$scope.edit = function(){
    var id = $scope.product.id
        $http.put(productAPI+"/"+id, $scope.product)
        .then(function(){$window.location.reload()})
        .catch(function(e){console.log(e)})}

5: delete

  $scope.delete = function(item){

    var id = item.id;
    $http.delete(productAPI+"/"+ id)
    .then(function(){
        $window.location.reload()
    })
    .catch(function(e){console.log(e)})}
})

bạn có thể lấy toàn bộ source code tại đây

The End