Single Page Application mit Angular.js Node.js und CouchDB

Blog

Single Page Application mit Angular.js Node.js und CouchDB

Single Page Application mit Angular.js Node.js und CouchDB

Wir haben den Artikel über Single Page Application mit . veröffentlicht Angular.js, Node.js und CouchDB Wiege Modul mit Express 3 . Der aktuelle Beitrag ist eine Möglichkeit, dasselbe mit zu migrieren Express 4 .

Dieser Artikel beschreibt eine Möglichkeit zum Erstellen einer Webanwendung mit Javascript basierend Webserver mit CouchDB mit Angular.js und Node.js .

Hier haben wir ausgewählt

  • Angular.js für die clientseitige Entwicklung – Single Page Application
  • Domänenübergreifende Kommunikation zwischen Angular.js und Node.js
  • Node.js für serverseitige Entwicklung
  • Erholungsbasierte Webservice-Erstellung mit express.js (Express 4)
  • Datenbank – CouchDb
  • Node.js Cradle Module Extension (um die Kommunikation mit CouchDB herzustellen)
  • CouchDB-Ansichten mit Map-Reduce erstellen, um die Daten abzurufen

Wir haben einen Proof of Concept mit Javascript-basiertem Webserver erstellt, wobei wir uns auf den Umgang mit NoSql (CouchDB) mit dem Javascript-basierten Framework Node.js und angle.js auf der Clientseite konzentriert haben.

Architektur auf einen Blick


kannst du gelöschte tweets ansehen?


Schritte

Installation

  • Herunterladen und installieren Node.js von Hier .
  • Um die Anwendung zu entwickeln, müssen wir das Cradle-Modul für Node.js installieren
  • Befehl – ​​**npm install cradle **(sollte mit dem Internet verbunden sein)
  • Wir müssen express.js für node.jsCommand installieren – npm install express (sollte mit dem Internet verbunden sein)

Konfigurationscode

Jetzt werden wir versuchen, den Codeteil zu beschreiben

this.username = ''; this.password = ''; this.email = ''; var jdata = 'mydata='+JSON.stringify(formData); // The data is to be string. $http({ // Accessing the Angular $http Service to send data via REST Communication to Node Server. method: method, url: inserturl, data: jdata , headers: {'Content-Type': 'application/x-www-form-urlencoded'}, cache: $templateCache }). success(function(response) { console.log('success'); // Getting Success Response in Callback $scope.codeStatus = response.data; console.log($scope.codeStatus); }). error(function(response) ); $scope.list(); // Calling the list function in Angular Controller to show all current data in HTML return false;

Hier haben wir die express.js innerhalb von Javascript-Variablen in Bezug auf das Node.js-Konzept initialisiert.

var application_root = __dirname, express = require('express'), path = require('path'); 

Hier haben wir den Express-Webserver in der App-Variable initialisiert.

var databaseUrl = 'sampledb'; var cradle = require('cradle'); var connection = new(cradle.Connection)('http://admin:admin@localhost', 5984, { auth: { username: 'admin', password: 'admin' } }); var db = connection.database(databaseUrl); 

Hier haben wir die Verbindung zur Couchdb-Datenbank mit der Node.js Cradle-Modul-Erweiterungsbibliothek hergestellt.

var databaseUrl = 'sampledb'; var cradle = require('cradle'); var connection = new(cradle.Connection)('http://admin:admin@localhost', 5984, { auth: { username: 'admin', password: 'admin' } }); var db = connection.database(databaseUrl); 

Hier haben wir die Konfiguration in Bezug auf express.js vorgenommen, die sich stark von unterscheidet Express 3 .

In Express 3 der gleiche Teil wurde geschrieben als

// Config var env = process.env.NODE_ENV || 'development'; if ('development' == env) { var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); var methodOverride = require('method-override'); app.use(methodOverride()); app.use(express.static(path.join(application_root, 'public'))); var errorhandler = require('errorhandler'); app.use(errorhandler()); } 

Das macht ein wenig Sinn, wie die Express 3 wird migriert nach Express 4 .

norton.com/setup anmelden

In Express 4 app.use (app.router); ist entfernt. Stattdessen wird es mit den Rest-Diensten hinzugefügt. Die Art der Konfiguration wird ebenfalls geändert sowie die Änderungen, die sich in der Verwendung von . widerspiegeln bodyParser() , methodOverride() , methodOverride() , errorHandler({…}) .

Restdienstleistungscode

 app.configure(function () { app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(application_root, 'public'))); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); 

Hier haben wir unseren ersten REST-basierten Webservice erstellt und getestet, ob die express.js läuft.Unsere Beispiel-API wird sein http://127.0.0.1:1212/api oder http://localhost:1212/api

app.route('/api').get(function (req, res) { res.header('Access-Control-Allow-Origin', 'http://localhost'); res.send('Express API is running'); }); 

Hier haben wir eine weitere REST-API erstellt, um alle Benutzernamen aus der Benutzersammlung zu erhalten, und haben die Cradle-Abfrage durchgeführt.


CouchDB-Ansichtserstellung

Diese Ansichtserstellung muss ausgeführt werden, bevor die Angular Client-Anwendung ausgeführt wird, um einen bestimmten Datensatz von couchdb abzurufen.

Um diese Ansichtserstellung auszuführen, sollten wir Folgendes eingeben:

app.route('/getangularusers').get(function (req, res) { res.header('Access-Control-Allow-Origin', 'http://localhost'); res.header('Access-Control-Allow-Methods', 'GET, POST'); res.writeHead(200, {'Content-Type': 'application/json'}); str='['; db.view('characters/all', function (err, response) { response.forEach(function (row) { //console.log('%s is on the %s side of the force.', row.name, row.force); str = str + '{ 'name' : '' + row.username + ''},' +'
'; }); str = str.trim(); str = str.substring(0,str.length-1); str = str + ']'; res.end( str); }); }); 

in dem local.ini Datei des Ordners /etc/couchdb, um diese Kartenfunktion auszuführen, ohne der Admin-Benutzer zu sein.

Die REST-API der Ansichtserstellung ist also

[httpd] authentication_handlers = {couch_httpd_auth, null_authentication_handler} 

und die Beispiel-API ist – http://127.0.0.1:1212/getangularusers (Methode abrufen).

Als nächstes haben wir eine POST-Anfrage gestellt, um einen Benutzer über REST-Aufrufe zu erstellen.

app.route('/createview').get(function (req, res) { // Before running the Angular Application, the view must be created db.save('_design/characters', { // Main View Family Name all: { // A particular set of data selection by javascript map-reduce map: function (doc) { if (doc.username) emit(doc.username, doc); // specific code to execute map function on each document } } }); }); 

Unsere Beispiel-API wird sein – http://127.0.0.1:1212/insertangularcouchuser (Post-Methode – Zugriff von der Clientseite)

app.route('/insertangularcouchuser').post(function (req, res){ console.log('POST: '); res.header('Access-Control-Allow-Origin', 'http://localhost'); res.header('Access-Control-Allow-Methods', 'GET, POST'); // The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross // Domain Request console.log(req.body); console.log(req.body.mydata); var jsonData = JSON.parse(req.body.mydata); var doc = {email: jsonData.email, password: jsonData.password, username: jsonData.username}; db.save('''+Math.random()+''', doc, function (err, res) { if (err) { // Handle error res += ' SAVE ERROR: Could not save record!!
'; } else { // Handle success res += ' SUCESSFUL SAVE
'; } }); }); 

Wir haben den Server so eingestellt, dass er am Port 1212 lauscht.

Führen Sie nun den Knoten aus appcouchdbangular.js aus der Kommandoshell. Dies ist unsere Node.js-spezifische Codedatei.

Für Referenzen :


Angular.js-Teil

Unten ist der Code in Angular Controller

Frühlings-Cloud-Gateway-Ratenbegrenzung
// Launch server app.listen(1212); 

};

$scope.list = function() {
Var-URL = ' http://localhost:1212/getangularusers '; // URL, auf der der Node.js-Server ausgeführt wird
$http.get(url).success(Funktion(Daten) {
$scope.users = Daten;
});
// Zugriff auf den Angular $http-Dienst, um Daten über die REST-Kommunikation vom Node-Server abzurufen
};

$scope.list();
}

Angular Template und HTML

'use strict'; 

var myApp = angular.module(‘myApp’, []); // Taking Angular Application in Javascript Variable

// Below is the code to allow cross domain request from web server through angular.js
myApp.config([‘$httpProvider’, function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[‘X-Requested-With’];
}
]);

/* Controllers */

function UserListCtrl($scope, $http, $templateCache) {

var method = ‘POST’;
var inserturl = ‘ http://localhost:1212/insertangularcouchuser ’;// URL where the Node.js server is running
$scope.codeStatus = ;
$scope.save = function() {
// Preparing the Json Data from the Angular Model to send in the Server.
var formData = {
‘username’ : this.username,
‘password’ : this.password,
‘email’ : this.email
};

|_+_|

Wir haben die Angular-Anwendung im obigen Code verwiesen

  

Wir haben den Angular Controller im obigen Code bezeichnet

  

Wir haben das ng-repeat-Tag verwendet, um die Benutzer Datenmodell aus REST-Kommunikation und in HTML dargestellt

 Search:  




Wir haben das ng-submit-Tag verwendet, um die zu senden Benutzer Datenmodell von SICH AUSRUHEN Kommunikation und zum Speichern an den Node-Server gesendet CouchDB .

Reader kann den kompletten Quellcode in herunterladen GitHub .

Danke fürs Lesen

Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Folge uns auf Facebook | Twitter

Erfahren Sie mehr

Der komplette Node.js-Entwicklerkurs (3. Auflage)

wie kaufe ich hodl

Angular & NodeJS - Der MEAN Stack Guide

NodeJS - The Complete Guide (inkl. MVC, REST APIs, GraphQL)

Node.js: Der vollständige Leitfaden zum Erstellen von RESTful-APIs (2018)

Angular 7 (ehemals Angular 2) - Das komplette Handbuch

Angular & NodeJS - Der MEAN Stack Guide

Das Bootcamp für Webentwickler

MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS und NodeJS

Angular 7 CRUD mit Node.JS-API

Tutorial zur Angular- und Nodejs-Integration

Angular + WebSocket + Node.js Express = RxJS WebSocketSubject ❤️

Preisvorhersage für csc-Münzen

Einrichten Ihres neuen Mac für die MEAN-Stack-Entwicklung

Frontend-Entwicklerhandbuch 2019

Ursprünglich veröffentlicht am https://codequs.com

#node-js #angular-js #javascript #web-entwicklung