MEAN.JS - Panduan Cepat

Apa itu MEAN.js?

Syarat MEAN.jsadalah solusi sumber terbuka JavaScript tumpukan penuh, digunakan untuk membangun situs web dinamis dan aplikasi web. MEAN adalah singkatan dariMongoDB, Express, Node.js dan AngularJS, yang merupakan komponen kunci dari tumpukan MEAN.

Ini pada dasarnya dikembangkan untuk menyelesaikan masalah umum dengan menghubungkan kerangka kerja tersebut (Mongo, Express Nodejs, AngularJS), membangun kerangka kerja yang kuat untuk mendukung kebutuhan pengembangan harian, dan membantu pengembang menggunakan praktik yang lebih baik saat bekerja dengan komponen JavaScript yang populer.

Stack berarti menggunakan database dan web server di bagian belakang, di tengah Anda akan memiliki logika dan kontrol untuk aplikasi dan interaksi pengguna di ujung depan.

• MongoDB - Sistem Database

• Express - Kerangka Web Back-end

• Node.js - Platform Server Web

• AngularJS - Kerangka Front-end

Sejarah

Nama MEAN diciptakan oleh Valeri Karpov , seorang pengembang MongoDB.

Mengapa menggunakan MEAN.js?

• Ini adalah kerangka kerja sumber terbuka yang gratis untuk digunakan.

• Ini dapat digunakan sebagai solusi mandiri di seluruh aplikasi.

• Ini memberikan biaya pengembangan yang lebih rendah dan meningkatkan fleksibilitas dan efisiensi pengembang.

• Ini mendukung pola MVC dan menggunakan JSON untuk mentransfer data.

• Ini menyediakan kerangka kerja tambahan, pustaka, dan modul yang dapat digunakan kembali untuk meningkatkan kecepatan pengembangan.

Sebelum kita mulai dengan konsep lebih lanjut, kita akan melihat blok bangunan dasar dari aplikasi MEAN.JS.

Pengantar MongoDB

Dalam akronim MEAN ,Msingkatan dari MongoDB, yang merupakan database NoSQL open source yang menyimpan data dalam format JSON. Ini menggunakan model data berorientasi dokumen untuk menyimpan data daripada menggunakan tabel dan baris seperti yang kita gunakan dalam database relasional. Ini menyimpan data dalam format biner JSON (JavaScript Serialized Object Notation) untuk meneruskan data dengan mudah antara klien dan server. MongoDB mengerjakan konsep pengumpulan dan dokumen. Untuk informasi lebih lanjut, lihat tautan ini MongoDB .

Pengantar Express

Dalam akronim MEAN ,Esingkatan dari Express , yang merupakan framework aplikasi web Node.js fleksibel yang digunakan untuk mempermudah proses pengembangan. Mudah untuk dikonfigurasi dan disesuaikan, yang memungkinkan membangun aplikasi yang aman, modular, dan cepat. Ini menentukan rute aplikasi tergantung pada metode HTTP dan URL. Anda dapat terhubung ke database seperti MongoDB, MySQL, Redis dengan mudah. Untuk informasi lebih lanjut, lihat tautan Express ini .

Pengantar AngularJS

Dalam akronim MEAN ,Asingkatan dari AngularJS , yang merupakan kerangka kerja JavaScript frontend web. Ini memungkinkan pembuatan aplikasi satu halaman yang dinamis dengan cara Model View Controller (MVC) yang bersih. AngularJS secara otomatis menangani kode JavaScript yang cocok untuk setiap browser. Untuk informasi lebih lanjut, lihat tautan ini AngularJS .

Pengantar Node.js

Dalam akronim MEAN ,Nsingkatan dari Node.js , yang merupakan platform sisi server yang digunakan untuk pengembangan aplikasi web seperti situs streaming video, aplikasi halaman tunggal, dan aplikasi web lainnya. Ini menyediakan pustaka yang kaya dari berbagai modul JavaScript yang menyederhanakan pengembangan aplikasi web menggunakan Node.js secara luas. Itu dibangun di atas Mesin JavaScript V8 Google Chrome, sehingga sangat cepat dalam eksekusi kode. Untuk informasi lebih lanjut, lihat link ini Node.js .

MEAN adalah kerangka JavaScript open source, digunakan untuk membangun situs web dinamis dan aplikasi web. Ini mencakup empat blok bangunan berikut untuk membangun aplikasi.

• MongoDB - Ini adalah database dokumen, yang menyimpan data dalam dokumen fleksibel seperti JSON.

