Hướng dẫn AngularJS – Xây dựng một App sử dụng kỹ thuật Directives và Data Binding

0
260

AngularJS_logo

Heyho. Xin chào, Hôm nay tôi sẽ hướng dẫn các bạn cách xây dựng một ứng dụng AngularJS bằng cách sử dụng 2 kỹ thuật đặc trưng của nó là Directives and Data Binding.

AngularJS thì không còn xa lạ gì đối với giới lập trình trên thế giới. Là đứa con cưng của Google được phát triển qua nhiều phiên bản. Và là một trong những Framework JS được suy nghĩ đến đầu tiên khi muốn xây dựng một ứng dụng web. Các lập trình viên Front-end thì không thể không biết đến tên này được.

Qua bài viết này. Tôi sẽ cho các bạn thấy tại sao AngularJS lại được nhiều người tin dùng đến như thế

AngularJS sẽ giúp bạn viết code mà không cần tác động đến DOM (Dom là gì xin vui lòng hỏi  Google). Khoang đã? Cái gì không cần tác động đến DOM ư?

Vâng chính xác là thế. Tôi sẽ hướng dẫn các bạn sử dụng Directives và Data Binding để làm điều đó.

Lưu ý: Nếu bạn có kiến thức về CoffeeScripts (học AngularJS thì không cần đến kỹ năng này) thì bạn sẽ có nhiều trãi nghiệm hơn trong bài viết này. Tuy vậy, với kiến thức Javascript bình thường bạn vẫn hiểu được những điều tôi sắp nói tới đây

Đầu tiên hãy xem một ứng dụng viết bằng AngularJS tại đây. Thử đi sẽ rất vui đấy. Vì đây là điều đầu tiên chúng ta cần có. Vui thì mới học được

Bạn đã xem chưa?. Bạn có muốn xây dựng một ứng dụng như thế. Nếu đồng ý, hãy đọc tiếp nhé.

Nào bây giờ chúng ta sẽ bắt đầu:

Như các bạn đã biết HTML đã cung cấp cho chúng ta khá nhiều thẻ tag (a,i,u). Những gì HTML đã làm được thật không thể chối cãi. Nó mang lại cho chúng ta nhiều trãi nghiệm, xây dựng mọi thứ chúng ta muốn. Tuy nhiên liệu như thế đã là đủ cho chúng ta?

Đôi khi bạn sẽ gặp những trường hợp mà các thẻ HTML thông thường không thể giúp bạn được. Đừng lo lắng. AngularJS có thể đáp ứng điều đó. Bằng cách nao?

AngularJS có thể mở rộng các thẻ HTML. Nghe có vẻ lạ, nhưng hãy xem ví dụ bên dưới nhé:

Bây giờ chúng ta có 1 trò chơi như sau. Có một table và yêu cầu là xuất dữ liệu khoảng 1000 dòng trong table đó. Bạn sẽ làm gì?

Với jQuery bạn có thể làm điều đó bằng cách chạy một vòng lặp. Tạo các thẻ HTML và sau đó append vào table tôi đã nói. Rắc rối không?. Tôi có giải pháp gọn gàng hơn cho bạn đây:

{{ cell.marker }}

Khoan đã. Cái thể *ng * kia là gì vậy?. Quay lại đoạn mã đó và chú ý dòng này nhé:

AngularJS Directives

ng-repeat chính là một thẻ mở rộng của AngularJS hay còn gọi là AngularJS Directives. Nó cho phép ta lặp qua một bộ sưu tập (Giống như hàm for dùng để duyệt qua một cái mảng). Trong trường hợp này, chúng ta duyệt cái mảng nằm trong board.grid. Hãy tưởng tượng mảng grid có 100 phần tử. Chúng ta sẽ in ra 100 dòng tr.

{{ cell.marker }}

