AngularJS - 翻译应用

你好，未来的编程超级巨星！今天，我们将踏上一段激动人心的旅程，探索AngularJS的世界，并学习如何创建一个翻译应用。如果你之前从未编写过一行代码，也不用担心——我会成为你的友好向导，我们会一步一步地进行。在本教程结束时，你将拥有一个能够在不同语言之间翻译文本的酷炫小程序。这有多么神奇！

AngularJS - Translate Application

AngularJS是什么？

在我们深入到我们的翻译应用之前，让我们花一点时间了解AngularJS是什么。想象你正在建造一座房子。AngularJS就像是帮助你高效组织和管理房子的框架。它是一个强大的JavaScript框架，使得创建动态网页应用变得更加简单。

设置我们的项目

第一步：包含AngularJS

首先，我们需要在我们的项目中包含AngularJS。我们将通过在HTML文件中添加一个script标签来实现：

<!DOCTYPE html>
<html>
<head>
<title>我的炫酷翻译器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 我们将在这里添加我们的应用内容 -->
</body>
</html>

这行代码就像是我们邀请AngularJS参加我们的派对。它告诉浏览器加载AngularJS库，这样我们就可以使用它的超能力了。

第二步：创建我们的应用模块

现在，让我们创建我们的AngularJS应用。我们将通过在body标签的末尾添加一个script标签来实现：

<body ng-app="translatorApp">
<!-- 应用内容在这里 -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

在这里，我们告诉AngularJS：“嘿，我们想创建一个名为'translatorApp'的应用。” body标签中的ng-app属性就像是为我们的应用贴上一个名字标签，让AngularJS知道我们的应用在哪里。

构建我们的翻译器

第三步：创建一个控制器

在AngularJS中，控制器就像是我们操作的大脑。它们管理应用的数据和行为。让我们创建一个：

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

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

$scope.translate = function() {
// 我们将在这里添加我们的翻译逻辑
$scope.outputText = "翻译中...";
};
});
</script>

这个控制器设置了两个变量（inputText和outputText）和一个translate函数。把这些想象成输入、输出和神奇翻译过程的容器。

第四步：创建用户界面

现在，让我们为我们的翻译器创建一个简单的界面：

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>我的炫酷翻译器</h1>
<textarea ng-model="inputText" placeholder="输入要翻译的文本"></textarea>
<button ng-click="translate()">翻译</button>
<p>{{ outputText }}</p>
</div>

<!-- Script标签在这里 -->
</body>

让我们分解一下：

我们使用ng-controller将我们的HTML连接到我们的控制器。
ng-model="inputText"将文本区域绑定到我们的inputText变量。
ng-click="translate()"告诉AngularJS当按钮被点击时运行我们的translate函数。
{{ outputText }}显示outputText的值。

添加翻译功能

第五步：集成翻译API

为了让我们的翻译器真正工作，我们需要使用一个翻译服务。在这个例子中，我们将使用免费的MyMemory翻译API。我们需要发送一个HTTP请求，所以让我们将$http服务添加到我们的控制器：

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 = "哎呀！出错了。";
});
};
});

这个更新的控制器现在包括了语言选择，并在调用翻译函数时向翻译API发送请求。

第六步：更新用户界面

让我们更新我们的HTML以包含语言选择：

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>我的炫酷翻译器</h1>
<select ng-model="fromLang">
<option value="en">英语</option>
<option value="es">西班牙语</option>
<option value="fr">法语</option>
</select>
<select ng-model="toLang">
<option value="en">英语</option>
<option value="es">西班牙语</option>
<option value="fr">法语</option>
</select>
<textarea ng-model="inputText" placeholder="输入要翻译的文本"></textarea>
<button ng-click="translate()">翻译</button>
<p>{{ outputText }}</p>
</div>

<!-- Script标签在这里 -->
</body>

结论

恭喜你！你刚刚使用AngularJS构建了一个简单但功能齐全的翻译应用。以下是我们学到的东西的快速回顾：

我们设置了一个AngularJS应用程序
我们创建了一个控制器来管理应用的行为
我们使用AngularJS指令构建了一个用户界面
我们集成了一个翻译API来提供实际的功能

记住，学习编码是一个旅程。如果一开始有些部分看起来很困惑，不用担心——随着练习，一切都会开始变得有意义。继续尝试，继续学习，在你意识到之前，你将构建更多复杂和令人兴奋的应用程序！

下面是一个总结我们使用的主要AngularJS概念的表格：

概念	描述	示例
模块	应用的容器	`angular.module('translatorApp', [])`
控制器	管理应用行为	`app.controller('TranslatorController', function($scope) {...})`
作用域	将控制器连接到视图	`$scope.inputText = ''`
指令	扩展HTML	`ng-app`, `ng-controller`, `ng-model`, `ng-click`
表达式	显示值	`{{ outputText }}`

快乐编码，愿你的翻译冒险之旅没有错误，充满学习！

Credits: Image by storyset