• Express - Ini adalah kerangka aplikasi web untuk Nodejs.

• Node.js- Ini adalah Platform Server Web. Ini menyediakan pustaka yang kaya dari berbagai modul JavaScript yang menyederhanakan pengembangan aplikasi web.

• AngularJS- Ini adalah kerangka JavaScript frontend web. Ini memungkinkan pembuatan aplikasi satu halaman yang dinamis dengan cara Model View Controller (MVC) yang bersih.

Untuk informasi lebih lanjut tentang ini, Anda dapat merujuk pada bab ikhtisar . Diagram di bawah ini menggambarkan arsitektur aplikasi tumpukan MEAN.

Seperti yang ditunjukkan pada gambar di atas, kami memiliki AngularJS sebagai bahasa sisi klien yang memproses permintaan klien.

• Setiap kali pengguna membuat permintaan, itu pertama kali diproses oleh AngularJS.

• Selanjutnya, permintaan memasuki tahap kedua, di mana kami memiliki Node.js sebagai bahasa sisi server dan ExpressJS sebagai kerangka kerja web backend.

• Node.js menangani permintaan klien / server dan ExpressJS membuat permintaan ke database.

• Pada tahap terakhir, MongoDB (database) mengambil data dan mengirimkan respons ke ExpressJS.

• ExpressJS mengembalikan respons ke Nodejs dan pada gilirannya ke AngularJS dan kemudian menampilkan respons kepada pengguna.

Bab ini mencakup pembuatan dan pengaturan aplikasi MEAN. Kami menggunakan NodeJS dan ExpressJS bersama-sama untuk membuat proyek.

Prasyarat

Sebelum kita mulai membuat aplikasi MEAN, kita perlu menginstal prasyarat yang diperlukan.

Anda dapat menginstal versi terbaru Node.js dengan mengunjungi situs web Node.js di Node.js (Ini untuk pengguna Windows). Saat Anda mengunduh Node.js, npm akan terinstal secara otomatis di sistem Anda. Pengguna Linux dapat menginstal Node dan npm dengan menggunakan tautan ini .

Periksa versi Node dan npm dengan menggunakan perintah di bawah ini -

$ node --version
$ npm --version

Perintah akan menampilkan versi seperti yang ditunjukkan pada gambar di bawah ini -

Membuat Proyek Ekspres

Buat direktori proyek dengan menggunakan perintah mkdir seperti yang ditunjukkan di bawah ini -

$ mkdir mean-demo //this is name of repository

Direktori di atas adalah root dari aplikasi node. Sekarang, untuk membuat file package.json, jalankan perintah di bawah ini -

$ cd webapp-demo
$ npm init

Perintah init akan memandu Anda membuat file package.json -

Utilitas ini akan memandu Anda dalam membuat file package.json. Ini hanya mencakup item yang paling umum, dan mencoba menebak default yang masuk akal.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

Klik ya dan struktur folder seperti di bawah ini akan dibuat -

-mean-demo
   -package.json

File package.json akan memiliki info berikut -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Sekarang untuk mengkonfigurasi proyek Express ke dalam folder saat ini dan menginstal opsi konfigurasi untuk kerangka kerja, gunakan perintah di bawah ini -

npm install express --save

Buka direktori proyek Anda dan buka file package.json, Anda akan melihat informasi di bawah ini -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Di sini Anda dapat melihat ketergantungan ekspres ditambahkan ke file. Sekarang, struktur proyeknya seperti di bawah ini -

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

Menjalankan Aplikasi

Arahkan ke direktori proyek yang baru Anda buat dan buat file server.js dengan konten di bawah ini.

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Selanjutnya, jalankan aplikasi dengan perintah di bawah ini -

$ npm start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Ini menginformasikan bahwa aplikasi Express sedang berjalan. Buka browser apa saja dan akses aplikasi menggunakanhttp://localhost:3000. Anda akan melihat Selamat datang di Tutorialspoint! teks seperti yang ditunjukkan di bawah ini -

Bab ini menunjukkan rute pembuatan untuk aplikasi dengan Node dan Express.

Pada bab sebelumnya, kami membuat aplikasi node-express. Arahkan ke direktori proyek yang disebut mean-demo . Buka direktori dengan menggunakan perintah di bawah ini -

$ cd mean-demo

Menyiapkan Rute

Rute digunakan sebagai layanan pemetaan dengan menggunakan URL permintaan masuk. Bukaserver.js file dan atur perutean seperti yang ditunjukkan di bawah ini -

