عملیات CRUD با Angular با استفاده از MongoDB

عملیات CRUD با Angular ، در این مقاله، نحوه ی ایجاد عملیات CRUD با Angular با استفاده از MongoDB را خواهیم آموخت. در این مقاله، از ابتدا شروع می‏کنیم.امیدوارم از این مقاله لذت ببرید.

یک پروژه‏ ی نمایشی با استفاده از Angular CLI برای front-end، Node.js و Express برای middle-end، و MongoDB برای back-end ایجاد خواهیم کرد.

نیازمندی‏ ها

  •  Visual Studio Code یا هر IDM دیگر برای توسعه.
  •  Node.js : اگر node را از قبل نصب کرده ‏اید، فرمان node -v و نیز فرمان npm را بررسی کنید.
  • MongoDB : در این پروژه، از پایگاه داده‏ ی MongoDB استفاده می‏کنیم؛ شما می‏توانید از SQL یا دیگر پایگاه داده ‏ها نیز استفاده کنید.

اگر Angular CLI را از قبل نصب کرده ‏اید، نسخه ‏ی آن را بطور عمومی با فرمان ng -v بررسی کنید

لینک ‏های دانلود

  •  https://nodejs.org/en/download/ – Node
  •  https://code.visualstudio.com/ – VS code
  • https://www.mongodb.com/download-center – MongoDB

اگر بخش های قبلی مقالات ما را نخوانده‏ اید همواره می‏توانید در لینک‏ زیر مشاهده کنید.

بیایید شروع کنیم و برنامه ی نمایشی را ایجاد کنیم.

عملیات CRUD با Angular

مرحله ۱ :

پوشه‏ های جدید با هر نامی، مثلاً AngularCRUD ، ایجاد کنید. پس از اینکه پوشه ایجاد شد، کلیدهای ctrl+shift را فشار داده، برای باز کردن پنجره‏ ی فرمان در اینجا راست کلیک کنید.

 AngularJS

 نحوه ی کار با MongoDB

مرحله ۲:
پس از اینکه پوشه در خط فرمان باز شد، این فرمان را برای نصب Angular CLI در پوشه خود اجرا کنید.

npm install -g @angular/cli

 کار با MongoDB

مرحله ۳:

اگر با موفقیت نصب شد، این فرمان را برای ایجاد یک برنامه ‏ی جدید اجرا کنید.

بیایید دوباره نام پروژه را بصورت AngularCRUD قرار دهیم.

ng new projectname

npm

مرحله ۴:
زمانی که فرمان ng new با موفقیت ایجاد و نصب شد، دایرکتوری خود را تغییر دهید.

cd AngularCRUD

مرحله ۵:
اکنون، پروژه خود را در Visual Studio Code با فرمان کد به اینصورت باز می‏کنیم.

MongoDB

حال، می‏توانیم مشاهده کنیم که VSCode بصورت خودکار باز شده است.

VSCode

مرحله ۶ :
اکنون برنامه‏ ی خود را با استفاده از این فرمان اجرا کنید.

ng server – o

در اینجا، -o نشانگر باز کردن برنامه در مرورگر پیش فرض است.

 عملیات CRUD با MongoDB

مرحله ۷:
حال، بیایید Express، Mongoose و body parser را با استفاده از این فرمان نصب کنیم.

  • npm install express –save
  •  npm install mongoose –save
  • npm install body-parser –save

 

 عملیات CRUD با Angular

مرحله ۸:
پس از نصب سه پکیج بالا، یک فایل جدید، server.js، ایجاد کنید.

var express = require('express');  
var path = require("path");   
var bodyParser = require('body-parser');  
var mongo = require("mongoose");  
  
var db = mongo.connect("mongodb://localhost:27017/AngularCRUD", function(err, response){  
   if(err){ console.log( err); }  
   else{ console.log('Connected to ' + db, ' + ', response); }  
});  
  
   
var app = express()  
app.use(bodyParser());  
app.use(bodyParser.json({limit:'5mb'}));   
app.use(bodyParser.urlencoded({extended:true}));  
   
  
app.use(function (req, res, next) {        
     res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');    
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');    
     res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');      
     res.setHeader('Access-Control-Allow-Credentials', true);       
     next();  
 });  
  
 var Schema = mongo.Schema;  
  
var UsersSchema = new Schema({      
 name: { type: String   },       
 address: { type: String   },   
},{ versionKey: false });  
   
  
var model = mongo.model('users', UsersSchema, 'users');  
  
app.post("/api/SaveUser",function(req,res){   
 var mod = new model(req.body);  
 if(req.body.mode =="Save")  
 {  
    mod.save(function(err,data){  
      if(err){  
         res.send(err);                
      }  
      else{        
          res.send({data:"Record has been Inserted..!!"});  
      }  
 });  
}  
else   
{  
 model.findByIdAndUpdate(req.body.id, { name: req.body.name, address: req.body.address},  
   function(err,data) {  
   if (err) {  
   res.send(err);         
   }  
   else{        
          res.send({data:"Record has been Updated..!!"});  
     }  
 });  
  
  
}  
 })  
  
 app.post("/api/deleteUser",function(req,res){      
    model.remove({ _id: req.body.id }, function(err) {    
     if(err){    
         res.send(err);    
     }    
     else{      
            res.send({data:"Record has been Deleted..!!"});               
        }    
 });    
   })  
  
  
  
 app.get("/api/getUser",function(req,res){  
    model.find({},function(err,data){  
              if(err){  
                  res.send(err);  
              }  
              else{                
                  res.send(data);  
                  }  
          });  
  })  
  
  
