Ứng dụng AngularJS Hello World: Chương trình ví dụ đầu tiên của bạn

Mục lục:

Anonim

Cách tốt nhất để thấy được sức mạnh của Ứng dụng AngularJS là tạo ứng dụng "Hello World" trong chương trình cơ bản đầu tiên của bạn trong Angular.JS.

Có rất nhiều môi trường phát triển tích hợp mà bạn có thể sử dụng để phát triển AngularJS, một số môi trường phổ biến được đề cập bên dưới. Trong ví dụ của chúng tôi, chúng tôi đang sử dụng Webstorm làm IDE của chúng tôi.

  1. Webstorm
  2. Văn bản tuyệt vời
  3. AngularJS Eclipse
  4. Visual Studio

Xin chào thế giới, AngularJS

Ví dụ dưới đây cho thấy cách dễ nhất để tạo ứng dụng "Hello world" đầu tiên của bạn trong AngularJS.

Guru99

{{message}}

Giải thích mã:

  1. Từ khóa " ng-app " được sử dụng để biểu thị rằng ứng dụng này nên được coi là một ứng dụng js góc cạnh. Bất kỳ tên nào có thể được đặt cho ứng dụng này.
  2. Bộ điều khiển là những gì được sử dụng để nắm giữ logic nghiệp vụ. Trong thẻ h1, chúng ta muốn truy cập bộ điều khiển, nó sẽ có logic để hiển thị "HelloWorld", vì vậy chúng ta có thể nói, trong thẻ này, chúng tôi muốn truy cập bộ điều khiển có tên "HelloWorldCtrl".
  3. Chúng tôi đang sử dụng một biến thành viên có tên là "message", biến này không là gì khác ngoài một trình giữ chỗ để hiển thị thông báo "Hello World".
  4. "Thẻ script" được sử dụng để tham chiếu đến script angle.js có tất cả các chức năng cần thiết cho angle js. Nếu không có tham chiếu này, nếu chúng tôi cố gắng sử dụng bất kỳ hàm AngularJS nào, chúng sẽ không hoạt động.
  5. "Bộ điều khiển" là nơi mà chúng ta thực sự đang tạo ra logic kinh doanh của mình, là bộ điều khiển của chúng ta. Chi tiết cụ thể của từng từ khóa sẽ được giải thích trong các chương tiếp theo. Điều quan trọng cần lưu ý là chúng tôi đang xác định phương thức điều khiển có tên 'HelloWorldCtrl' đang được tham chiếu trong Bước 2.
  6. Chúng tôi đang tạo một "hàm" sẽ được gọi khi mã của chúng tôi gọi bộ điều khiển này. Đối tượng $ scope là một đối tượng đặc biệt trong AngularJS, nó là một đối tượng toàn cục được sử dụng trong Angular.js. Đối tượng $ scope được sử dụng để quản lý dữ liệu giữa bộ điều khiển và khung nhìn.
  7. Chúng tôi đang tạo một biến thành viên được gọi là "message", gán cho nó giá trị là "HelloWorld" và gắn biến thành viên vào đối tượng phạm vi.

LƯU Ý : Chỉ thị ng-controller là một từ khóa được định nghĩa trong AngularJS (bước # 2) và được sử dụng để xác định các bộ điều khiển trong ứng dụng của bạn. Ở đây trong ứng dụng của chúng tôi, chúng tôi đã sử dụng từ khóa ng-controller để xác định bộ điều khiển có tên 'HelloWorldCtrl'. Logic thực tế cho bộ điều khiển sẽ được tạo trong (bước # 5).

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:

Thông báo 'Hello World' sẽ được hiển thị.