// modules =================================================
const express = require('express');
const app = express();

// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Menjalankan Aplikasi

Selanjutnya, jalankan aplikasi dengan perintah di bawah ini -

$ npm start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Sekarang, masuk ke browser dan ketik http://localhost:3000/myroute. Anda akan mendapatkan halaman seperti yang ditunjukkan pada gambar di bawah ini -

Dalam bab ini, kami akan mendemonstrasikan cara menggunakan model data di aplikasi Node-express kami.

MongoDB adalah database NoSQL open source yang menyimpan data dalam format JSON. Ini menggunakan model data berorientasi dokumen untuk menyimpan data daripada menggunakan tabel dan baris seperti yang kita gunakan dalam database relasional. Dalam bab ini, kami menggunakan Mongodb untuk membangun model data.

Model data menentukan data apa yang ada dalam dokumen, dan data apa yang harus ada di dokumen. Lihat instalasi resmi MongoDB , untuk menginstal MongoDB.

Kami akan menggunakan kode bab sebelumnya. Anda dapat mengunduh kode sumber di tautan ini . Unduh file zip; ekstrak di sistem Anda. Buka terminal dan jalankan perintah di bawah ini untuk menginstal dependensi modul npm.

$ cd mean-demo
$ npm install

Menambahkan Mongoose ke Aplikasi

Mongoose adalah pustaka pemodelan data yang menentukan lingkungan dan struktur untuk data dengan membuat MongoDB menjadi kuat. Anda dapat menginstal Mongoose sebagai modul npm melalui baris perintah. Buka folder root Anda dan jalankan perintah di bawah ini -

$ npm install --save mongoose

Perintah di atas akan mengunduh paket baru dan menginstalnya ke folder node_modules . The --save bendera akan menambah paket ini untuk package.json berkas.

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

Menyiapkan File Koneksi

Untuk bekerja dengan model data, kita akan menggunakan folder app / models . Mari buat model students.js seperti di bawah ini -

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

Anda dapat mengatur file koneksi dengan membuat file dan menggunakannya dalam aplikasi. Buat file bernama db.js di config / db.js . Isi file seperti di bawah ini -

module.exports = {
   url : 'mongodb://localhost:27017/test'
}

Di sini tes adalah nama database.

Di sini diasumsikan bahwa Anda telah menginstal MongoDB secara lokal. Setelah terinstal, mulailah Mongo dan buat database dengan tes nama. Db ini akan memiliki koleksi berdasarkan nama siswa. Masukkan beberapa data ke koleksi ini. Dalam kasus kami, kami telah menyisipkan record menggunakan db.students.insertOne ({name: 'Manisha', place: 'Pune', country: 'India'});

Bawa file db.js ke dalam aplikasi, yaitu di server.js . Isi file seperti yang ditunjukkan di bawah ini -

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Selanjutnya, jalankan aplikasi dengan perintah di bawah ini -

$ npm start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Sekarang, masuk ke browser dan ketik http://localhost:3000/api/students. Anda akan mendapatkan halaman seperti yang ditunjukkan pada gambar di bawah ini -

Dalam bab ini, kita akan melihat aplikasi kita berinteraksi melalui REST API dengan database kita dengan menggunakan metode HTTP. Istilah REST adalah singkatan dari REpresentational State Transfer, yang merupakan gaya arsitektur yang dirancang untuk berkomunikasi dengan layanan web dan API adalah singkatan dari Application Program Interface yang memungkinkan aplikasi berinteraksi satu sama lain.

Pertama, kita akan membuat RESTful API untuk mendapatkan semua item, membuat item, dan menghapus item. Untuk setiap item, _id akan dibuat secara otomatis oleh MongoDB. Tabel di bawah ini menjelaskan bagaimana aplikasi harus meminta data dari API -

Metode HTTP	Jalur URL	Deskripsi
DAPATKAN	/api/students	Ini digunakan untuk mendapatkan semua siswa dari koleksi Siswa.
POS	/api/students/send	Ini digunakan untuk membuat catatan siswa dalam koleksi Siswa.
MENGHAPUS	/api/students/student_id	Ini digunakan untuk menghapus catatan siswa dari koleksi Siswa.

Rute API RESTful

Kami pertama-tama akan membahas Metode Posting di RESTful API Routes.

POS

Pertama mari kita buat catatan dalam koleksi Student melalui REST API kita. Kode untuk kasus khusus ini dapat ditemukan di file server.js . Sebagai referensi, bagian kode ditempel di sini -

