AngularJS - 行内应用程序

引言

你好，未来的AngularJS大师们！我很高兴能成为你们在这个激动人心的旅程中的向导，一起探索AngularJS行内应用程序的世界。作为一个教授编程多年的人（我们就说记得软盘实际上是软的时候吧），我可以向你保证，在本教程结束时，你将能够自信地创建你的第一个AngularJS行内应用程序。

AngularJS - In-line Application

什么是行内应用程序？

在我们深入研究代码之前，让我们先了解一下“行内应用程序”的含义。想象你在一个自助餐前（跟着我，我保证这个类比会讲得通）。行内应用程序就像把所有你喜欢的菜放在一个盘子里——你需要的一切都在那里，随时可以使用。在AngularJS的术语中，这意味着我们将把整个应用程序写在一个HTML文件内。没有单独的JavaScript文件，没有外部模块——只有纯粹的、未掺杂的AngularJS精华。

设置你的第一个行内应用程序

第一步：HTML框架

让我们从HTML文件的骨架开始：

<!DOCTYPE html>
<html>
<head>
<title>我的第一个AngularJS行内应用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

如果你之前做过任何网页开发，这可能看起来很熟悉。如果没有，别担心！我们只是在设置一个基本的HTML文档，并从内容分发网络（CDN）中包含AngularJS库。把它想象成邀请AngularJS参加我们的编码派对。

第二步：添加ng-app指令

现在，让我们告诉AngularJS我们的应用程序在哪里：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS行内应用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

我们在<html>标签中添加了ng-app="myApp"。这就像在你的房子上放一个大招牌，上面写着：“AngularJS住在这里！”myApp部分是我们给应用程序起的名字。

创建你的第一个控制器

什么是控制器？

在AngularJS中，控制器就像是应用程序的大脑。它管理你的应用程序特定部分的数据和行为。让我们来创建一个！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS行内应用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
});
</script>
</body>
</html>

让我们分解一下：

我们在<body>标签中添加了ng-controller="MainController"。这告诉AngularJS这部分HTML由这个控制器控制。
在<script>标签内，我们创建我们的应用程序模块angular.module('myApp', [])。
然后我们使用app.controller()定义我们的控制器。$scope参数是我们如何在控制器和视图（我们的HTML）之间传递数据。
我们在$scope上设置了一个greeting属性。这使它可以在我们的HTML中使用。
在HTML中，我们使用{{greeting}}来显示greeting的值。

添加用户交互

让我们通过添加一个按钮来使应用程序更具交互性，这个按钮可以更改问候语：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS行内应用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">更改问候语</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "Greetings, Earthling!";
};
});
</script>
</body>
</html>

这里新增的内容有：

我们添加了一个按钮，并带有ng-click指令。这告诉AngularJS当按钮被点击时调用changeGreeting()函数。
在我们的控制器中，我们在$scope上定义了changeGreeting()函数。这个函数会改变greeting的值。

数据绑定实战

AngularJS最强大的功能之一就是双向数据绑定。让我们看看它是如何工作的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS行内应用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Welcome to our AngularJS App!";
$scope.name = "Anonymous";
});
</script>
</body>
</html>

在这个例子中：

我们添加了一个输入字段，并带有ng-model="name"。这把输入框的值绑定到我们的$scope上的name属性。
我们使用{{name}}在段落中显示name的值。
当你在输入框中输入时，你会看到问候语实时更新。这就是双向数据绑定的魔力！

结论

恭喜你！你刚刚创建了你的第一个AngularJS行内应用程序。我们已经介绍了设置AngularJS应用程序、创建控制器、处理用户交互和实现双向数据绑定的基础知识。记住，像学习任何新技能一样，掌握AngularJS需要练习。所以不要害怕实验、破坏东西，并从你的错误中学习。这是我们所有人成为今天这样的开发者的方式！

下面是一个总结我们使用过的关键AngularJS指令的表格：

指令	目的
ng-app	定义并引导一个AngularJS应用程序
ng-controller	为你的应用程序的一部分指定一个控制器
ng-click	指定一个在元素被点击时运行的函数
ng-model	把一个输入、选择或文本区域绑定到作用域上的一个属性

继续编码，继续学习，最重要的是，享受乐趣！记住，每个专家都曾是一个初学者。你的AngularJS旅程才刚刚开始！

Credits: Image by storyset