Bảng cộng tác AngularJS với Socket.io

NộI Dung

• 01. Máy chủ
• 02. Xương trần
• 03. Khai báo các phụ thuộc của bạn
• 04. Lên dây Socket.io
• 05. Khởi động động cơ của bạn!
• 06. Một vài suy nghĩ thẳng thắn trước khi tiếp tục
• 07. Khách hàng
• 08. Xương trần
• 09. Tạo một ghi chú dính
• 10. Hiển thị các ghi chú dính
• 11 Xóa một ghi chú dính
• 12. Cập nhật ghi chú dính
• 13. Di chuyển một ghi chú dính
• 14. Tiền thưởng
• 15. Kết luận
• Thích cái này? Đọc những thứ này!

• Kiến thức cần thiết: JavaScript trung gian
• Đòi hỏi: Node.js, NPM
• Thời gian dự án: 2 giờ

AngularJS đặc biệt phù hợp để tạo các ứng dụng phía máy khách phong phú trong trình duyệt và khi bạn thêm một chút Socket.io vào hỗn hợp, mọi thứ trở nên thực sự thú vị. Trong bài viết này, chúng ta sẽ xây dựng một bảng cộng tác thời gian thực sử dụng AngularJS cho ứng dụng phía máy khách và Socket.io để chia sẻ trạng thái giữa tất cả các máy khách được kết nối.

Hãy cùng giới thiệu một chút về công việc dọn phòng trước khi chúng ta bắt đầu. Tôi sẽ cho rằng bạn đã nắm được cơ bản về HTML và JavaScript vì tôi sẽ không trình bày từng góc nhỏ của mã. Ví dụ: tôi sẽ không gọi ra các tệp CSS và JavaScript mà tôi đã đưa vào phần đầu của tệp HTML vì không có thông tin mới ở đó.

Ngoài ra, tôi khuyến khích bạn lấy mã từ tài khoản GitHub của tôi để làm theo. Người bạn tốt của tôi, Brian Ford cũng có một hạt giống Socket.io tuyệt vời mà tôi đã dựa trên một số ý tưởng ban đầu của mình.

Bốn tính năng chính mà chúng tôi muốn có trong bảng cộng tác là khả năng tạo ghi chú, đọc ghi chú, cập nhật ghi chú, xóa ghi chú và thú vị là di chuyển ghi chú trên bảng. Vâng, chính xác, chúng tôi đang tập trung vào các tính năng CRUD tiêu chuẩn. Tôi tin rằng bằng cách tập trung vào những tính năng cơ bản này, chúng tôi sẽ có đủ mã để các mẫu xuất hiện để bạn có thể lấy chúng và áp dụng chúng ở những nơi khác.

01. Máy chủ

Trước tiên, chúng tôi sẽ bắt đầu với máy chủ Node.js vì nó sẽ đóng vai trò là nền tảng mà chúng tôi sẽ xây dựng mọi thứ khác trên đó.

Chúng tôi sẽ xây dựng một máy chủ Node.js với Express và Socket.io. Lý do chúng tôi sử dụng Express là nó cung cấp một cơ chế tốt để thiết lập một máy chủ nội dung tĩnh trong Node.js. Express đi kèm với một loạt các tính năng thực sự tuyệt vời, nhưng trong trường hợp này, chúng tôi sẽ sử dụng nó để phân chia ứng dụng một cách rõ ràng giữa máy chủ và máy khách.

(Tôi đang hoạt động với giả định rằng bạn đã cài đặt Node.js và NPM. Tìm kiếm nhanh trên Google sẽ chỉ cho bạn cách cài đặt những thứ này nếu bạn chưa cài đặt.)

02. Xương trần

Vì vậy, để xây dựng phần thô của máy chủ, chúng ta cần thực hiện một số việc để thiết lập và chạy.

// app.js

// A.1
var express = demand ('express'),
ứng dụng = express ();
server = request (’http’). createServer (ứng dụng),
io = Required (’socket.io’). Listen (server);

// A.2
app.configure (function () {
app.use (express.static (__ dirname + ’/ public’));
});

// A.3
server.listen (1337);

