MEAN.JS - Hướng dẫn nhanh

MEAN.js là gì?

Thời hạn MEAN.jslà một giải pháp mã nguồn mở JavaScript đầy đủ, được sử dụng để xây dựng các trang web động và ứng dụng web. MEAN là từ viết tắt củaMongoDB, Express, Node.js và AngularJS, là các thành phần quan trọng của ngăn xếp MEAN.

Về cơ bản, nó được phát triển để giải quyết các vấn đề chung khi kết nối các khung công tác đó (Mongo, Express Nodejs, AngularJS), xây dựng một khung công tác mạnh mẽ để hỗ trợ nhu cầu phát triển hàng ngày và giúp các nhà phát triển sử dụng các phương pháp tốt hơn khi làm việc với các thành phần JavaScript phổ biến.

Stack có nghĩa là sử dụng cơ sở dữ liệu và máy chủ web ở phía sau, ở giữa bạn sẽ có logic và kiểm soát đối với ứng dụng và tương tác của người dùng ở phía trước.

• MongoDB - Hệ thống cơ sở dữ liệu

• Express - Khung Web Back-end

• Node.js - Nền tảng máy chủ web

• AngularJS - Khung giao diện người dùng

Lịch sử

Tên MEAN do Valeri Karpov , một nhà phát triển MongoDB, đặt ra .

Tại sao sử dụng MEAN.js?

• Nó là một khuôn khổ mã nguồn mở được sử dụng miễn phí.

• Nó có thể được sử dụng như một giải pháp độc lập trong toàn bộ ứng dụng.

• Nó cung cấp chi phí phát triển thấp hơn và tăng tính linh hoạt và hiệu quả của nhà phát triển.

• Nó hỗ trợ mẫu MVC và sử dụng JSON để truyền dữ liệu.

• Nó cung cấp thêm các khuôn khổ, thư viện và các mô-đun có thể tái sử dụng để tăng tốc độ phát triển.

Trước khi bắt đầu với các khái niệm sâu hơn, chúng ta sẽ xem các khối xây dựng cơ bản của ứng dụng MEAN.JS.

Giới thiệu về MongoDB

Trong từ viết tắt MEAN ,Mlà viết tắt của MongoDB, là một cơ sở dữ liệu NoSQL mã nguồn mở lưu dữ liệu ở định dạng JSON. Nó sử dụng mô hình dữ liệu hướng tài liệu để lưu trữ dữ liệu thay vì sử dụng bảng và hàng như chúng ta sử dụng trong cơ sở dữ liệu quan hệ. Nó lưu trữ dữ liệu ở định dạng JSON nhị phân (JavaScript Serialized Object Notation) để truyền dữ liệu dễ dàng giữa máy khách và máy chủ. MongoDB hoạt động dựa trên khái niệm về bộ sưu tập và tài liệu. Để biết thêm thông tin, hãy tham khảo liên kết này MongoDB .

Giới thiệu về Express

Trong từ viết tắt MEAN ,Elà viết tắt của Express , là một khung ứng dụng web Node.js linh hoạt được sử dụng để giúp quá trình phát triển dễ dàng hơn. Nó dễ dàng cấu hình và tùy chỉnh, cho phép xây dựng các ứng dụng an toàn, mô-đun và nhanh chóng. Nó chỉ định các tuyến của một ứng dụng tùy thuộc vào các phương thức HTTP và URL. Bạn có thể kết nối với các cơ sở dữ liệu như MongoDB, MySQL, Redis một cách dễ dàng. Để biết thêm thông tin, hãy tham khảo liên kết này Express .

Giới thiệu về AngularJS

Trong từ viết tắt MEAN ,Alà viết tắt của AngularJS , là một khung JavaScript giao diện người dùng web. Nó cho phép tạo các ứng dụng động, trang đơn theo cách gọn gàng của Model View Controller (MVC). AngularJS tự động xử lý mã JavaScript phù hợp với từng trình duyệt. Để biết thêm thông tin, hãy tham khảo liên kết này AngularJS .

Giới thiệu về Node.js

