ทำ Node.js + API + Angular

2 min readNov 4, 2016

บทความนี้เป็นการรีโพสต์ของผมเอง โดยย้ายจาก wordpress ของข้าพเจ้าโดยส่วนตัวตอนนั้นกำลังเขียน Angular อยู่นะครับ ไม่น่าเชื่อสองปีเเทบจะหมดความนิยมไปแล้ว คิดถึงเธอ “Angular”

วันนี้เราจะลองทำ APIs กัน อิๆๆ ก่อนอื่นเลยเราต้อง รู้จักการส่งค่าก่อนนะว่าส่งอย่างไง อันนี้เราจะส่งค่าจาก Front มา black นะ เหมือนเดิม สร้าง ไฟล์ index.js เป็น Black end

var express = require('express')
var app = express()
var bodyParser = require('body-parser')

app.use(express.static('public'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

var server = app.listen(3000 , function(){
		var host = server.address().address
		var port = server.address().port
		console.log('app listing :' , host , port)
})

จากนั้นสร้างไฟล์ โฟร์เดอร์ Public ในนั้นมี augular + html

index.html

<!doctype html>
<html ng-app="todoApp">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
		<script src="app.js"></script>
	</head>
	<body ng-controller="TodoListController as todoList">
		<h2>RestFullapi</h2> <br>
		<form ng-submit = todoList.sub(input)>
			text : <input type="text" ng-model = "input">
		</form>
	</body>
</html>

อธิบายนิดหน่อย เรารับค่ามาเเล้วส่งค่าผ่านตัวแปร input เเล้วส่งไปที่ todoList.sub(input) ไปยัง angular ครับ (Methods)
สร้างไฟล์ app.js

angular.module('todoApp', [])
  .controller('TodoListController', function($http) {
    var todoList = this

      todoList.sub = function (input) {
        var Schema = {
          word : input
        }
        GetData(Schema)
      }

      function GetData (data) {
        $http.post('/api/data', data) 
        .then(function success (response) {
          alert('Success')
          console.log(data)
        }, function error (response) {
          alert(response.data.message)
        })
      }
  })

จะเห็นว่าเรานั้นใช้ API : localhost:3000/api/data มันยังส่งไม่ได้เเน่นอนครับ เราต้องแก้ไฟล์ที่ชื่อ่วา index.js อีกครับ มันหาpath ไม่เจอนั้นเอง

var data = require('./data.route.js')
app.use('/' , data)

เพื่อให้ง่าย ผมจะเขียนแบบแยกไฟล์อะนะ อิอิ ให้สร้างไฟล์ชื่อว่า data.route.js

;(function () {
  'use strict'
  var express = require('express')
  var router = express.Router()
  var Dictory = []

  router.get('/api/data' , function (req , res ,next){
     res.send(Dictory)
  })
  router.post('/api/data', function (req, res, next) {
    console.log (req.body)
    Dictory.push(req.body)
  })
  module.exports = router
})()

เส็ดเเล้ว รันได้เลย อิอิอิอ
node index.js
localhost:3000 Run Angular
localhost:3000/api/data Run APIs

infernalslam/Lecture

Contribute to Lecture development by creating an account on GitHub.

github.com

เราจะทำ Template ไว้เลยนะครับคราวหน้ามีอะไรสนุกๆ เราจะได้เริ่มจากตรงนี้

โดยเริ่มจาก

ใน folder จะเเบ่งส่วน ถ้าเป็น Front — end จะอยู่ในส่วนของโฟร์เดอร์ Public นะครับ เเยกไปเลยครับ เวลารันจะได้ไม่สับสนนะครับ

ผมจะเพิ่มโค็ดส่วนนี้เข้าไปครับ เพื่อให้มันเริ่มทำงานที่ folder

var express = require('express')
var app = express()

app.use(express.static('public'))

var server = app.listen(3000 , function(){
		var host = server.address().address
		var port = server.address().port
		console.log('app listing :' , host , port)
})

จากนั้นสร้างไฟล์ index.html เเละ app.js
index.html เท่ากับ โชว์การเเสดงผล (หน้าตา)
app.js เท่ากับ การคำนวณเราจะใช้ Angular เเทนนะย่ะจะบอกให้ (สมอง)

test ด้วยการรัน node index นะจ๊ะ
จากนั้นเขียน file index.html จากนั้น เขียนคำว่า อะไรดีล่ะ
Hello
ไปเลยดูผลนะจ๊ะ อิอิอิ
สวยงามค่ะ

ซึ่งเราจะทำ Template ไว้เลยนะครับคราวหน้ามีอะไรสนุกๆ เราจะได้เริ่มจากตรงนี้เลยครับ

infernalslam/Template_nodejs

Contribute to Template_nodejs development by creating an account on GitHub.