A.1 Chúng tôi đang khai báo và khởi tạo các mô-đun Node.js để chúng tôi có thể sử dụng chúng trong ứng dụng của mình. Chúng tôi đang khai báo Express, khởi tạo Express và sau đó tạo một máy chủ HTTP và gửi cá thể Express vào đó. Và từ đó, chúng tôi khởi tạo Socket.io và yêu cầu nó theo dõi phiên bản máy chủ của chúng tôi.

A.2 Sau đó, chúng tôi sẽ yêu cầu ứng dụng Express của chúng tôi sử dụng thư mục công cộng của chúng tôi để phân phát tệp từ đó.

A.3 Chúng tôi khởi động máy chủ và yêu cầu nó lắng nghe trên cổng 1337.

Cho đến nay, điều đó khá dễ dàng và nhanh chóng. Tôi tin rằng chúng ta chưa đến 10 dòng mã và chúng ta đã có một máy chủ Node.js chức năng. Tiến lên!

03. Khai báo các phụ thuộc của bạn

// package.json
{
"name": "angle-collab-board",
"description": "AngularJS Collaboration Board",
"phiên bản": "0.0.1-1",
"private": true,
"phụ thuộc": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Một trong những tính năng đẹp nhất của NPM là khả năng khai báo các phần phụ thuộc của bạn trong một package.json tệp và sau đó tự động cài đặt chúng qua cài đặt npm trên dòng lệnh.

04. Lên dây Socket.io

Chúng tôi đã xác định các tính năng cốt lõi mà chúng tôi muốn trong ứng dụng và vì vậy chúng tôi cần thiết lập trình xử lý sự kiện Socket.io và một đóng thích hợp để xử lý sự kiện cho mỗi hoạt động.

Trong đoạn mã bên dưới, bạn sẽ nhận thấy rằng về cơ bản nó là cấu hình của các trình nghe sự kiện và các cuộc gọi lại. Sự kiện đầu tiên là kết nối sự kiện mà chúng tôi sử dụng để kết thúc các sự kiện khác của chúng tôi trong thời gian kết thúc.

io.sockets.on ('kết nối', hàm (ổ cắm) {
socket.on ('createNote', function (data) {
socket.broadcast.emit ('onNoteCreate', data);
});

socket.on ('updateNote', function (data) {
socket.broadcast.emit ('onNoteUpdated', dữ liệu);
});

socket.on ('deleteNote', function (data) {
socket.broadcast.emit ('onNoteDeleted', dữ liệu);
});

socket.on ('moveNote', function (data) {
socket.broadcast.emit ('onNoteM xóa', dữ liệu);
});
});

Từ đây, chúng tôi thêm người nghe vào createNote, updateNote, Xóa ghi chú và moveNote. Và trong chức năng gọi lại, chúng tôi chỉ đang truyền phát sự kiện đã xảy ra để bất kỳ khách hàng nào đang nghe đều có thể được thông báo rằng sự kiện đã xảy ra.

Có một vài điều đáng chỉ ra về các hàm gọi lại trong các trình xử lý sự kiện riêng lẻ. Một, nếu bạn muốn gửi một sự kiện cho những người khác, nhưng khách hàng đã phát ra sự kiện mà bạn chèn phát sóng trước phát ra chức năng gọi. Thứ hai, chúng tôi chỉ đơn giản là chuyển khối lượng sự kiện cho các bên quan tâm để họ có thể xử lý sự kiện theo cách họ thấy phù hợp.

05. Khởi động động cơ của bạn!

Bây giờ chúng tôi đã xác định các phụ thuộc của mình và thiết lập ứng dụng Node.js của chúng tôi với quyền hạn Express và Socket.io, việc khởi chạy máy chủ Node.js khá đơn giản.

Trước tiên, bạn cài đặt các phụ thuộc Node.js của mình như sau:

cài đặt npm

Và sau đó bạn khởi động máy chủ như sau:

node app.js

Và sau đó! Bạn truy cập địa chỉ này trong trình duyệt của mình. Bam!

06. Một vài suy nghĩ thẳng thắn trước khi tiếp tục

Tôi chủ yếu là một nhà phát triển giao diện người dùng và ban đầu tôi hơi sợ khi kết nối máy chủ Node.js với ứng dụng của mình. Phần AngularJS là một JavaScript phía máy chủ nhưng nhanh chóng? Xếp hàng đợi nhạc rùng rợn từ một bộ phim kinh dị.

Tuy nhiên, tôi thực sự ngạc nhiên khi phát hiện ra rằng tôi có thể thiết lập một máy chủ web tĩnh chỉ trong một vài dòng mã và trong một vài dòng nữa, sử dụng Socket.io để xử lý tất cả các sự kiện giữa các trình duyệt. Và nó vẫn chỉ là JavaScript! Vì lý do kịp thời, chúng tôi chỉ trình bày một vài đặc điểm, nhưng tôi hy vọng rằng đến cuối bài viết, bạn sẽ thấy rằng bơi rất dễ dàng - và đáy sâu của hồ bơi không đáng sợ như vậy.

07. Khách hàng

Bây giờ chúng tôi đã có nền tảng vững chắc với máy chủ của mình, hãy chuyển sang phần yêu thích của tôi - khách hàng! Chúng tôi sẽ sử dụng AngularJS, jQueryUI cho phần có thể kéo và Twitter Bootstrap cho cơ sở kiểu.

08. Xương trần

Theo sở thích cá nhân, khi tôi bắt đầu một ứng dụng AngularJS mới, tôi muốn nhanh chóng xác định mức tối thiểu mà tôi biết mình sẽ cần để bắt đầu và sau đó bắt đầu lặp lại càng nhanh càng tốt.

Mọi ứng dụng AngularJS cần được khởi động với ít nhất một bộ điều khiển hiện diện và vì vậy đây thường là nơi tôi luôn bắt đầu.

Để tự động khởi động ứng dụng, bạn chỉ cần thêm ng-app đến nút HTML mà bạn muốn ứng dụng hoạt động. Hầu hết thời gian, việc thêm nó vào thẻ HTML là hoàn toàn có thể chấp nhận được. Tôi cũng đã thêm một thuộc tính vào ng-app để nói với nó rằng tôi muốn sử dụng ứng dụng mô-đun mà tôi sẽ xác định chỉ trong giây lát.

// public / index.html
html ng-app = "app">

Tôi biết mình sẽ cần ít nhất một bộ điều khiển và vì vậy tôi sẽ gọi nó ra bằng cách sử dụng ng-controller và gán cho nó một thuộc tính của MainCtrl.

body ng-controller = "MainCtrl"> / body>

Vì vậy, bây giờ chúng ta đang chuẩn bị cho một mô-đun có tên là ứng dụng và một bộ điều khiển có tên MainCtrl. Hãy để chúng tôi tiếp tục và tạo chúng ngay bây giờ.

Tạo một mô-đun khá đơn giản. Bạn xác định nó bằng cách gọi angle.module và đặt tên cho nó. Để tham khảo trong tương lai, tham số thứ hai của một mảng trống là nơi bạn có thể đưa vào các mô-đun con để sử dụng trong ứng dụng. Nó nằm ngoài phạm vi của hướng dẫn này, nhưng rất hữu ích khi ứng dụng của bạn bắt đầu phát triển về mức độ phức tạp và nhu cầu.

// public / js / collab.js
var app = angle.module ('app', []);

Chúng tôi sẽ khai báo một số trình giữ chỗ trống trong ứng dụng mô-đun bắt đầu với MainCtrl phía dưới.Chúng tôi sẽ điền tất cả những thứ này vào sau nhưng tôi muốn minh họa cấu trúc cơ bản ngay từ đầu.

app.controller ('MainCtrl', function ($ scope) {});

Chúng tôi cũng sẽ kết hợp chức năng Socket.io trong một ổ cắm để chúng ta có thể đóng gói đối tượng đó và không để nó trôi nổi trên không gian tên chung.

app.factory ('socket', function ($ rootScope) {});

Và trong khi chúng tôi đang ở đó, chúng tôi sẽ tuyên bố một chỉ thị được gọi là dínhNote mà chúng tôi sẽ sử dụng để đóng gói chức năng ghi chú cố định trong.

app.directive ('stickNote', function (socket) {});

Vì vậy, chúng ta hãy xem lại những gì chúng ta đã làm cho đến nay. Chúng tôi đã khởi động ứng dụng bằng cách sử dụng ng-app và khai báo trình điều khiển ứng dụng của chúng tôi trong HTML. Chúng tôi cũng đã xác định mô-đun ứng dụng và tạo MainCtrl bộ điều khiển, ổ cắm dịch vụ và dínhNote chỉ thị.

09. Tạo một ghi chú dính

Bây giờ chúng ta đã có khung của ứng dụng AngularJS, chúng ta sẽ bắt đầu xây dựng tính năng tạo.

app.controller ('MainCtrl', function ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// Mới đến
socket.on ('onNoteCreate', function (data) {// B.3
$ scope.notes.push (dữ liệu);
});

// Hướng ngoaị
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
tiêu đề: 'Ghi chú mới',
nội dung: 'Đang chờ xử lý'
};

$ scope.notes.push (ghi chú);
socket.emit ('createNote', ghi chú);
};