Trong từ viết tắt MEAN ,Nlà viết tắt của Node.js , là một nền tảng phía máy chủ được sử dụng để phát triển các ứng dụng web như các trang phát trực tuyến video, các ứng dụng một trang và các ứng dụng web khác. Nó cung cấp một thư viện phong phú gồm các mô-đun JavaScript khác nhau giúp đơn giản hóa việc phát triển các ứng dụng web sử dụng Node.js ở mức độ lớn. Nó được xây dựng trên Công cụ JavaScript V8 của Google Chrome, vì vậy nó thực thi mã rất nhanh. Để biết thêm thông tin, hãy tham khảo liên kết này Node.js .

MEAN là một khung JavaScript mã nguồn mở, được sử dụng để xây dựng các trang web động và ứng dụng web. Nó bao gồm bốn khối xây dựng sau để xây dựng một ứng dụng.

• MongoDB - Nó là một cơ sở dữ liệu tài liệu, lưu trữ dữ liệu trong các tài liệu linh hoạt, giống như JSON.

• Express - Nó là khung ứng dụng web cho Nodejs.

• Node.js- Đó là Nền tảng Máy chủ Web. Nó cung cấp thư viện phong phú gồm các mô-đun JavaScript khác nhau giúp đơn giản hóa việc phát triển các ứng dụng web.

• AngularJS- Nó là một khung JavaScript giao diện người dùng web. Nó cho phép tạo các ứng dụng động, trang đơn theo cách gọn gàng của Model View Controller (MVC).

Để biết thêm thông tin về những điều này, bạn có thể tham khảo chương tổng quan . Sơ đồ dưới đây mô tả kiến ​​trúc của ứng dụng ngăn xếp MEAN.

Như trong hình trên, chúng ta có AngularJS là ngôn ngữ phía máy khách xử lý yêu cầu của máy khách.

• Bất cứ khi nào người dùng đưa ra một yêu cầu, nó sẽ được xử lý đầu tiên bởi AngularJS.

• Tiếp theo, yêu cầu bước vào giai đoạn thứ hai, nơi chúng ta có Node.js làm ngôn ngữ phía máy chủ và ExpressJS làm khung web phụ trợ.

• Node.js xử lý các yêu cầu máy khách / máy chủ và ExpressJS đưa ra yêu cầu đối với cơ sở dữ liệu.

• Trong giai đoạn cuối cùng, MongoDB (cơ sở dữ liệu) lấy dữ liệu và gửi phản hồi đến ExpressJS.

• ExpressJS trả về phản hồi cho Nodejs và đến AngularJS, sau đó hiển thị phản hồi cho người dùng.

Chương này bao gồm việc tạo và thiết lập một ứng dụng MEAN. Chúng tôi đang sử dụng NodeJS và ExpressJS cùng nhau để tạo dự án.

Điều kiện tiên quyết

Trước khi bắt đầu tạo ứng dụng MEAN, chúng ta cần cài đặt các điều kiện tiên quyết bắt buộc.

Bạn có thể cài đặt phiên bản mới nhất của Node.js bằng cách truy cập trang web Node.js tại Node.js ( Ứng dụng này dành cho người dùng Windows). Khi bạn tải xuống Node.js, npm sẽ được cài đặt tự động trên hệ thống của bạn. Người dùng Linux có thể cài đặt Node và npm bằng cách sử dụng liên kết này .

Kiểm tra phiên bản của Node và npm bằng cách sử dụng các lệnh dưới đây:

$ node --version
$ npm --version

Các lệnh sẽ hiển thị các phiên bản như trong hình dưới đây -

Tạo dự án Express

Tạo một thư mục dự án bằng cách sử dụng lệnh mkdir như hình dưới đây:

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

Thư mục trên là thư mục gốc của ứng dụng nút. Bây giờ, để tạo tệp package.json, hãy chạy lệnh dưới đây:

$ cd webapp-demo
$ npm init

Lệnh init sẽ hướng dẫn bạn cách tạo tệp package.json -

Tiện ích này sẽ hướng dẫn bạn cách tạo tệp package.json. Nó chỉ bao gồm các mục phổ biến nhất và cố gắng đoán các giá trị mặc định hợp lý.

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

Nhấp vào có và cấu trúc thư mục như bên dưới sẽ được tạo -

-mean-demo
   -package.json

Tệp package.json sẽ có thông tin sau:

{
   "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"
}

Bây giờ để cấu hình dự án Express vào thư mục hiện tại và cài đặt các tùy chọn cấu hình cho khung, hãy sử dụng lệnh dưới đây:

npm install express --save

Vào thư mục dự án của bạn và mở tệp package.json, bạn sẽ thấy thông tin bên dưới:

{
   "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"
   }
}

Ở đây bạn có thể thấy phụ thuộc rõ ràng được thêm vào tệp. Bây giờ, cấu trúc dự án như dưới đây:

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

Ứng dụng đang chạy

Điều hướng đến thư mục dự án mới tạo của bạn và tạo tệp server.js với nội dung bên dưới.

// 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}!`));

Tiếp theo, chạy ứng dụng bằng lệnh dưới đây:

$ npm start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Nó thông báo rằng ứng dụng Express đang chạy. Mở trình duyệt bất kỳ và truy cập ứng dụng bằnghttp://localhost:3000. Bạn sẽ thấy Chào mừng đến với Điểm hướng dẫn! văn bản như hình dưới đây -

Chương này trình bày lộ trình xây dựng cho một ứng dụng với Node và Express.

Trong chương trước, chúng ta đã tạo một ứng dụng node-express. Điều hướng đến thư mục dự án có tên là mean-demo . Đi tới thư mục bằng cách sử dụng lệnh dưới đây -

$ cd mean-demo

Thiết lập các tuyến đường

Các tuyến được sử dụng như dịch vụ ánh xạ bằng cách sử dụng URL của một yêu cầu đến. Mởserver.js tập tin và thiết lập định tuyến như hình dưới đây -

// 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}!`));

Ứng dụng đang chạy

Tiếp theo, chạy ứng dụng bằng lệnh dưới đây:

$ npm start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Bây giờ, hãy truy cập trình duyệt và nhập http://localhost:3000/myroute. Bạn sẽ nhận được trang như trong hình dưới đây -

Trong chương này, chúng tôi sẽ trình bày cách sử dụng mô hình dữ liệu trong ứng dụng Node-express của chúng tôi.

MongoDB là một cơ sở dữ liệu NoSQL mã nguồn mở lưu dữ liệu ở định dạng JSON. Nó sử dụng mô hình dữ liệu hướng tài liệu để lưu trữ dữ liệu thay vì sử dụng bảng và hàng như chúng ta sử dụng trong cơ sở dữ liệu quan hệ. Trong chương này, chúng tôi đang sử dụng Mongodb để xây dựng mô hình dữ liệu.

Mô hình dữ liệu chỉ định dữ liệu nào có trong tài liệu và dữ liệu nào nên có trong tài liệu. Tham khảo cài đặt MongoDB chính thức , để cài đặt MongoDB.

Chúng tôi sẽ sử dụng mã chương trước của chúng tôi. Bạn có thể tải xuống mã nguồn trong liên kết này . Tải xuống tệp zip; giải nén nó trong hệ thống của bạn. Mở thiết bị đầu cuối và chạy lệnh dưới đây để cài đặt các phụ thuộc mô-đun npm.

$ cd mean-demo
$ npm install

Thêm Mongoose vào ứng dụng

Mongoose là một thư viện mô hình dữ liệu chỉ định môi trường và cấu trúc cho dữ liệu bằng cách làm cho MongoDB trở nên mạnh mẽ. Bạn có thể cài đặt Mongoose dưới dạng mô-đun npm thông qua dòng lệnh. Đi tới thư mục gốc của bạn và chạy lệnh dưới đây -

$ npm install --save mongoose

Lệnh trên sẽ tải xuống gói mới và cài đặt nó vào thư mục node_modules . Các --save cờ sẽ thêm gói này để package.json tập tin.

{
   "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"
   }
}

Thiết lập tệp kết nối

Để làm việc với mô hình dữ liệu, chúng tôi sẽ sử dụng thư mục ứng dụng / mô hình . Hãy tạo mô hình sinh viên.js như dưới đây:

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: ''}
});

Bạn có thể thiết lập tệp kết nối bằng cách tạo tệp và sử dụng tệp đó trong ứng dụng. Tạo một tập tin gọi db.js trong config / db.js . Nội dung tệp như dưới đây -

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

Ở đây kiểm tra là tên cơ sở dữ liệu.

