Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Dịch máy

Xin chào, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của AngularJS và học cách tạo một ứng dụng dịch máy. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của hướng dẫn này, bạn sẽ có một ứng dụng nhỏ bé nhưng tuyệt vời có thể dịch văn bản giữa các ngôn ngữ khác nhau. Thật tuyệt vời phải không?

AngularJS - Translate Application

AngularJS là gì?

Trước khi chúng ta nhảy vào ứng dụng dịch máy của mình, hãy dành một chút thời gian để hiểu AngularJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. AngularJS giống như khung công tác giúp bạn tổ chức và cấu trúc ngôi nhà của mình một cách hiệu quả. Đây là một framework JavaScript mạnh mẽ giúp dễ dàng tạo các ứng dụng web động.

Thiết lập Dự án của Chúng ta

Bước 1: Chèn AngularJS vào Dự án

Đầu tiên, chúng ta cần chèn AngularJS vào dự án của mình. Chúng ta sẽ làm điều này bằng cách thêm một thẻ script vào file HTML:

<!DOCTYPE html>
<html>
<head>
<title>Trình Dịch Tuyệt Vời Của Tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Chúng ta sẽ thêm nội dung ứng dụng ở đây -->
</body>
</html>

Dòng mã này giống như mời AngularJS đến tiệc của chúng ta. Nó告诉浏览器 tải thư viện AngularJS để chúng ta có thể sử dụng các siêu năng lực của nó.

Bước 2: Tạo.Module Ứng dụng

Bây giờ, hãy tạo ứng dụng AngularJS của mình. Chúng ta sẽ làm điều này bằng cách thêm một thẻ script ở cuối phần body:

<body ng-app="translatorApp">
<!-- Nội dung ứng dụng ở đây -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Ở đây, chúng ta đang告诉 AngularJS, "Nào, chúng ta muốn tạo một ứng dụng có tên là 'translatorApp'." Thuộc tính ng-app trong thẻ body giống như đặt một thẻ tên cho ứng dụng của chúng ta để AngularJS biết ứng dụng của chúng ta ở đâu.

Xây dựng Ứng dụng Dịch Máy

Bước 3: Tạo một Controller

Trong AngularJS, controllers giống như não của chúng ta. Chúng quản lý dữ liệu và hành vi của ứng dụng. Hãy tạo một controller:

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// Chúng ta sẽ thêm logic dịch ở đây
$scope.outputText = "Đang dịch...";
};
});
</script>

Controller này thiết lập hai biến (inputText và outputText) và một hàm translate. Hãy tưởng tượng chúng như là các容器 cho đầu vào, đầu ra và quá trình dịch kỳ diệu.

Bước 4: Tạo Giao diện Người dùng

Bây giờ, hãy tạo một giao diện đơn giản cho trình dịch của chúng ta:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Trình Dịch Tuyệt Vời Của Tôi</h1>
<textarea ng-model="inputText" placeholder="Nhập văn bản cần dịch"></textarea>
<button ng-click="translate()">Dịch</button>
<p>{{ outputText }}</p>
</div>

<!-- Thẻ script ở đây -->
</body>

Hãy phân tích này:

  • Chúng ta sử dụng ng-controller để kết nối HTML với controller.
  • ng-model="inputText" liên kết textarea với biến inputText.
  • ng-click="translate()"告诉 AngularJS chạy hàm translate khi按钮被点击.
  • {{ outputText }} hiển thị giá trị của outputText.

Thêm Chức Năng Dịch

Bước 5: Tích hợp API Dịch

Để trình dịch của chúng ta thực sự hoạt động, chúng ta cần sử dụng một dịch vụ dịch. Trong ví dụ này, chúng ta sẽ sử dụng API dịch miễn phí MyMemory Translation API. Chúng ta cần thực hiện một yêu cầu HTTP, vì vậy hãy thêm dịch vụ $http vào controller:

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Oops! Đã xảy ra lỗi.";
});
};
});

Controller này hiện bao gồm việc chọn ngôn ngữ và thực hiện yêu cầu dịch khi hàm translate được gọi.

Bước 6: Cập nhật Giao diện Người dùng

Hãy cập nhật HTML của chúng ta để bao gồm việc chọn ngôn ngữ:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Trình Dịch Tuyệt Vời Của Tôi</h1>
<select ng-model="fromLang">
<option value="en">Tiếng Anh</option>
<option value="es">Tiếng Tây Ban Nha</option>
<option value="fr">Tiếng Pháp</option>
</select>
<select ng-model="toLang">
<option value="en">Tiếng Anh</option>
<option value="es">Tiếng Tây Ban Nha</option>
<option value="fr">Tiếng Pháp</option>
</select>
<textarea ng-model="inputText" placeholder="Nhập văn bản cần dịch"></textarea>
<button ng-click="translate()">Dịch</button>
<p>{{ outputText }}</p>
</div>

<!-- Thẻ script ở đây -->
</body>

Kết luận

Chúc mừng! Bạn vừa xây dựng một ứng dụng dịch máy đơn giản nhưng chức năng bằng AngularJS. Dưới đây là tóm tắt nhanh những gì chúng ta đã học:

  1. Chúng ta thiết lập một ứng dụng AngularJS.
  2. Chúng ta tạo một controller để quản lý hành vi của ứng dụng.
  3. Chúng ta xây dựng giao diện người dùng bằng các chỉ thị AngularJS.
  4. Chúng ta tích hợp một API dịch để cung cấp chức năng thực tế.

Nhớ rằng, học lập trình là một hành trình. Đừng lo lắng nếu một số phần đầu tiên có vẻ khó hiểu - với sự luyện tập, mọi thứ sẽ trở nên rõ ràng hơn. Hãy tiếp tục thử nghiệm, học hỏi, và trước khi bạn biết, bạn sẽ xây dựng các ứng dụng phức tạp và thú vị hơn!

Dưới đây là bảng tóm tắt các khái niệm chính của AngularJS chúng ta đã sử dụng:

Khái niệm Mô tả Ví dụ
Module Lưu trữ ứng dụng angular.module('translatorApp', [])
Controller Quản lý hành vi ứng dụng app.controller('TranslatorController', function($scope) {...})
Scope Kết nối controller với view $scope.inputText = ''
Chỉ thị Mở rộng HTML ng-app, ng-controller, ng-model, ng-click
Biểu thức Hiển thị giá trị {{ outputText }}

Chúc bạn lập trình vui vẻ, và hy vọng hành trình dịch máy của bạn sẽ không có lỗi và đầy học hỏi!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng Giỏ hàng
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Biểu đồ