B.1 AngularJS có tính năng tiêm phụ thuộc được tích hợp vào nó, vì vậy chúng tôi sẽ đưa phạm vi $ đối tượng và ổ cắm dịch vụ. Các phạm vi $ đối tượng đóng vai trò như một ViewModel và về cơ bản là một đối tượng JavaScript với một số sự kiện được đưa vào nó để cho phép kết hợp dữ liệu hai chiều.

B.2 Chúng tôi đang khai báo mảng mà chúng tôi sẽ sử dụng để liên kết chế độ xem.

B.3 Chúng tôi đang thêm một người nghe cho onNoteCreate sự kiện trên ổ cắm dịch vụ và đẩy khối lượng sự kiện vào $ scope.notes mảng.

B.4 Chúng tôi đã tuyên bố createNote phương pháp tạo ra một mặc định Ghi chú đối tượng và đẩy nó vào $ scope.notes mảng. Nó cũng sử dụng ổ cắm dịch vụ phát ra createNote sự kiện và vượt qua ghi chú mới đối tượng cùng.

Vì vậy, bây giờ chúng ta có một phương pháp để tạo ghi chú, chúng ta gọi nó như thế nào? Đó là một câu hỏi hay! Trong tệp HTML, chúng tôi thêm chỉ thị AngularJS được tích hợp sẵn ng-click vào nút và sau đó thêm createNote gọi phương thức làm giá trị thuộc tính.

