Giới thiệu thư viện ui-bootstrap dùng cho angularjs

Xin chào các bạn hiện tại thì mình đang join vào 1 dự án mà phần frontend được xây dựng bằng AngularJS. Vì thế mình bắt tay đọc các tài liệu liên quan đến AngularJS. Nghe đến frontend có vẻ như không có nhiều thứ để nghĩ lắm nhưng kể từ khi bắt đầu đọc tài liệu thì mình mới hiểu là nó cũng không hề ngắn 1 chút nào, để có thể xây dựng 1 ứng dụng Single Page hoàn toàn độc lập. AngularJS hoạt động dựa trên mô hình Dependence Injection, có nghỉa là ngoài nội dung sử dụng các thuộc tính có trong core của nó thì bạn hoàn toàn có thể cài thêm các module chức năng khác vào để dùng và thư viện ui-bootstrap là 1 trong số đó.

Giới Thiệu

1.AngularJS uiBootstrap là j?

uiBootstrap được phát triển bới angularUI team(họ là nhà cung cấp và phát triển hằng hà sa các thư viện sử dụng cho angularJS)- Nếu bạn muốn tham khảo thêm về về các thư viện khác có thể vào offical site của họ, mình để link bên dưới bài viết. Nói 1 cách ngắn gọn và dễ hiểu thì là nó là bản mô phỏng lại của Bootstrap bình thường. Không nhiều hơn không kém hơn. Nhìn trên mặt giao diện web bạn sẽ chẳng thể nào nhận ra mình đang dùng Bootstrap Hay uiBootstrap.

2.Tại sao lại phải dùng uiBootstrap nếu như nó giống hệt bootstrap thông thường?

Tuy có vẻ bên ngoài giống nhau nhưng cách thức hoạt động của 2 thư viện này giống nhau nhưng cách thức hoạt động của nó lại hoàn toàn khác nhau. Bootstrap hoạt động dựa trên việc bắt các event được cung cấp sẵn trong Javascript còn ui Bootstrap thì lại làm việc dựa trên cơ chế binding-data sử dụng Object giống như AngularJS. Thêm 1 lí do để sử dụng nó là vì nó cực kì phổ biến. gần như lúc nào cũng đi kèm với angularJS khi xậy dựng ứng dụng Single Page thay vì phải dùng Bootstrap, tránh việc sử dụng 2 cơ chế làm việc trên 1 trang. Chẳng hạn như project mình đang tham gia, hiện chỉ cài cắm thêm mình ui-bootstrap và ng-animate(lí do được thêm vào cũng chỉ để hỗ trợ animation cho uiBootstrap). Chắc sắp tới sẽ có thêm 1 module router, lúc đó mình sẽ viết bài về nó.

Ví Dụ Demo

Cái này thì trên trang chủ của nó có Demo từ A đến Z cho bạn rồi. Mình thì trong quá trình làm cũng có xây dựng ví dụ nhưng nó đã được viết theo mô hình rồi nên sẽ hơi khó hiểu. Không trực quan bằng ví dụ trên trang chủ của nó (https://angular-ui.github.io/bootstrap/).

Cách sử dụng

Để sử dụng thư viện, bạn chỉ cần include file core module(https://angular-ui.github.io/bootstrap hoặc có thể cài thông qua npm hay bower) của nó vào ứng dụng web của bạn rồi sau đó Inject tên module vào app của mình.

angular.module('myModule', ['ui.bootstrap']);

Các chắc năng dùng trong uiBootstrap được viết dưới dạng các directive và việc của bạn chỉ là sử dụng nó như những HTML element bình thường và truyến vào đó các Attribute với giá trị như là những tham số và phần việc còn lại là của uiBootstrap. Nó sẽ lo nốt phần việc còn lại cho bạn. Chẳng hạn bạn muốn có 1 pagination? Đây là tất cả những j bạn cần:

<uib-pagination ng-model="currentPage"></uib-pagination>

hoặc với 1 datepicker

<uib-datepicker ng-model="dt"></uib-datepicker>

Và để lấy các giá trị ra bạn chỉ cần gọi đến model được khai báo trong directive. Tiện lợi mà chẳng có lấy 1 đoạn Javascript lằng nhằn nào được viết ra cả.

Tất nhiên còn rất nhiều các tham số đi kèm đến custom các directive trên nhưng ở trên trang chủ đả nói rất rõ ràng rồi và vì thê mình sẽ không nói lại. Mình chỉ lưu ý 1 chuyện về các kí hiệu được viết bên cạnh các option của mỗi directive( thật ra trên trang chủ cũng nói rồi, mình chỉ giả thích và bổ xung thôi):

Biểu tượng này chỉ ra rằng đang có 1 watch lằng nghe sự thay đổi của scope. Theo mình đây là 1 biểu tượng quan trọng vì $watch thường không được khuyến khích dùng cho lắm vì nó dẫn đến việc tăng tần xuất xử lí JS do phải lắng nghe thay đổi liên tục.

Tham số đầu vào là giá trị boolean

Setting này có thể được config lại trong service(Theo mình hiểu thì là những setting này có thể thay đổi theo ý muốn của mình được thông qua function uibDirectiveConfig). Tuy nhiên mình không quan tâm tới điều này lắm vì mình chưa thấy có j phải custom lại và cũng chưa tìm thấy lí do để làm việc đó (lí do chủ yếu là chưa tìm thấy tut hướng dẫn =)) ).

Bạn có thể truyền vào đây 1 biểu thức.

Đọc tên là hiểu đơn giản là chống đọc thôi

Kết Luận

Đó là tất cả những j mình hiểu về thư viện uiBootstrap (cho đến thời điểm này). Hy vọng sẽ giúp ích được ít nhiều cho bạn trong quá trình làm việc và học tập. Nếu có ý kiến đóng góp j xin cmt để giúp mình hoàn thaianj bản thân. Thank!