Ở đây, giả sử rằng bạn đã cài đặt MongoDB cục bộ. Sau khi cài đặt, hãy khởi động Mongo và tạo cơ sở dữ liệu theo tên kiểm tra. Db này sẽ có một bộ sưu tập theo tên sinh viên. Chèn một số dữ liệu vào bộ sưu tập này. Trong trường hợp của chúng tôi, chúng tôi đã chèn một bản ghi bằng db.students.insertOne ({name: 'Manisha', place: 'Pune', country: 'India'});

Đưa tệp db.js vào ứng dụng, tức là trong server.js . Nội dung của tệp như được hiển thị bên dưới -

// 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}!`));

Tiếp theo, chạy ứng dụng bằng lệnh dưới đây:

$ npm start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Bây giờ, hãy truy cập trình duyệt và nhập http://localhost:3000/api/students. Bạn sẽ nhận được trang như trong hình dưới đây -

Trong chương này, chúng ta sẽ thấy ứng dụng của mình tương tác qua API REST với cơ sở dữ liệu của chúng ta bằng cách sử dụng các phương thức HTTP. Thuật ngữ REST là viết tắt của REpresentational State Transfer, là một kiểu kiến ​​trúc được thiết kế để giao tiếp với các dịch vụ web và API là viết tắt của Application Program Interface cho phép các ứng dụng tương tác với nhau.

Đầu tiên, chúng tôi sẽ tạo RESTful API để lấy tất cả các mục, tạo mục và xóa một mục. Đối với mỗi mục, _id sẽ được tạo tự động bởi MongoDB. Bảng dưới đây mô tả cách ứng dụng sẽ yêu cầu dữ liệu từ API -

Phương thức HTTP	Đường dẫn URL	Sự miêu tả
ĐƯỢC	/api/students	Nó được sử dụng để lấy tất cả các sinh viên từ bộ sưu tập Sinh viên.
BÀI ĐĂNG	/api/students/send	Nó được sử dụng để tạo một bản ghi sinh viên trong bộ sưu tập Sinh viên.
XÓA BỎ	/api/students/student_id	Nó được sử dụng để xóa hồ sơ sinh viên khỏi bộ sưu tập Sinh viên.

Các tuyến API RESTful

Đầu tiên chúng ta sẽ thảo luận về Phương pháp Đăng trong Các tuyến API RESTful.

BÀI ĐĂNG

Đầu tiên, hãy tạo một bản ghi trong bộ sưu tập Sinh viên thông qua API REST của chúng tôi. Mã cho trường hợp cụ thể này có thể được tìm thấy trong tệp server.js . Để tham khảo, một phần mã được dán ở đây -

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!' });
   });
});

Chấp hành

Bạn có thể tải xuống mã nguồn cho ứng dụng này trong liên kết này . Tải xuống tệp zip; giải nén nó trong hệ thống của bạn. Mở thiết bị đầu cuối và chạy lệnh dưới đây để cài đặt các phụ thuộc mô-đun npm.

$ cd mean-demon-consuming_rest_api
$ npm install

Để phân tích cú pháp yêu cầu, chúng ta cần gói phân tích cú pháp nội dung. Do đó, hãy chạy lệnh dưới đây để đưa vào ứng dụng của bạn.

npm install --save body-parser

Mã nguồn đính kèm đã có sự phụ thuộc này, do đó không cần chạy lệnh trên, nó chỉ dành cho thông tin của bạn.

Để chạy ứng dụng, hãy điều hướng đến thư mục dự án mới được tạo của bạn và chạy bằng lệnh dưới đây:

npm start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Có nhiều công cụ để kiểm tra các lệnh gọi API, ở đây chúng tôi đang sử dụng một trong những tiện ích mở rộng thân thiện với người dùng dành cho Chrome có tên là Postman REST Client .

Mở Ứng dụng khách Postman REST, nhập URL là http://localhost:3000/api/students/send, chọn phương thức ĐĂNG . Tiếp theo, nhập dữ liệu yêu cầu như hình dưới đây -

Lưu ý rằng chúng tôi đang gửi dữ liệu tên dưới dạng x-www-form-urlencoded . Điều này sẽ gửi tất cả dữ liệu của chúng tôi đến máy chủ Node dưới dạng chuỗi truy vấn.

Bấm vào nút Gửi để tạo hồ sơ học sinh. Thông báo thành công sẽ xuất hiện như hình dưới đây -