button id = "createButton" ng-click = "createNote ()"> Tạo Ghi chú / nút>

Thời gian để xem xét nhanh những gì chúng tôi đã làm cho đến nay. Chúng tôi đã thêm một mảng vào phạm vi $ đối tượng trong MainCtrl điều đó sẽ lưu giữ tất cả các ghi chú cho ứng dụng. Chúng tôi cũng đã thêm một createNote phương pháp trên phạm vi $ để tạo một ghi chú cục bộ mới và sau đó phát ghi chú đó cho các khách hàng khác thông qua ổ cắm dịch vụ. Chúng tôi cũng đã thêm một người nghe sự kiện trên ổ cắm để chúng tôi có thể biết khi nào các khách hàng khác đã tạo ghi chú để chúng tôi có thể thêm ghi chú đó vào bộ sưu tập của mình.

10. Hiển thị các ghi chú dính

Bây giờ chúng ta có khả năng tạo một đối tượng ghi chú và chia sẻ nó giữa các trình duyệt nhưng chúng ta thực sự hiển thị nó như thế nào? Đây là nơi các chỉ thị được đưa vào.

Các chỉ thị và sự phức tạp của chúng là một chủ đề rộng lớn, nhưng phiên bản ngắn là chúng cung cấp một cách để mở rộng các phần tử và thuộc tính với chức năng tùy chỉnh. Hướng dẫn dễ dàng là phần yêu thích của tôi về AngularJS vì nó cho phép bạn về cơ bản tạo toàn bộ DSL (Ngôn ngữ dành riêng cho miền) xung quanh ứng dụng của bạn bằng HTML.

Điều tự nhiên là vì chúng tôi sẽ tạo các ghi chú cố định cho ban cộng tác của mình, chúng tôi nên tạo dínhNote chỉ thị. Các hướng được định nghĩa bằng cách gọi phương thức chỉ thị trên một mô-đun mà bạn muốn khai báo nó và chuyển vào đó một tên và một hàm trả về một đối tượng định nghĩa chỉ thị. Đối tượng định nghĩa chỉ thị có rất nhiều thuộc tính khả thi mà bạn có thể xác định trên nó, nhưng chúng tôi sẽ chỉ sử dụng một vài thuộc tính cho mục đích của chúng tôi ở đây.