app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         res.json({ message: 'student created!' });
   });
});

Eksekusi

Anda dapat mengunduh kode sumber untuk aplikasi ini di tautan ini . Unduh file zip; ekstrak di sistem Anda. Buka terminal dan jalankan perintah di bawah ini untuk menginstal dependensi modul npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Untuk mengurai permintaan, kita membutuhkan paket body parser. Karenanya, jalankan perintah di bawah ini untuk dimasukkan ke dalam aplikasi Anda.

npm install --save body-parser

Kode sumber terlampir sudah memiliki ketergantungan ini, oleh karena itu tidak perlu menjalankan perintah di atas, ini hanya untuk info Anda.

Untuk menjalankan aplikasi, navigasikan ke direktori proyek yang baru Anda buat dan jalankan dengan perintah yang diberikan di bawah ini -

npm start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Ada banyak alat untuk menguji panggilan API, di sini kami menggunakan salah satu ekstensi ramah pengguna untuk Chrome yang disebut Postman REST Client .

Buka Postman REST Client, masukkan URL sebagai http://localhost:3000/api/students/send, pilih metode POST . Selanjutnya, masukkan data permintaan seperti yang ditunjukkan di bawah ini -

Perhatikan bahwa kami mengirimkan data nama sebagai x-www-form-urlencoded . Ini akan mengirim semua data kami ke server Node sebagai string kueri.

Klik pada tombol Send untuk membuat catatan siswa. Pesan sukses akan muncul seperti yang ditunjukkan di bawah ini -

DAPATKAN

Selanjutnya, mari kita dapatkan semua catatan siswa dari mongodb. Rute berikut perlu ditulis. Anda dapat menemukan kode lengkap di file server.js .

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});

Selanjutnya, buka Postman REST Client, masukkan URL sebagai

http://localhost:3000/api/students, pilih metode GET dan klik tombol Send untuk mendapatkan semua siswa.

MENGHAPUS

Selanjutnya, mari kita lihat cara menghapus record dari koleksi mongo kami melalui panggilan REST api.

Rute berikut perlu ditulis. Anda dapat menemukan kode lengkap di file server.js .

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

Selanjutnya, buka Postman REST Client, masukkan URL sebagai

http://localhost:3000/api/students/5d1492fa74f1771faa61146d

(di sini 5d1492fa74f1771faa61146d adalah catatan yang akan kami hapus dari koleksi Siswa).

Pilih metode DELETE dan klik tombol Send untuk mendapatkan semua siswa.

Anda dapat memeriksa MongoDB untuk data yang dihapus, dengan melakukan panggilan GET ke http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

Dalam bab ini, kami akan menambahkan komponen sudut ke aplikasi. Ini adalah kerangka kerja JavaScript front end web, yang memungkinkan pembuatan aplikasi satu halaman yang dinamis dengan menggunakan pola Model View Controller (MVC). Di bab arsitektur MEAN.JS , Anda telah melihat bagaimana AngularJS akan memproses permintaan klien dan mendapatkan hasilnya dari database.

Mengenal AngularJS

AngularJS adalah framework aplikasi web sumber terbuka yang menggunakan HTML sebagai bahasa template dan memperluas sintaks HTML untuk mengekspresikan komponen aplikasi Anda dengan jelas. AngularJS menyediakan beberapa fitur dasar seperti pengikatan data, model, tampilan, pengontrol, layanan, dll. Untuk informasi lebih lanjut tentang AngularJS, lihat tautan ini .

Anda dapat membuat halaman aplikasi Angular dengan menambahkan Angular di halaman. Itu dapat ditambahkan hanya dengan menggunakan file JavaScript eksternal, yang dapat diunduh atau dirujuk langsung dengan versi CDN.

Pertimbangkan kami telah mengunduh file dan mereferensikannya secara lokal dengan menambahkan ke halaman sebagai berikut -

<script src="angular.min.js"></script>

Sekarang, kita perlu memberi tahu Angular bahwa halaman ini adalah aplikasi Angular. Oleh karena itu, kita dapat melakukan ini dengan menambahkan atribut, ng-app ke tag <html> atau <body> seperti yang ditunjukkan di bawah ini -

<html ng-app>
or
<body ng-app>

Ng-app dapat ditambahkan ke elemen mana pun di laman, tetapi sering kali dimasukkan ke dalam tag <html> atau <body> sehingga Angular dapat berfungsi di mana saja dalam laman.