ĐƯỢC

Tiếp theo, hãy lấy tất cả hồ sơ học sinh từ mongodb. Lộ trình sau cần phải được viết. Bạn có thể tìm thấy mã đầy đủ trong tệp 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
   });
});

Tiếp theo, mở Ứng dụng khách Postman REST, nhập URL là

http://localhost:3000/api/students, chọn phương thức GET và bấm vào nút Gửi để nhận tất cả học sinh.

XÓA BỎ

Tiếp theo, hãy xem cách xóa bản ghi khỏi bộ sưu tập mongo của chúng tôi thông qua lệnh gọi api REST.

Lộ trình sau cần phải được viết. Bạn có thể tìm thấy mã đầy đủ trong tệp 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' });
   });
});

Tiếp theo, mở Ứng dụng khách Postman REST, nhập URL là

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

(ở đây 5d1492fa74f1771faa61146d là bản ghi mà chúng tôi sẽ xóa khỏi bộ sưu tập Sinh viên).

Chọn phương pháp XÓA và nhấp vào nút Gửi để nhận tất cả học sinh.

Bạn có thể kiểm tra MongoDB để tìm dữ liệu đã xóa bằng cách gọi GET tới http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

Trong chương này, chúng ta sẽ thêm các thành phần góc vào một ứng dụng. Nó là một khung JavaScript giao diện người dùng web, cho phép tạo các ứng dụng động, trang đơn bằng cách sử dụng mẫu Model View Controller (MVC). Trong chương kiến trúc MEAN.JS , bạn đã thấy cách AngularJS sẽ xử lý yêu cầu của khách hàng và lấy kết quả từ cơ sở dữ liệu.

Làm quen với AngularJS

AngularJS là một khung ứng dụng web mã nguồn mở sử dụng HTML làm ngôn ngữ mẫu và mở rộng cú pháp của HTML để thể hiện các thành phần ứng dụng của bạn một cách rõ ràng. AngularJS cung cấp một số tính năng cơ bản như ràng buộc dữ liệu, mô hình, khung nhìn, bộ điều khiển, dịch vụ, v.v. Để biết thêm thông tin về AngularJS, hãy tham khảo liên kết này .

Bạn có thể biến trang thành ứng dụng Angular bằng cách thêm Angular vào trang. Nó có thể được thêm vào chỉ bằng cách sử dụng tệp JavaScript bên ngoài, tệp này có thể được tải xuống hoặc có thể được tham chiếu trực tiếp với phiên bản CDN.

Hãy xem xét chúng tôi đã tải xuống tệp và tham chiếu nó cục bộ bằng cách thêm vào trang như sau:

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

Bây giờ, chúng ta cần nói với Angular rằng trang này là một ứng dụng Angular. Do đó, chúng ta có thể thực hiện việc này bằng cách thêm một thuộc tính, ng-app vào thẻ <html> hoặc <body> như hình dưới đây -

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

Ng-app có thể được thêm vào bất kỳ phần tử nào trên trang, nhưng nó thường được đặt vào thẻ <html> hoặc <body> để Angular có thể hoạt động ở bất kỳ đâu trong trang.

Ứng dụng Angular như một mô-đun

Để làm việc với một ứng dụng Angular, chúng ta cần xác định một mô-đun. Nó là nơi bạn có thể nhóm các thành phần, chỉ thị, dịch vụ, v.v., có liên quan đến ứng dụng. Tên mô-đun được tham chiếu bởi thuộc tính ng-app trong HTML. Ví dụ: chúng tôi sẽ nói tên mô-đun ứng dụng Angular là myApp và có thể được chỉ định trong thẻ <html> như hình dưới đây -

<html ng-app="myApp">

Chúng tôi có thể tạo định nghĩa cho ứng dụng bằng cách sử dụng câu lệnh dưới đây trong tệp JavaScript bên ngoài -

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

Xác định bộ điều khiển

Ứng dụng AngularJS dựa vào bộ điều khiển để kiểm soát luồng dữ liệu trong ứng dụng. Bộ điều khiển được xác định bằng cách sử dụng chỉ thị ng-controller .

