AngularJS入门教程之控制器详解

`。我们也可以在模块中使用`.controller()`方法来定义控制器。

三、AngularJS控制器实例

下面是一个简单的AngularJS控制器实例，它创建一个名为personCtrl的控制器，该控制器具有firstName和lastName两个属性，以及一个fullName方法用于返回这两个属性的组合：

HTML部分：

```html

```

AngularJS实例

在AngularJS框架中，控制器是核心组件之一，负责管理和操作数据模型。下面我们通过实例来展示如何创建和使用AngularJS控制器。

一、基本实例

创建一个简单的HTML页面，通过AngularJS绑定姓名输入和显示。

```html

```

在这个例子中，我们定义了一个名为`personCtrl`的控制器，通过`ng-controller`指令将其绑定到HTML元素上。用户输入的姓名会实时显示在界面上。只需将相关的JavaScript代码复制到名为`personController.js`的外部文件中即可。

二、高级实例

接下来，我们创建一个更复杂的控制器示例，展示如何管理一个包含多个对象的数据列表。

```javascript

// 在namesController.js文件中定义控制器

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}

];

});

```

然后在HTML中应用这个控制器：

```html

``` 这里的例子展示了如何使用`ng-repeat`指令来循环遍历`names`数组并显示每个对象的属性。将控制器代码保存在名为`namesController.js`的文件中，并在HTML页面中引用它。运行后，你将看到类似这样的输出：Jani, Norway，Hege, Sweden，Kai, Denmark。这样我们就成功地创建并应用了一个AngularJS控制器来管理数据并显示在用户界面上。以上就是对AngularJS控制器的基本介绍和实例演示，后续我们将继续补充更多内容。