Aplikasi Sudut sebagai Modul

Untuk bekerja dengan aplikasi Angular, kita perlu mendefinisikan modul. Ini adalah tempat di mana Anda dapat mengelompokkan komponen, arahan, layanan, dll., Yang terkait dengan aplikasi. Nama modul direferensikan oleh atribut ng-app di HTML. Misalnya, kita akan mengatakan nama modul aplikasi Angular sebagai myApp dan dapat ditentukan dalam tag <html> seperti yang ditunjukkan di bawah ini -

<html ng-app="myApp">

Kita dapat membuat definisi untuk aplikasi dengan menggunakan pernyataan di bawah ini di file JavaScript eksternal -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Mendefinisikan Controller

Aplikasi AngularJS mengandalkan pengontrol untuk mengontrol aliran data dalam aplikasi. Pengontrol ditentukan dengan menggunakan direktif ng-controller .

Misalnya, kita akan memasang controller ke body dengan menggunakan direktif ng-controller, bersama dengan nama controller yang ingin Anda gunakan. Pada baris di bawah ini, kami menggunakan nama pengontrol sebagai "myController".

<body ng-controller="myController">

Anda dapat memasang pengontrol (myController) ke modul Angular (myApp) seperti yang ditunjukkan di bawah ini -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Lebih baik menggunakan fungsi bernama daripada fungsi anonim untuk keterbacaan, kegunaan kembali, dan testabilitas. Pada kode di bawah ini, kami menggunakan fungsi bernama baru "myController" untuk menyimpan kode pengontrol -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Untuk informasi lebih lanjut tentang pengontrol, lihat tautan ini .

Mendefinisikan Ruang Lingkup

Scope adalah objek JavaScript khusus yang menghubungkan pengontrol dengan tampilan dan berisi data model. Dalam pengontrol, data model diakses melalui objek $ scope. Fungsi controller mengambil parameter $ scope yang telah dibuat oleh Angular dan memberikan akses langsung ke model.

Potongan kode di bawah ini menentukan cara memperbarui fungsi pengontrol untuk menerima parameter $ scope dan menyetel nilai default -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Untuk informasi lebih lanjut tentang pengontrol, lihat tautan ini . Pada bab selanjutnya, kita akan mulai membuat aplikasi satu halaman dengan menggunakan Angular.

Dalam tumpukan MEAN, Angular dikenal sebagai kerangka kerja JavaScript kedua, yang memungkinkan pembuatan aplikasi satu halaman dengan cara Model View Controller (MVC) yang bersih.

AngularJS sebagai Kerangka front-end menggunakan hal-hal berikut -

• Menggunakan Bower untuk menginstal file dan perpustakaan

• Menggunakan pengontrol dan layanan untuk struktur aplikasi Angular

• Membuat halaman HTML yang berbeda

• Menggunakan modul ngRoute untuk menangani perutean dan layanan untuk aplikasi AngularJS

• Menggunakan Bootstrap untuk membuat aplikasi menjadi menarik

Menyiapkan Aplikasi Sudut Kami

Mari kita membangun aplikasi sederhana yang memiliki backend Node.js dan frontend AngularJS. Untuk aplikasi Angular kami, kami ingin -

• Dua halaman berbeda (Home, Student)

• Pengontrol sudut yang berbeda untuk masing-masing

• Tidak ada halaman yang disegarkan saat berpindah halaman

Bower dan Menarik Komponen

Kami akan membutuhkan file tertentu untuk aplikasi kami seperti bootstrap dan angular. Kami akan memberi tahu Bower untuk mengambil komponen itu untuk kami.

Pertama, instal bower pada mesin Anda dengan menjalankan perintah di bawah ini pada terminal perintah Anda -

npm install -g bower

Ini akan menginstal bower dan membuatnya dapat diakses secara global di sistem Anda. Sekarang tempatkan file .bowerrc dan bower.json di bawah folder root Anda. Dalam kasus kami itumean-demo. Isi dari kedua file tersebut adalah sebagai berikut -

.bowerrc - Ini akan memberi tahu Bower di mana harus meletakkan file kita -

{
   "directory": "public/libs"
}

bower.json - Ini mirip dengan package.json dan akan memberi tahu Bower paket mana yang dibutuhkan.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Selanjutnya, instal komponen Bower dengan menggunakan perintah di bawah ini. Anda dapat melihat bower menarik semua file di bawah public / libs .

$ bower install

