Hướng dẫn điều khiển AngularJS với ví dụ

Mục lục:

Anonim

Controller trong AngularJs là gì?

Bộ điều khiển trong AngularJs lấy dữ liệu từ Chế độ xem, xử lý dữ liệu và sau đó gửi dữ liệu đó đến chế độ xem được hiển thị cho người dùng cuối. Bộ điều khiển sẽ có logic kinh doanh cốt lõi của bạn.

Bộ điều khiển sẽ sử dụng mô hình dữ liệu, thực hiện xử lý theo yêu cầu và sau đó chuyển đầu ra đến chế độ xem mà lần lượt được hiển thị cho người dùng cuối.

Trong hướng dẫn này, bạn sẽ học-

  • Những gì Controller làm từ quan điểm của Angular
  • Cách xây dựng Bộ điều khiển cơ bản
  • Cách xác định các Phương thức trong Bộ điều khiển
  • Sử dụng ng-controller trong các tệp bên ngoài

    • Những gì Controller làm từ quan điểm của Angular

    Sau đây là một định nghĩa đơn giản về hoạt động của Angular JS Controller.

    • Trách nhiệm chính của bộ điều khiển là kiểm soát dữ liệu được chuyển đến chế độ xem. Phạm vi và khung nhìn có giao tiếp hai chiều.
    • Các thuộc tính của khung nhìn có thể gọi các "hàm" trên phạm vi. Hơn nữa các sự kiện trên khung nhìn có thể gọi các "phương thức" trên phạm vi. Đoạn mã dưới đây đưa ra một ví dụ đơn giản về một hàm.
      • Hàm ($ scope) được định nghĩa khi xác định bộ điều khiển và một hàm bên trong được sử dụng để trả về kết nối của $ scope.firstName và $ scope.lastName.
      • Trong AngularJS khi bạn định nghĩa một hàm dưới dạng một biến, nó được gọi là Phương thức.
    • Dữ liệu theo cách này truyền từ bộ điều khiển đến phạm vi, và sau đó dữ liệu chuyển qua lại từ phạm vi đến khung nhìn.
    • Phạm vi được sử dụng để hiển thị mô hình với khung nhìn. Mô hình có thể được sửa đổi thông qua các phương thức được xác định trong phạm vi có thể được kích hoạt thông qua các sự kiện từ khung nhìn. Chúng ta có thể định nghĩa mô hình hai chiều ràng buộc từ phạm vi đến mô hình.
    • Lý tưởng nhất là không nên sử dụng bộ điều khiển để thao tác DOM. Điều này sẽ được thực hiện bởi các chỉ thị mà chúng ta sẽ thấy ở phần sau.
    • Thực tiễn tốt nhất là có bộ điều khiển dựa trên chức năng. Ví dụ: nếu bạn có một biểu mẫu để nhập và bạn cần một bộ điều khiển cho điều đó, hãy tạo một bộ điều khiển được gọi là "bộ điều khiển biểu mẫu".

    Cách xây dựng Bộ điều khiển cơ bản

    Trước khi bắt đầu với việc tạo bộ điều khiển, trước tiên chúng ta cần thiết lập trang HTML cơ bản tại chỗ.

    Đoạn mã dưới đây là một trang HTML đơn giản có tiêu đề là "Đăng ký sự kiện" và có các tham chiếu đến các thư viện quan trọng như Bootstrap, jquery và Angular.

    1. Chúng tôi đang thêm các tham chiếu đến các bảng định kiểu bootstrap CSS, sẽ được sử dụng cùng với các thư viện bootstrap.
    2. Chúng tôi đang thêm các tham chiếu đến các thư viện anglejs. Vì vậy, bây giờ bất cứ điều gì chúng ta làm với angle.js trong tương lai sẽ được tham chiếu từ thư viện này.
    3. Chúng tôi đang thêm các tham chiếu vào thư viện bootstrap để làm cho trang web của chúng tôi phản hồi nhanh hơn đối với các điều khiển nhất định.
    4. Chúng tôi đã thêm các tham chiếu đến các thư viện jquery sẽ được sử dụng cho thao tác DOM. Điều này được Angular yêu cầu vì một số chức năng trong Angular phụ thuộc vào thư viện này.

    Theo mặc định, đoạn mã trên sẽ xuất hiện trong tất cả các ví dụ của chúng tôi, vì vậy chúng tôi có thể chỉ hiển thị mã gócJS cụ thể trong các phần tiếp theo.

    Thứ hai, hãy xem các tệp và cấu trúc tệp của chúng ta mà chúng ta sẽ bắt đầu trong suốt khóa học của chúng ta.

    1. Đầu tiên, chúng tôi tách các tệp của chúng tôi thành 2 thư mục như được thực hiện với bất kỳ ứng dụng web thông thường nào. Chúng tôi có thư mục "CSS". Nó sẽ chứa tất cả các tệp định kiểu xếp tầng của chúng ta và sau đó chúng ta sẽ có thư mục "lib" chứa tất cả các tệp JavaScript của chúng ta.
    2. Tệp bootstrap.css được đặt trong thư mục CSS và nó được sử dụng để thêm giao diện đẹp cho trang web của chúng tôi.
    3. Angle.js là tệp chính của chúng tôi được tải xuống từ trang angleJS và được giữ trong thư mục lib của chúng tôi.
    4. Tệp app.js sẽ chứa mã của chúng tôi cho bộ điều khiển.
    5. Tệp bootstrap.js được sử dụng để bổ sung tệp bootstrap.cs để thêm chức năng bootstrap vào ứng dụng web của chúng tôi.
    6. Tệp jquery sẽ được sử dụng để thêm chức năng thao tác DOM vào trang web của chúng tôi.

    Hãy xem một ví dụ về cách sử dụng angle.js,

    Những gì chúng tôi muốn làm ở đây chỉ là hiển thị các từ "AngularJS" ở cả định dạng văn bản và trong một hộp văn bản khi trang được xem trong trình duyệt.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Giải thích mã:

    1. Các ng-app từ khóa được sử dụng để biểu thị rằng ứng dụng này nên được coi là một ứng dụng góc. Bất cứ điều gì bắt đầu bằng tiền tố 'ng' được gọi là một chỉ thị. "DemoApp" là tên được đặt cho ứng dụng Angular.JS của chúng tôi.
    2. Chúng tôi đã tạo một thẻ div và trong thẻ này, chúng tôi đã thêm một chỉ thị ng-controller cùng với tên của Controller "DemoController". Về cơ bản, điều này làm cho thẻ div của chúng tôi có khả năng truy cập nội dung của Trình điều khiển trình diễn. Bạn cần phải đề cập đến tên của bộ điều khiển trong chỉ thị để đảm bảo rằng bạn có thể truy cập vào chức năng được xác định trong bộ điều khiển.
    3. Chúng tôi đang tạo một ràng buộc mô hình bằng cách sử dụng chỉ thị ng-model. Điều này làm là nó liên kết hộp văn bản cho Tên hướng dẫn được liên kết với biến thành viên "tutorialName".
    4. Chúng tôi đang tạo một biến thành viên có tên là "tutorialName" sẽ được sử dụng để hiển thị thông tin mà người dùng nhập vào hộp văn bản cho Tên Hướng dẫn.
    5. Chúng tôi đang tạo một mô-đun sẽ đính kèm vào ứng dụng DemoApp của chúng tôi. Vì vậy, mô-đun này bây giờ trở thành một phần của ứng dụng của chúng tôi.
    6. Trong mô-đun, chúng tôi xác định một hàm gán giá trị mặc định là "AngularJS" cho biến tutorialName của chúng tôi.

    Nếu lệnh được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

    Đầu ra:

    Vì chúng tôi đã gán biến tutorialName một giá trị là "Angular JS", giá trị này sẽ được hiển thị trong hộp văn bản và trong dòng văn bản thuần túy.

    Cách xác định các Phương thức trong Bộ điều khiển

    Thông thường, người ta sẽ muốn xác định nhiều phương thức trong bộ điều khiển để tách logic nghiệp vụ.

    Ví dụ: giả sử nếu bạn muốn bộ điều khiển của mình thực hiện 2 việc cơ bản,

    1. Thực hiện phép cộng 2 số
    2. Thực hiện phép trừ 2 số

    Sau đó, lý tưởng nhất là bạn nên tạo 2 phương thức bên trong bộ điều khiển của mình, một phương thức để thực hiện phép cộng và phương thức kia để thực hiện phép trừ.

    Hãy xem một ví dụ đơn giản về cách bạn có thể xác định các phương thức tùy chỉnh trong bộ điều khiển Angular.JS. Bộ điều khiển sẽ chỉ trả về một chuỗi.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Giải thích mã:

    1. Ở đây, chúng ta chỉ định nghĩa một hàm trả về một chuỗi "AngularJS". Hàm được gắn với đối tượng phạm vi thông qua một biến thành viên có tên là tutorialName.
    2. Nếu lệnh được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

    Đầu ra:

    Sử dụng ng-controller trong các tệp bên ngoài

    Hãy xem một ví dụ về "HelloWorld" trong đó tất cả các chức năng được đặt trong một tệp duy nhất. Bây giờ đã đến lúc đặt mã cho bộ điều khiển trong các tệp riêng biệt.

    Hãy làm theo các bước dưới đây để làm điều này.

    Bước 1) Trong tệp app.js, hãy thêm mã sau cho bộ điều khiển của bạn

    angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

    Đoạn mã trên thực hiện những điều sau đây,

    1. Xác định một mô-đun được gọi là "ứng dụng" sẽ giữ bộ điều khiển cùng với chức năng của bộ điều khiển.
    2. Tạo bộ điều khiển với tên "HelloWorldCtrl". Bộ điều khiển này sẽ được sử dụng để có chức năng hiển thị thông báo "Hello World".
    3. Đối tượng phạm vi được sử dụng để truyền thông tin từ bộ điều khiển đến khung nhìn. Vì vậy, trong trường hợp của chúng ta, đối tượng scope sẽ được sử dụng để chứa một biến có tên là "message".
    4. Chúng tôi đang xác định thông báo biến và gán giá trị "Hello World" cho nó.

    Bước 2) Bây giờ, trong tệp Sample.html của bạn, hãy thêm một lớp div sẽ chứa chỉ thị ng-controller và sau đó thêm một tham chiếu đến biến thành viên "message"

    Cũng đừng quên thêm tham chiếu đến tệp script app.js có mã nguồn cho bộ điều khiển của bạn.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Nếu mã trên được nhập chính xác, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.

    Đầu ra:

    Tóm lược

    • Trách nhiệm chính của bộ điều khiển là tạo một đối tượng phạm vi, đối tượng này sẽ được chuyển đến chế độ xem
    • Cách tạo một bộ điều khiển đơn giản bằng cách sử dụng các lệnh ng-app, ng-controller và ng-model
    • Cách thêm các phương thức tùy chỉnh vào bộ điều khiển có thể được sử dụng để tách các chức năng khác nhau trong mô-đun anglejs.
    • Bộ điều khiển có thể được định nghĩa trong các tệp bên ngoài để tách lớp này khỏi lớp Xem. Đây thường là cách tốt nhất khi tạo các ứng dụng web.