Tôi khuyên bạn nên xem tài liệu AngularJS để xem toàn bộ danh sách các thuộc tính mà bạn có thể xác định trên đối tượng định nghĩa chỉ thị.

app.directive ('stickNote', function (socket) {
var linker = function (scope, element, attrs) {};

var controller = function ($ scope) {};

trở về {
hạn chế: 'A', // C.1
link: linker, // C.2
controller: controller, // C.3
phạm vi: {// C.4
lưu ý: '=',
ondelete: '&'
}
};
});

C.1 Bạn có thể hạn chế chỉ thị của mình đối với một loại phần tử HTML nhất định. Hai yếu tố phổ biến nhất là phần tử hoặc thuộc tính mà bạn khai báo bằng cách sử dụng E và A tương ứng. Bạn cũng có thể hạn chế nó trong một lớp CSS hoặc một nhận xét, nhưng những điều này không phổ biến.

C.2 Hàm liên kết là nơi bạn đặt tất cả mã thao tác DOM của mình. Có một vài trường hợp ngoại lệ mà tôi đã tìm thấy, nhưng điều này luôn đúng (ít nhất là 99% thời gian). Đây là một quy tắc nền tảng cơ bản của AngularJS và là lý do tại sao tôi nhấn mạnh nó.

C.3 Chức năng bộ điều khiển hoạt động giống như bộ điều khiển chính mà chúng tôi đã xác định cho ứng dụng nhưng $ phạm vi đối tượng mà chúng tôi đang chuyển vào là cụ thể cho phần tử DOM mà chỉ thị tồn tại.

C.4 AngularJS có một khái niệm về phạm vi cô lập, cho phép bạn xác định rõ ràng cách phạm vi của chỉ thị giao tiếp với thế giới bên ngoài. Nếu chúng ta không khai báo phạm vi, chỉ thị sẽ được thừa kế ngầm từ phạm vi cha với mối quan hệ cha-con. Trong nhiều trường hợp, điều này không phải là tối ưu. Bằng cách cô lập phạm vi, chúng tôi giảm thiểu khả năng thế giới bên ngoài có thể vô tình và ảnh hưởng xấu đến trạng thái chỉ thị của bạn.

Tôi đã khai báo liên kết dữ liệu hai chiều với Ghi chú với = biểu tượng và một biểu thức ràng buộc với ondelete với & Biểu tượng. Vui lòng đọc tài liệu AngularJS để được giải thích đầy đủ về phạm vi cô lập vì nó là một trong những chủ đề phức tạp hơn trong khuôn khổ.

Vì vậy, hãy thực sự thêm một ghi chú cố định vào DOM.

Giống như bất kỳ khung công tác tốt nào, AngularJS đi kèm với một số tính năng thực sự tuyệt vời ngay khi xuất xưởng. Một trong những tính năng hữu ích nhất là ng-lặp lại. Chỉ thị AngularJS này cho phép bạn truyền vào một mảng các đối tượng và nó sao chép bất kỳ thẻ nào mà nó có trên nhiều lần cũng như có các mục trong mảng. Trong trường hợp bên dưới, chúng tôi đang lặp lại ghi chú mảng và sao chép div và phần tử con của nó cho độ dài của ghi chú mảng.

div stick-note ng-repeat = "note trong ghi chú" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Vẻ đẹp của ng-lặp lại là nó được liên kết với bất kỳ mảng nào bạn chuyển vào và khi bạn thêm một mục vào mảng, phần tử DOM của bạn sẽ tự động cập nhật. Bạn có thể thực hiện thêm bước này và lặp lại không chỉ các phần tử DOM tiêu chuẩn mà còn cả các chỉ thị tùy chỉnh khác. Đó là lý do tại sao bạn thấy ghi chú như một thuộc tính trên phần tử.

