Khởi động cùng AngularJs

Chào mọi người. Hôm nay mình xin phép được giới thiệu với các bạn về 1 framework js khá nổi tiếng trong giới design và development là AngularJs Thực ra thì mình cũng mới bắt đầu tìm hiểu và cũng chỉ là 1 con gà mờ mới tập tành học bước đầu thôi nên chưa thể đi sâu chi tiết được. Nhưng mà mong răng mỗi tháng tiếp đây minh sẽ chia sẽ được nhiều hơn về Angularjs và quá trình học Angularjs của bản thân Nào, giờ thì bắt đầu với việc giới thiệu Angularjs thôithiejeu

I.Giới thiệu

AngularJs là ngôn ngữ mã nguồn mở được phát triển dựa trên nền tảng javascript. AngularJs hỗ trợ cho việc cập nhật dữ liệu cho trang Web của bạn trở nên mượt mà hơn. Với JavaScript, bạn phải tải lại toàn bộ trang để cập nhật dữ liệu cho một phần nào đó của trang, trong khi với AngularJS, hoạt động cập nhật dữ liệu trở nên dễ dàng hơn dưới sự trợ giúp của khái niệm Data-Binding và Dependency injection. Nói như vậy ta có thể hiểu nó tương tự như Ajax rồi. AngularJs được viết và thực hiện trên mô hình MVC, cái này chắc dân lập trình nào cũng biết )

II. Bắt đầu tìm hiểu

Đầu tiên thì chung ta sẽ bắt đầu tìm hiểu về 1 số tính năng cốt lõi của AngularJs: có 2 tính năng mà phần giới thiệu mình có nhắc tới đó là Data-Binding và Dependency injection. Vậy Data-Binding là gì? Data-Binding: Nó tự động đồng bộ hóa dữ liệu giữa thành phần model và view. Đọc xong sẽ hơi thắc mắc là nó đồng bộ dữ liệu như thế nào được. Mình sẽ nói 1 chút về vấn đề này, trình bày theo hiểu biết của mình: Tức là cũng tương tự như ajax, khi dữ liệu được cập nhật từ model thì ngay ở view dữ liệu sẽ được show ra mà không cần phải reload lại page, nó trực tiếp xử lý tự động đồng bộ giữa model và view, trực tiếp tạo sự kết nối giữa model và template Data-binding gồm các directive:

• ng-bind
  

• ng-bind-html
  

• ng-bind-template
  

• ng-model
  

• ng-non-bindable
  

Phần này mình sẽ tìm hiểu và giải thích rõ ở bài sau. Giờ mình sẽ tiếp tục với phần chính tiếp theo đó là Dependency injection. Dependency Injection là một mô hình thiết kế phần mềm mà trong đó các thành phần được đưa ra từ những phần phụ thuộc nó - dependencies thay cho việc hard coding chúng trong các thành phần. Điều này làm cho cách thành phần phụ thuộc nhau trong phần cấu hình. Nó giúp việc làm có các thành phần có tính tái sử dụng cao, dễ bảo dưỡng và kiểm thử. Đọc xong không hiểu đang đọc cái gì ) Mình sẽ tóm gọn nó lại 1 tí cho dễ hiểu: Đầu tiên là Dependendy Inversion principle. nói nôm na là 1 nguyên tắc để thực hiện code, lấy 1 ví dụ thế này cho dễ hiểu, Ta có 1 function và function này lại gọi 1 hay nhiều function con khác Vậy là function cha sẽ gọi các function con thực hiện như vậy function cha lại phụ thuộc vào function con, khi function con thay đổi sẽ làm thay đổi function cha tất nhiên là nó làm code xấu đi và dễ hỏng còn nếu với Dependendy Inversion principle các function cùng phụ thuộc vào 1 interface. Ta có thể dễ dàng thay thế, sửa đổi function con mà không ảnh hưởng gì tới function cha. Vòng vo với cái nguyên tắc đó vậy Dependency Injection là gì: Đây là một cách để hiện thực Inversion of Control Pattern (Có thể coi nó là một design pattern riêng cũng được). Các function, module phụ thuộc (dependency, function module con) sẽ được inject vào function, module cha Vậy là tạm xong 2 tính năng chính tiếp theo sẽ là scope Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối giữa controller và view. Thực ra thì nó cũng như 1 method instance hỗ trợ việc xử lý dữ liệu trong model để gọi và thực hiện ở controller và view Controller: Đây là những tính năng của AngularJS mà được giới hạn tới một scope cụ thể.

Service: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví dụ $http để tạo XMLHttpRequests. Nó là các singleton object mà được khởi tạo duy nhất một lần trong ứng dụng.. Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng và trả về các mảng mới. Template:Là các rendered view với các thông tin từ controller và model. Nó có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc nhiều view với một trang sử dụng "partials".

Phân tiếp theo mình sẽ nói về 1 số directive chính trong angularjs

1. Ng-bind: Trong 1 thẻ HTML có sử dụng ng-bind thì AngularJS sẽ tìm và thay thế nội dụng trong thẻ HTML bằng với giá trị mà có cùng tên định nghĩ trong ng-bind. Đọc xong chắc cũng hiểu chút chút và đặc biệt ng-bind còn có nguyên tắc viết code của nó.

<div ng-bind = "abc"> </div>

Nhưng được khuyên dùng: <div class="ng-bind: abc"></div> Ngoài ra còn có thể sử dụng nguyên tắc {{}} Tức là: {{abc}} 2.ng-model: Nhiệm vụ của ng-model là liên kết view trong model, thực hiện 1 số các validates , thiết lập các class css của html một số css trong ng-model: ng-valid: model is valid ng-invalid: model is invalid ng-valid-[key]: for each valid key added by $setValidity ng-invalid-[key]: for each invalid key added by $setValidity ng-pending: any $asyncValidators are unfulfilled 3. ng-app: directive này định nghĩa và liên kết một ứng dụng AngularJS tới HTML, đọc xong sẽ k hiểu là nó liên kết như thế nào. minh sẽ giải thích 1 tí ng-app nếu được khai báo trong thẻ body thì nghiễm nhiên nó sẽ tự hiểu tất cả các thẻ con trong thẻ body điều sử dụng angularjs

<body ng-app=" "></body>

### III. Kết Trên đây là 1 ít tìm hiểu về angularjs của mình. Mình sẽ tiếp tục tìm hiểu sâu hơn ở phần sau và sẽ tiếp tục share các kiến thức mình có được. Chúc các bạn thành công