Ví dụ: chúng tôi sẽ gắn bộ điều khiển vào phần thân bằng cách sử dụng lệnh ng-controller, cùng với tên của bộ điều khiển bạn muốn sử dụng. Trong dòng dưới đây, chúng tôi đang sử dụng tên của bộ điều khiển là "myController".

<body ng-controller="myController">

Bạn có thể gắn bộ điều khiển (myController) vào mô-đun Angular (myApp) như hình dưới đây:

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

Tốt hơn là sử dụng hàm được đặt tên thay vì hàm ẩn danh để dễ đọc, khả năng tái sử dụng và khả năng kiểm tra. Trong đoạn mã dưới đây, chúng tôi đang sử dụng hàm mới có tên "myController" để giữ mã bộ điều khiển -

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

Để biết thêm thông tin về bộ điều khiển, hãy tham khảo liên kết này .

Xác định phạm vi

Phạm vi là một đối tượng JavaScript đặc biệt kết nối bộ điều khiển với các khung nhìn và chứa dữ liệu mô hình. Trong bộ điều khiển, dữ liệu mô hình được truy cập thông qua đối tượng $ scope. Hàm controller nhận tham số $ scope đã được tạo bởi Angular và nó cấp quyền truy cập trực tiếp vào mô hình.

Đoạn mã dưới đây chỉ định cách cập nhật chức năng bộ điều khiển để nhận tham số $ scope và đặt giá trị mặc định -

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

Để biết thêm thông tin về bộ điều khiển, hãy tham khảo liên kết này . Trong chương tiếp theo, chúng ta sẽ bắt đầu tạo ứng dụng trang đơn bằng cách sử dụng Angular.

Trong ngăn xếp MEAN, Angular được gọi là khung JavaScript thứ hai, cho phép tạo các ứng dụng trang đơn theo cách gọn gàng của Model View Controller (MVC).

AngularJS như một front-end Framework sử dụng những thứ sau:

• Sử dụng Bower để cài đặt tệp và thư viện

• Sử dụng bộ điều khiển và dịch vụ cho cấu trúc ứng dụng Angular

• Tạo các trang HTML khác nhau

• Sử dụng mô-đun ngRoute để xử lý định tuyến và các dịch vụ cho ứng dụng AngularJS

• Sử dụng Bootstrap để làm cho một ứng dụng trở nên hấp dẫn

Thiết lập ứng dụng Angular của chúng tôi

Hãy để chúng tôi xây dựng một ứng dụng đơn giản có phụ trợ Node.js và giao diện người dùng AngularJS. Đối với ứng dụng Angular của chúng tôi, chúng tôi sẽ muốn -

• Hai trang khác nhau (Trang chủ, Sinh viên)

• Một bộ điều khiển góc khác nhau cho mỗi

• Không làm mới trang khi chuyển trang

Bower và Pulling trong các thành phần

Chúng tôi sẽ cần một số tệp nhất định cho ứng dụng của mình như bootstrap và angle. Chúng tôi sẽ yêu cầu bower tìm nạp các thành phần đó cho chúng tôi.

Đầu tiên, cài đặt bower trên máy của bạn bằng cách thực hiện lệnh dưới đây trên cổng lệnh của bạn -

npm install -g bower

Điều này sẽ cài đặt bower và làm cho nó có thể truy cập toàn cầu trên hệ thống của bạn. Bây giờ đặt các tệp .bowerrc và bower.json trong thư mục gốc của bạn. Trong trường hợp của chúng tôi, nó làmean-demo. Nội dung của cả hai tệp như dưới đây:

.bowerrc - Điều này sẽ cho Bower biết nơi đặt các tệp của chúng tôi -

{
   "directory": "public/libs"
}

bower.json - Điều này tương tự như package.json và sẽ cho Bower biết gói nào là cần thiết.

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

Tiếp theo, cài đặt các thành phần Bower bằng cách sử dụng lệnh dưới đây. Bạn có thể thấy bower pull trong tất cả các tệp trong public / libs .

$ bower install

Cấu trúc thư mục của chúng tôi sẽ như sau:

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

Bộ điều khiển góc

Bộ điều khiển của chúng tôi (public / js / controllers / MainCtrl.js) như sau:

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

Bộ điều khiển public / js / controllers / StudentCtrl.js như sau:

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

Các tuyến đường góc