Tiếp theo chúng ta thấy. Trong vòng lặp ng-repeat sẽ là dấu ngoặc {{ đây là biểu hiện cho một expression (expression là gì xin vui lòng đọc tại đây) của AngularJS. Bên trong expression chúng ta có cell.marker – Điều này có nghĩa chúng ta có một mảng row chúng ta sẽ lặp qua mảng row và lấy ra từng item. Mỗi item chúng ta gán vào cell sau đó trong mỗi cell chúng ra xuất ra dữ liệu marker – chính là một thuộc tính của cell.

Bạn thấy thế nào, rất đơn giản phải không? Khi xem qua các đoạn mã trên bạn dường như ngay lập tức hiểu ra vấn đề. Để thao tác những tác vụ như thế này, chúng ta không cần sử dụng bất kỳ thư viện nào của jQuery, một cách nặng nề và phức tạp. Với cách này, chúng ta biết hoàn toàn cách nào DOM hoạt động và bảo trì chúng dễ dàng trở về sau.

Ok. Vậy bây giờ tôi nghĩ các bạn đã hiểu được cách hoạt động của vòng lặp *
– *
Ở đoạn mã mà tôi đã ghi chú bên trên.


app = angular.module(‘ngOughts’, [‘ng’])

Ok. Bây giờ tôi có một đoạn mã mới. Hãy xem nó dùng để làm gì nhé!

Với đoạn mã trên chúng ta khái báo một ứng dụng với tên ngOughts. Tiếp theo chúng ta thấy một thẻ ‘ng’ – Điều này có nghĩa chúng ta đang thêm vào một thư viện ‘ng’. Thư viện này chứa tất cả các directives cốt lõi mà chúng ta cần sử dụng (Ví dụ : ng-repeat tôi đã ví dụ ở trên)

Tiếp theo chúng ta điều chỉnh một ít trong HTML để có thể sử dụng ứng dụng ngOughts  đã khai báo bên trên.

 

Khi bạn tạo một ứng dụng mới sử dung AngularJS. Bạn khai báo một module mới, và sau đó gán cho thẻ html một thuộc tính ng-app để thông báo rằng. Chúng ta sẽ sử dụng module này.

MVC — defining a controller and views

Now. Tôi sẽ hướng dẫn các bạn cách viết một ứng dụng AngularJS theo mô hình MVC. Ở những đoạn mã từ đây về sau. Tôi xin phép sử dụng mã CoffeeScripts.

Đầu tiên chúng ta khai báo một controller:

app.controller “BoardCtrl”, ($scope) ->

Trong trường hợp này controller của chúng ta chỉ có một tham số là $scope.

[sunote]Xin vui lòng đọc thêm bài viết này để hiểu rõ thêm các tham số của AngularJS cũng như cách truyền và sử dụng chúng : https://docs.angularjs.org/guide/di[/sunote]

Bây giờ chúng ta sẽ thêm ng-controller directive vào HTML:

 

Mọi thứ thật đơn giản. Nhưng đừng quên tên controller phải giống với khi khai báo nhé. Từ lúc này. Tất cả các thuộc tính bên trong controller BoardCtrl đều có thể truy xuất dữ liệu từ $scope. ta thấy rằng ng-repeat đang lặp qua mảng grid nằm bên trong *board. * Vậy chúng hãy khai báo biến *board *để sử dụng nhé.

Chúng ta có đoạn mã sau:

app.controller “BoardCtrl”, ($scope, Board) -> $scope.board = new Board

Và bây giờ chúng ta cần làm vài thứ. Khai báo một class Board và viết code cho nó

Đoạn mã của class Board có dạng như sau:

class Board SIZE = 3 EMPTY = ‘ ‘ NOUGHT = ‘O’ CROSS = ‘X’ PLAYER_MARKERS = [NOUGHT, CROSS] constructor: -> @reset() reset: -> @grid = [1..SIZE].map -> [1..SIZE].map -> new Cell(EMPTY) class Cell constructor: (@marker) ->

Adding a factory

Bây giờ chúng ta sẽ tạo một factory *(Đọc thêm về factory tại đây) mục đích là dùng để return *class Board về và dùng để injected vào controller của chúng ta.

angular.module(“ngOughts”).factory “Board”, -> Board

Chúng ta có thể khai báo trực tiếp class Board trực tiếp trong factory hoặc thông qua object window của javascript. Nhưng tôi không khuyến khích làm thế. Hãy để nó private trong factory. Và chúng ta có thể sử dụng ở khắp mọi nơi bằng cách injected factory này vào trong controller. Một khả năng tái sử dụng tuyệt vời.

Ok. Bây giờ chúng ta đã có một mảng Board nhưng trống rỗng! Thú vị không. Bây giờ chúng ta sẽ setup một vài thứ. Khi chúng ta click vào một cell, chúng ta sẽ đánh dấu vị trí tại chổ đó.

{{ cell.marker }}

Vâng, chúng ta vừa thêm một sự kiện click trên thẻ td. thông qua ng-click directive. Khi chúng ta click vào cell chúng ta sẽ kích hoạt hàm playCell trong class Board. Vậy nên chúng ta sẽ khai báo hàm này như sau:

class Board SIZE = 3 EMPTY = ‘ ‘ NOUGHT = ‘O’ CROSS = ‘X’ PLAYERMARKERS = [NOUGHT, CROSS] constructor: -> @reset() reset: -> @currentplayer = 0 @grid = [1..SIZE].map -> [1..SIZE].map -> new Cell(EMPTY) playCell: (cell) -> return if cell.hasBeenPlayed() cell.mark(@currentPlayerMarker()) @switchPlayer() currentPlayerMarker: -> PLAYERMARKERS[@currentplayer] switchPlayer: -> @current_player ^= 1 class Cell constructor: (@marker) -> mark: (@marker) -> hasBeenPlayed: -> @marker != EMPTY

Two way data binding

Ok. bây giờ chúng ta cần cập nhật board model, chúng ta sẽ quay lại và cập nhật giao diện, phải không nào?

Không! AngularJS cung cấp cho chúng ta cơ chế data binding two way. Nghĩa là bất cứ hành động thay đổi dữ liệu trong Board sẽ làm thay đổi hiễn thị ngoài view. Và ngược lại khi làm thay đổi bất kỳ dữ liệu nào ngoài View dữ liệu của Board cũng sẽ thay đổi theo.

Điều này tạo cho bạn một thuận lợi là bạn chỉ cần tập trung vào các nghiệp vụ cần thiết. Những thay đổi còn lại đều đã có AngularJS giúp bạn.

Còn bây giờ. Chúng ta sẽ viết thêm một chút. Khi người dùng thắng chúng ta sẽ hiễn thị những cell màu xanh. Để thay đổi màu sắc chúng ta thường dùng css và được khai báo bởi một class. Vậy nên chúng ta sẽ thay đổi thẻ td một ít nhứ sau:

{{ cell.marker }}

 

.winning { background: green; color: white; }

Điều này có nghĩa. Nếu biến cell.winning *là *true *chúng ta sẽ hiễn thị *class winning

Tiếp theo chúng ta sẽ làm thêm một chức năng. Nếu đã thắng một ván đấu. Bạn có muốn chơi lại một ván tiếp theo chứ?. Hãy làm như sau:

Khi sự kiện click được thực thi chúng ta sẽ gọi hàm reset() đã được khai báo trước đó. Nó sẽ giúp chúng ta xóa hết các dữ liệu trước đó và bắt đầu một trò chơi mới.

Và đây là đoạn mã hiễn thị khi chúng ta chiến thắng:

{{ board.winning_marker }} won the game!

ng-show * sẽ hiễn thị  nội dung khi *winning_markertrue

Bạn thấy thế nào. Thật đơn giản phải không nào!

Bạn có thể xem code hoàn chỉnh tại đây: Plunkr

Nguồn: http://www.sitepoint.com/angularjs-tutorial-build-an-app-using-directives-and-data-binding/

LEAVE A REPLY

Please enter your comment!
Please enter your name here