Struktur direktori kami adalah sebagai berikut -

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Pengontrol Sudut

Kontroler kami (public / js / controllers / MainCtrl.js) adalah sebagai berikut -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

Controller public / js / controllers / StudentCtrl.js adalah sebagai berikut -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Rute Sudut

File rute kami (public / js / appRoutes.js) adalah sebagai berikut -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

Sekarang setelah kita memiliki pengontrol, dan rute, kita akan menggabungkan semuanya dan menyuntikkan modul ini ke publik utama / js / app.js kita sebagai berikut -

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

Lihat file

Angular menggunakan file template, yang bisa dimasukkan ke dalam <div ng-view> </div> di file index.html. Direktif ng-view membuat placeholder, di mana tampilan terkait (tampilan HTML atau ng-template) dapat ditempatkan berdasarkan konfigurasi. Untuk informasi lebih lanjut tentang tampilan sudut, kunjungi tautan ini .

Saat Anda siap dengan perutean, buat file template yang lebih kecil dan masukkan ke dalam file index.html . File index.html akan memiliki cuplikan kode berikut -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Menjalankan Aplikasi

Eksekusi

Anda dapat mengunduh kode sumber untuk aplikasi ini di tautan ini . Unduh file zip; ekstrak di sistem Anda. Buka terminal dan jalankan perintah di bawah ini untuk menginstal dependensi modul npm.

$ cd mean-demo
$ npm install

Selanjutnya jalankan perintah di bawah ini -

$ node start

Anda akan mendapatkan konfirmasi seperti yang ditunjukkan pada gambar di bawah ini -

Sekarang, masuk ke browser dan ketik http://localhost:3000. Anda akan mendapatkan halaman seperti yang ditunjukkan pada gambar di bawah ini -

Klik tautan Siswa , Anda akan melihat layar seperti di bawah ini -

Frontend Angular kita akan menggunakan file template dan memasukkannya ke dalam <div ng-view> </div> di file index.html kita . Ini akan melakukan ini tanpa penyegaran halaman.

Pada bab sebelumnya, kita telah melihat pembuatan aplikasi meanjs satu halaman menggunakan Angularjs. Pada bab ini, mari kita lihat bagaimana aplikasi Angular menggunakan API untuk mendapatkan data dari Mongodb.

Anda dapat mengunduh kode sumber untuk aplikasi ini di tautan ini . Unduh file zip; ekstrak di sistem Anda.

Struktur direktori kode sumber kami adalah sebagai berikut -

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -server.js

Dalam aplikasi ini, kami telah membuat tampilan (home.html), yang akan mencantumkan semua siswa dari koleksi Siswa, memungkinkan kita membuat yang baru studentrekam dan izinkan kami untuk menghapus catatan siswa. Semua operasi ini dilakukan melalui panggilan REST API.

Buka terminal dan jalankan perintah di bawah ini untuk menginstal dependensi modul npm.

$ npm install

Selanjutnya, instal komponen Bower dengan menggunakan perintah di bawah ini. Anda dapat melihat bower menarik semua file di bawah public / libs.

$ bower install

Konfigurasi node untuk aplikasi akan disimpan di file server.js. Ini adalah file utama aplikasi node dan akan mengkonfigurasi seluruh aplikasi.

// modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// set our port
const port = 3000;
// configuration ===========================================
// configure body parser
app.use(bodyParser.json()); // parse application/json

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students); // return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

Menentukan Rute Frontend

File public / index.html akan memiliki cuplikan kode berikut -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Kami telah menulis layanan untuk membuat panggilan API dan menjalankan permintaan API. Layanan kami, StudentService terlihat seperti di bawah ini -

angular.module('StudentService', [])
// super simple service
// each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

Kode controller (MainCtrl.js) kami adalah seperti di bawah ini -

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
   // CREATE 
   // when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
      // validate the formData to make sure that something is there
      // if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
         // call the create function from our service (returns a promise object)
         Student.create($scope.formData)
         // if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

Menjalankan Aplikasi

Arahkan ke direktori proyek Anda dan jalankan perintah yang diberikan di bawah ini -

$ npm start

Sekarang arahkan ke http://localhost:3000 dan Anda akan mendapatkan halaman seperti yang ditunjukkan pada gambar di bawah ini -

Masukkan beberapa teks di kotak teks dan klik Addtombol. Sebuah record ditambahkan dan ditampilkan sebagai berikut -

Anda dapat menghapus record dengan mencentang kotak.