Tệp định tuyến của chúng tôi (public / js / appRoutes.js) như sau:

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);
}]);

Bây giờ chúng ta đã có bộ điều khiển và các tuyến, chúng ta sẽ kết hợp tất cả chúng lại và đưa các mô-đun này vào public / js / app.js chính của chúng ta như sau:

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

Xem tài liệu

Angular sử dụng tệp mẫu, tệp này có thể được đưa vào <div ng-view> </div> trong tệp index.html. Lệnh ng-view tạo ra một giá đỡ, nơi có thể đặt một chế độ xem tương ứng (HTML hoặc ng-template view) dựa trên cấu hình. Để biết thêm thông tin về chế độ xem góc, hãy truy cập liên kết này .

Khi bạn đã sẵn sàng với việc định tuyến, hãy tạo các tệp mẫu nhỏ hơn và đưa chúng vào tệp index.html . Tệp index.html sẽ có đoạn mã sau:

<!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>

Ứng dụng đang chạy

Chấp hành

Bạn có thể tải xuống mã nguồn cho ứng dụng này trong liên kết này . Tải xuống tệp zip; giải nén nó trong hệ thống của bạn. Mở thiết bị đầu cuối và chạy lệnh dưới đây để cài đặt các phụ thuộc mô-đun npm.

$ cd mean-demo
$ npm install

Tiếp theo chạy lệnh dưới đây -

$ node start

Bạn sẽ nhận được xác nhận như trong hình dưới đây -

Bây giờ, hãy truy cập trình duyệt và nhập http://localhost:3000. Bạn sẽ nhận được trang như trong hình dưới đây -

Nhấp vào liên kết Sinh viên , bạn sẽ thấy màn hình như bên dưới -

Giao diện người dùng Angular của chúng tôi sẽ sử dụng tệp mẫu và đưa nó vào <div ng-view> </div> trong tệp index.html của chúng tôi . Nó sẽ làm điều này mà không cần làm mới trang.

Trong chương trước, chúng ta đã thấy việc tạo ứng dụng meanjs trang đơn bằng Angularjs. Trong chương này, chúng ta hãy xem cách ứng dụng Angular sử dụng API để lấy dữ liệu từ Mongodb.

Bạn có thể tải xuống mã nguồn cho ứng dụng này trong liên kết này . Tải xuống tệp zip; giải nén nó trong hệ thống của bạn.

Cấu trúc thư mục của mã nguồn của chúng tôi như sau:

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

Trong ứng dụng này, chúng tôi đã tạo một dạng xem (home.html), dạng này sẽ liệt kê tất cả sinh viên từ bộ sưu tập Sinh viên, cho phép chúng ta tạo một studentghi lại và cho phép chúng tôi xóa hồ sơ học sinh. Tất cả các hoạt động này được thực hiện thông qua lệnh gọi API REST.

Mở thiết bị đầu cuối và chạy lệnh dưới đây để cài đặt các phụ thuộc mô-đun npm.

$ npm install

Tiếp theo, cài đặt các thành phần Bower bằng cách sử dụng lệnh dưới đây. Bạn có thể thấy bower pull trong tất cả các tệp trong public / libs.

$ bower install

Cấu hình nút cho một ứng dụng sẽ được lưu trong tệp server.js. Đây là tệp chính của ứng dụng nút và sẽ cấu hình toàn bộ ứng dụng.

// 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}!`));

Xác định lộ trình giao diện người dùng

Tệp public / index.html sẽ có đoạn mã sau:

<!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>

Chúng tôi đã viết một dịch vụ để thực hiện các lệnh gọi API và thực thi các yêu cầu API. Dịch vụ của chúng tôi, StudentService trông như dưới đây:

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);
      }
   }
}]);

Mã bộ điều khiển (MainCtrl.js) của chúng tôi như dưới đây:

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
      });
   };
}]);

Ứng dụng đang chạy

Điều hướng đến thư mục dự án của bạn và chạy lệnh dưới đây:

$ npm start

Bây giờ điều hướng đến http://localhost:3000 và bạn sẽ nhận được trang như trong hình dưới đây -

Nhập một số văn bản vào hộp văn bản và nhấp vào Addcái nút. Một bản ghi được thêm vào và hiển thị như sau:

Bạn có thể xóa bản ghi bằng cách chọn hộp kiểm.