Có hai bit khác của mã tùy chỉnh cần được làm rõ. Chúng tôi đã tách biệt phạm vi trên ghi chú chỉ thị trên hai thuộc tính. Cái đầu tiên là phạm vi cô lập được xác định ràng buộc trên Ghi chú bất động sản. Điều này có nghĩa là bất cứ khi nào đối tượng ghi chú thay đổi trong phạm vi cha, nó sẽ tự động cập nhật đối tượng ghi chú tương ứng trong chỉ thị và ngược lại. Phạm vi cô lập được xác định khác nằm trên ondelete thuộc tính. Điều này có nghĩa là khi ondelete được gọi trong chỉ thị, nó sẽ gọi bất kỳ biểu thức nào trong ondelete trên phần tử DOM khởi tạo chỉ thị.

Khi một chỉ thị được khởi tạo, nó sẽ được thêm vào DOM và hàm liên kết được gọi. Đây là cơ hội hoàn hảo để đặt một số thuộc tính DOM mặc định trên phần tử. Tham số phần tử mà chúng ta đang truyền vào thực sự là một đối tượng jQuery và vì vậy chúng ta có thể thực hiện các thao tác jQuery trên nó.

(AngularJS thực sự đi kèm với một tập hợp con của jQuery được tích hợp trong nó nhưng nếu bạn đã bao gồm phiên bản jQuery đầy đủ, AngularJS sẽ trì hoãn việc đó.)

app.directive ('stickNote', function (socket) {
var linker = function (scope, element, attrs) {
// Một số khởi tạo DOM để làm cho nó đẹp hơn
element.css (’left’, ’10px’);
element.css (’top’, ’50px’);
element.hide (). fadeIn ();
};
});

Trong đoạn mã trên, chúng tôi chỉ đơn giản là định vị ghi chú dính trên sân khấu và làm mờ nó trong.

11 Xóa một ghi chú dính

Vì vậy, bây giờ chúng ta có thể thêm và hiển thị một ghi chú dính, đã đến lúc xóa ghi chú dính. Việc tạo và xóa các ghi chú dính là vấn đề của việc thêm và xóa các mục khỏi mảng mà các ghi chú bị ràng buộc. Đây là trách nhiệm của phạm vi cha để duy trì mảng đó, đó là lý do tại sao chúng tôi tạo ra yêu cầu xóa từ bên trong chỉ thị, nhưng hãy để phạm vi cha thực hiện công việc nặng nhọc thực sự.

Đây là lý do tại sao chúng tôi đã trải qua tất cả các vấn đề khi tạo phạm vi riêng biệt được xác định biểu thức trên chỉ thị: vì vậy chỉ thị có thể nhận sự kiện xóa trong nội bộ và chuyển nó cho cha mẹ của nó để xử lý.

Lưu ý HTML bên trong chỉ thị.

button type = "button" ng-click = "deleteNote (note.id)"> × / button>

Điều tiếp theo tôi sẽ nói có vẻ như là một chặng đường dài nhưng hãy nhớ rằng chúng ta đang ở cùng một phía và nó sẽ có ý nghĩa sau khi tôi giải thích. Khi nhấp vào nút ở góc trên bên phải của ghi chú dính, chúng tôi đang gọi Xóa ghi chú trên bộ điều khiển của chỉ thị và chuyển note.id giá trị. Bộ điều khiển sau đó gọi ondelete, mà sau đó thực thi bất kỳ biểu thức nào mà chúng tôi kết nối với nó. Càng xa càng tốt? Chúng tôi đang gọi một phương thức cục bộ trên bộ điều khiển, phương thức này sau đó chuyển nó cho bằng cách gọi bất kỳ biểu thức nào đã được xác định trong phạm vi cô lập. Biểu thức được gọi trên cha mẹ chỉ tình cờ được gọi Xóa ghi chú cũng.

app.directive ('stickNote', function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
tôi đã làm
});
};
};

trở về {
hạn chế: 'A',
link: trình liên kết,
controller: bộ điều khiển,
phạm vi: {
ghi chú: '=',
ondelete: '&'
}
};
});

(Khi sử dụng phạm vi cô lập do biểu thức xác định, các tham số được gửi trong một bản đồ đối tượng.)

Trong phạm vi chính, Xóa ghi chú được gọi và thực hiện xóa khá chuẩn bằng cách sử dụng angle.forEach chức năng tiện ích để lặp qua mảng ghi chú. Khi chức năng đã xử lý công việc kinh doanh địa phương của nó, nó sẽ tiếp tục và phát ra sự kiện để phần còn lại của thế giới phản ứng tương ứng.

