Итак, вы хотите узнать, как использовать AngularJS, NodeJS и MySQL.Очень хорошо.AngularJS и NodeJS используют JavaScript.AngularJS - это 100% JavaScript.Есть только несколько гаек и болтов, которые должны соответствовать друг другу.AngularJS фокусируется на стороне внешнего интерфейса, в то время как NodeJS фокусируется на стороне внешнего интерфейса.MySQL используется для управления базами данных.Есть всего несколько приемов, которые вы должны использовать, например, MVC, чтобы заставить ваш код работать и быть надежным.Есть много способов реализовать свой проект.Один из них:
- Запустите командную строку Node.js.
- Создайте новый каталог проекта.Например, «myjspro»
- cd pathto / myjspro или cd pathto \ myjspro или cd pathto \ myjspro
- npm init
- npm установить mysql --save
- npm install express --save
- npm install body-parser --save
- и т. д.
Как только вы выполнили вышеуказанные шаги, мы можем начать кодирование,В вашем бэкэнд-коде вам нужно настроить порт прослушивания.Вам также необходимо настроить каталог по умолчанию.В вашем интерфейсе вы можете использовать привязку данных для подключения вашей модели данных к вашим представлениям.Например, Scope - это связующее звено между контроллером приложения и представлением.Структурируйте свое приложение по модульному принципу.Есть много строительных блоков, которые мы можем использовать для наших приложений.Список бесконечен, так что давайте начнем ... Двойные фигурные выражения {{ }} используются для наблюдения, регистрируют методы слушателей и обновляют представления.
Front End:
- app / view / index.html
- app / js / app.js
- app / js / test.js
- app / lib / angular / angular.js
- app / lib / jquery / jquery.js
Back End:
db / mydb2.sql
node_modules
index.js
package.json
База данных:
- Создать базу данных, например, «mydb2»
- Создать пользователя базы данных, например, «jspro2»
- Создатьпароль пользователя базы данных.
- Создание таблиц базы данных для проекта, например «clientes2»
Для запуска проекта вы можете использовать: node index.js или npm start с командной строкой.Приложение будет работать на локальном хосте.Используйте браузер для просмотра проекта.т.е. http://localhost:8000/
Счастливое кодирование ...
index.js
//////////////////////
//
// index.js
//
///////////////////////
console.log("Start...");
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mysql = require('mysql');
var now = new Date();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname+'/app'));
var conexao = mysql.createConnection({
host: "localhost",
user: "jspro2",
password: "jspro32",
database: "mydb2"
});
conexao.connect(function(err){
if(err){
console.log(info()+" "+err);
}
else
{
console.log(info()+" connected...");
}
});
function info()
{
now = new Date();
return now.getTime();
}
app.set('port', (process.env.PORT || 8000));
app.get('/', function(req, res){
console.log(info()+" page request.... ");
res.sendFile(__dirname +'/'+'app/view/index.html');
});
app.get('/clientes', function(req, res){
console.log(info()+" clientes request.... ");
var sql = "SELECT * FROM CLIENTES2";
conexao.query(sql, function(err, result, fields){
if(err){
console.log(info()+" "+err);
res.send(info()+": dbErr...");
}
else
{
console.log(info()+" "+result);
res.send(result);
}
});
});
app.post('/clientPost', function(req, res){
var data = req.body;
var dnome = data.nome;
var dmorada = data.morada;
var sql = "INSERT INTO CLIENTES2 (nome,morada) VALUES(?, ?)";
conexao.query(sql, [dnome, dmorada], function(err, result){
if(err){
console.log(info()+":02 "+err);
res.send(info()+": dbErr02...");
}
else
{
console.log(info()+" "+ result);
res.send(result);
}
});
});
var dport = app.get('port');
app.listen(dport, function(){
console.log(info()+" "+" app is running at http://localhost:"+dport+"/");
console.log(" Hit CRTL-C to stop the node server. ");
});
//
//
app.js
/////////////////////////
//
// app.js
//
/////////////////////////////////
//alert("start...");
var now = new Date();
//Define the clientesApp module.
var clientesApp = angular.module('clientesApp', []);
//Define the clientesCtrl controller.
clientesApp.controller('clientesCtrl', function clientsList($scope, $http){
$scope.clientes = [
{
nome: 'Marc',
morada: '123 West Parade, Nome'
},
{
nome: 'Jean',
morada: '432 East Cresent, Lisboa'
}
];
$scope.feedback = now;
$scope.listView = function(){
//alert("View");
$http.get('/clientes').then(function(data){
$scope.clientes = data.data;
$scope.feedback = data;
});
};
$scope.listSubmit = function(){
//alert("Submit..");
var listData = {
nome: $scope.nome,
morada: $scope.morada
};
//alert(listData.nome);
$http.post('/clientPost', listData).then(function(data){
$scope.feedback = data;
});
};
});
//alert(now);
//
//
index.html
<!DOCTYPE html>
<!--
index.html
-->
<html lang="en">
<head>
<title>DemoJSPro</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-app="clientesApp">
<h1>AngularJS Demo using NodeJS and MySQL.</h1>
<div ng-controller="clientesCtrl">
<hr>
<div>{{ feedback }}</div>
<hr>
<div>
<br>
Nome:
<input type="text" ng-model="nome">
<br>
Morada:
<input type="text" ng-model="morada">
<br>
<input type="button" value="OK" ng-click="listSubmit()">
<br>
</div>
<div>
<p>Selecionar um registo:</p>
<select ng-model="clienteSelecionado" ng-options="x.nome for x in clientes">
</select>
<table>
<tr>
<td>{{ clienteSelecionado.nome }}</td>
<td>{{ clienteSelecionado.morada }}</td>
</tr>
</table>
</div>
<hr>
<div>
<input type="button" value="View" ng-click="listView()">
<hr>
<table>
<tr>
<th>###</th>
<th>Nome</th>
<th>Morada</th>
</tr>
<tr ng-repeat=" y in clientes">
<td>{{ $index + 1 }}</td>
<td>{{ y.nome }}</td>
<td>{{ y.morada }}</td>
</tr>
</table>
</div>
<br>
<hr>
<br><br>
</div>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/jquery/jquery.js"></script>
<script src="../js/app.js"></script>
<script src="../js/test.js"></script>
</body>
</html>
mydb2.sql
#//////////////////////////
#//
#// mydb2.sql
#//
#///////////////////////////
CREATE DATABASE MYDB2;
USE MYDB2;
CREATE TABLE CLIENTES2 (
id int NOT NULL auto_increment,
nome varchar (30) NOT NULL,
morada varchar (99) NOT NULL,
PRIMARY KEY (id)
);
GRANT ALL ON MYDB2.* to jspro2@localhost identified by 'jspro32';
Наслаждайтесь.