AngularJS 实例

AngularJS是一个流行的JavaScript框架，其主要特点是可扩展性、模块化以及MVC架构。本文将介绍一个AngularJS实例，它将展示AngularJS如何使用控制器、视图和服务等功能。

控制器

在AngularJS中，控制器是连接数据模型和视图的中间层。控制器提供了用于定义和处理数据的方法。以下是一个简单的控制器示例：

app.controller('myController', function($scope) {
  $scope.greeting = 'Hello, World!';
});

此控制器创建了一个名为myController的控制器，在控制器中定义了称为greeting的属性，它的值为“Hello, World!”。这个值将自动传递给控制器的相关视图。

视图

在AngularJS中，视图是HTML代码。视图可以包含模板、样式表、JavaScript、控制器和其他视图组件。以下是一个简单的AngularJS视图示例：

<div ng-controller="myController">
  <h1>{{greeting}}</h1>
</div>

此视图将在页面中创建一个div，其中包含一个名为myController的控制器。在控制器中定义了一个称为greeting的属性，这个属性将通过插值表达式（{{greeting}}）注入到h1标签中。这里，插值表达式是AngulaJS视图的内置指令，它将评估属性值并在页面上渲染结果。

服务

在AngularJS中，服务提供了可复用的代码块，包括数据库连接、HTTP请求或其他类型的代码。以下是服务的代码示例：

app.service('myService', function() {
  this.getNumber = function() {
    return 42;
  };
});

此代码段定义了一个名为myService的服务，它有一个称为getNumber的方法，当调用这个方法时，它将返回数字42。

使用控制器和服务

在下面的代码示例中，我们将演示如何在控制器中使用我们的服务：

app.controller('myController', function($scope, myService) {
  $scope.number = myService.getNumber();
});

这个控制器使用刚刚定义的服务myService，它在调用它的时候返回数字42。控制器会创建一个名为number的属性，该属性将得到服务返回的数字值。我们可以在视图中访问该属性，就像下面这样：

<div ng-controller="myController">
  The number is {{number}}
</div>

这里，我们使用插值表达式呈现控制器返回的数字值。

总结

这篇文章介绍了AngularJS的一些关键概念，例如控制器、视图和服务。我们演示了如何使用这些概念来创建简单的AngularJS实例，希望这篇文章能够帮助您更好的理解AngularJS并获得更多的实践经验。

AngularJS 参考手册 AngularJS 应用