app.controller ('MainCtrl', function ($ scope, socket) {
$ scope.notes = [];

// Mới đến
socket.on ('onNoteDeleted', function (data) {
$ scope.deleteNote (data.id);
});

// Hướng ngoaị
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angle.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (ghi chú);
});

$ scope.notes = newNotes;
socket.emit ('deleteNote', {id: id});
};
});

12. Cập nhật ghi chú dính

Chúng tôi đang đạt được tiến bộ đáng kinh ngạc! Bây giờ, tôi hy vọng rằng bạn sẽ bắt đầu thấy một số mô hình nổi lên từ chuyến tham quan vòng xoáy này mà chúng tôi đang thực hiện. Mục tiếp theo trong danh sách là tính năng cập nhật.

Chúng tôi sẽ bắt đầu từ các phần tử DOM thực tế và theo dõi nó đến tận máy chủ và quay trở lại máy khách. Trước tiên, chúng ta cần biết khi nào tiêu đề hoặc nội dung của ghi chú dán được thay đổi. AngularJS coi các phần tử biểu mẫu như một phần của mô hình dữ liệu để bạn có thể kết nối liên kết dữ liệu hai chiều trong tích tắc. Để làm điều này, hãy sử dụng ng-model chỉ thị và đưa vào thuộc tính mà bạn muốn liên kết. Trong trường hợp này, chúng tôi sẽ sử dụng note.title và note.body tương ứng.

Khi một trong hai thuộc tính này thay đổi, chúng tôi muốn nắm bắt thông tin đó để chuyển đi. Chúng tôi thực hiện điều này với ng-thay đổi chỉ thị và sử dụng nó để gọi updateNote và chuyển vào chính đối tượng ghi chú. AngularJS thực hiện một số kiểm tra bẩn rất thông minh để phát hiện xem giá trị của bất kỳ thứ gì nằm trong ng-model đã thay đổi và sau đó thực thi biểu thức trong ng-thay đổi.

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>

Mặt trái của việc sử dụng ng-thay đổi là sự chuyển đổi cục bộ đã xảy ra và chúng tôi chỉ chịu trách nhiệm chuyển tiếp thông báo. Trong bộ điều khiển, updateNote được gọi và từ đó chúng tôi sẽ phát ra updateNote sự kiện để máy chủ của chúng tôi phát tới các máy khách khác.

app.directive ('stickNote', function (socket) {
var controller = function ($ scope) {
$ scope.updateNote = function (note) {
socket.emit ('updateNote', ghi chú);
};
};
});

Và trong bộ điều khiển chỉ thị, chúng tôi đang lắng nghe onNoteUpdated sự kiện để biết khi có ghi chú từ khách hàng khác đã cập nhật để chúng tôi có thể cập nhật phiên bản cục bộ của mình.