app.listen(8080, function () {  
    
 console.log('Example app listening on port 8080!')  
})

مرحله ۹ :
بیایید پوشه‏ ی پروژه را در خط فرمانی دیگر باز کرده و node server.js را بر روی درگاه ۸۰۸۰ اجرا کنیم.

 کار با MongoDB

مرحله ۱۰:
یک Angular Service جدید برای فراخوانی معمول AJAX API ایجاد کنید.

از این فرمان استفاده کنید:
ng g s common –spec=false

 بانک اطلاعاتی MongoDB

مرحله ۱۱:
کد زیر را در common.service.ts برای API بنویسید.

import { Injectable } from '@angular/core';   
import {Http,Response, Headers, RequestOptions } from '@angular/http';   
   
import { Observable } from 'rxjs/Observable';  
import 'rxjs/add/operator/map';  
import 'rxjs/add/operator/do';  
  
@Injectable()  
export class CommonService {  
  
  constructor(private http: Http) { }  
  
  saveUser(user){      
    return this.http.post('http://localhost:8080/api/SaveUser/', user)  
            .map((response: Response) =>response.json())              
  }  
  
  GetUser(){       
    return this.http.get('http://localhost:8080/api/getUser/')  
            .map((response: Response) => response.json())              
  }  
 deleteUser(id){   
    return this.http.post('http://localhost:8080/api/deleteUser/',{'id': id})  
            .map((response: Response) =>response.json())               
  }  
  
} 

مرحله ۱۲:
اکنون، کد View را در فایل app.module.ts بنویسید.

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';   
  
import { HttpModule } from '@angular/http';  
import { FormsModule } from '@angular/forms';  
  
import { AppComponent } from './app.component';  
  
import {CommonService} from './common.service';  
  
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,HttpModule,FormsModule,  
  ],  
  providers: [CommonService],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }  

مرحله ۱۳:
کد برای app.component.html


<form #userForm="ngForm" (ngSubmit)="onSave(userForm.value)" novalidate>
  
  

Is "myForm" valid? {{userForm.valid}}

  
 
<table border='1'>  

<tr>  

<td>name</td>

  

<td>   
    <input name="id" type="hidden" [(ngModel)]="id" />  
     <input name="name" type="text" required [(ngModel)]="name" />  
  
 </td>

  
</tr>


<tr>  
    
<td>address</td>

  
    
<td>    <input name="address" required type="text" [(ngModel)]="address" /></td>

  
    </tr>
 
<tr>  
        
<td colspan="2">  
    <input type="submit" value="{{valbutton}}" />  
    </td>

  
    </tr>

  
 </table>

  
</form>


<table border='1'>  
  
  
<tr>  
    
<td>Id</td>

  
    
<td>Name</td>

  
    
<td>Address</td>

  
    
<td>Edit</td>

  
    
<td>Delete</td>

  
  </tr>

  
  
<tr *ngFor="let kk of Repdata;let ind = index">  
       
    
<td>{{ind + 1}}</td>

  
    
<td>{{kk.name}}</td>

  
    
<td>{{kk.address}}</td>

  
    
<td><a (click)="edit(kk)" style="color:blueviolet">Edit</a></td>

  
    
<td><a (click)="delete(kk._id)" style="color:blueviolet">Delete</a>  </td>

  
  </tr>

  
</table>

  

مرحله ۱۴:
این کد را در app.component.ts نوشته و کد موجود را از این فایل حذف کنید.

import { Component, OnInit } from '@angular/core';  
import {FormGroup,FormControl,Validators,FormsModule, } from '@angular/forms';  
import {CommonService} from './common.service';  
   
import {Http,Response, Headers, RequestOptions } from '@angular/http';   
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
    
     
  constructor(private newService :CommonService,) {   }  
   Repdata;  
   valbutton ="Save";  
   
   
ngOnInit() {    
  this.newService.GetUser().subscribe(data =>  this.Repdata = data)  
}  
  
onSave = function(user,isValid: boolean) {    
 user.mode= this.valbutton;  
  this.newService.saveUser(user)  
  .subscribe(data =>  {  alert(data.data);  
       
    this.ngOnInit();    
  }   
  , error => this.errorMessage = error )  
    
}      
edit = function(kk) {  
this.id = kk._id;  
this.name= kk.name;  
this.address= kk.address;  
this.valbutton ="Update";  
}  
  
delete = function(id) {  
this.newService.deleteUser(id)  
.subscribe(data =>   { alert(data.data) ; this.ngOnInit();}, error => this.errorMessage = error )   
}  
  
}  

تقریباً کار ما برای انجام عملیات select ، insert ، update ، delete  تمام شده است.

حال، بیایید دو سرور را اجرا کنیم. نخست، برنامه‏ ی Angular با فرمان ng server -o و سپس، سرور node.js است.

آموزش  AngularJS

خروجی را بر روی درگاه ۴۲۰۰ مرورگر مشاهده می‏کنیم.

آموزش Mongodb

  • پسورد: www.mspsoft.com
زهره سلطانیان

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.