var controller = function ($ scope) {
// Mới đến
socket.on ('onNoteUpdated', function (data) {
// Cập nhật nếu cùng một ghi chú
if (data.id == $ scope.note.id) {

$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};

13. Di chuyển một ghi chú dính

Tại thời điểm này, về cơ bản chúng ta đã hoàn thành một vòng quanh bể bơi trẻ em CRUD và cuộc sống vẫn tốt đẹp! Chỉ với mục đích là một thủ thuật phòng khách để gây ấn tượng với bạn bè của bạn, chúng tôi sẽ bổ sung thêm khả năng di chuyển ghi chú quanh màn hình và cập nhật tọa độ trong thời gian thực. Đừng hoảng sợ - đó chỉ là một vài dòng mã nữa. Tất cả công việc khó khăn này sẽ được đền đáp. Tôi hứa!

Chúng tôi đã mời khách mời đặc biệt, jQueryUI, đến bữa tiệc và chúng tôi đã làm tất cả cho những người có thể kéo. Thêm khả năng kéo một ghi chú cục bộ chỉ cần một dòng mã. Nếu bạn thêm vào element.draggable (); vào chức năng trình liên kết của bạn, bạn sẽ bắt đầu nghe thấy 'Eye of the Tiger' của Survivor vì giờ đây bạn có thể kéo ghi chú của mình xung quanh.

Chúng tôi muốn biết khi nào quá trình kéo dừng lại và nắm bắt các tọa độ mới để chuyển. jQueryUI được xây dựng bởi một số người rất thông minh, vì vậy khi quá trình kéo dừng lại, bạn chỉ cần xác định một hàm gọi lại cho sự kiện dừng. Chúng tôi lấy note.id tắt đối tượng phạm vi và các giá trị CSS bên trái và trên cùng từ ui vật. Với kiến ​​thức đó, chúng tôi làm những gì chúng tôi đã làm từ trước đến nay: phát ra!

app.directive ('stickNote', function (socket) {
var linker = function (scope, element, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMished', function (data) {
// Cập nhật nếu cùng một ghi chú
if (data.id == scope.note.id) {
element.animate ({
left: data.x,
top: data.y
});
}
});
};
});

Tại thời điểm này, không có gì ngạc nhiên khi chúng tôi cũng đang lắng nghe một sự kiện liên quan đến việc di chuyển từ dịch vụ socket. Trong trường hợp này, nó là onNoteMished sự kiện và nếu ghi chú trùng khớp thì chúng tôi cập nhật các thuộc tính CSS bên trái và trên cùng. Bam! Làm xong!

14. Tiền thưởng

Đây là phần thưởng mà tôi sẽ không đưa vào nếu tôi không hoàn toàn tự tin rằng bạn có thể đạt được nó trong vòng chưa đầy 10 phút. Chúng tôi sẽ triển khai đến một máy chủ trực tiếp (tôi vẫn ngạc nhiên về mức độ dễ dàng thực hiện).

Trước tiên, bạn cần đăng ký bản dùng thử Nodejitsu miễn phí. Bản dùng thử miễn phí trong 30 ngày, điều này hoàn toàn phù hợp để bạn chân ướt chân ráo.

Khi bạn đã tạo tài khoản của mình, bạn cần cài đặt gói jitsu, bạn có thể thực hiện việc này từ dòng lệnh qua $ npm cài đặt jitsu -g.

Sau đó, bạn cần đăng nhập từ dòng lệnh qua đăng nhập $ jitsu và nhập thông tin đăng nhập của bạn.

Đảm bảo bạn đang ở trong ứng dụng của mình trực tiếp, nhập triển khai $ jitsu và bước qua các câu hỏi. Tôi thường để mặc định càng nhiều càng tốt, có nghĩa là tôi đặt tên cho ứng dụng của mình nhưng không đặt tên miền phụ, v.v.

Và, các bạn thân mến của tôi, chỉ có thế thôi! Bạn sẽ nhận được URL đến ứng dụng của mình từ đầu ra của máy chủ khi nó đã được triển khai và nó đã sẵn sàng hoạt động.

15. Kết luận

Chúng tôi đã trình bày rất nhiều kiến ​​thức về AngularJS trong bài viết này và tôi hy vọng bạn sẽ có nhiều niềm vui trong quá trình này. Tôi nghĩ những gì bạn có thể thực hiện với AngularJS và Socket.io thực sự gọn gàng trong khoảng 200 dòng mã.

Có một số điều tôi không trình bày để tập trung vào những điểm chính, nhưng tôi khuyến khích bạn rút nguồn và thử với ứng dụng. Chúng tôi đã xây dựng một nền tảng vững chắc, nhưng vẫn còn rất nhiều tính năng bạn có thể thêm vào. Nhận hack!

Lukas Ruebbelke là một người đam mê công nghệ và là đồng tác giả của AngularJS in Action for Manning Publications. Điều yêu thích của anh ấy là khiến mọi người hào hứng với công nghệ mới như anh ấy. Anh ta điều hành Nhóm người dùng ứng dụng web Phoenix và đã lưu trữ nhiều hackathons với các đối tác phạm tội của mình.

Thích cái này? Đọc những thứ này!

• Cách tạo một ứng dụng
• Phông chữ web yêu thích của chúng tôi - và chúng không tốn một xu
• Khám phá điều gì tiếp theo cho Thực tế tăng cường
• Tải xuống các kết cấu miễn phí: độ phân giải cao và sẵn sàng sử dụng ngay bây giờ