AngularJS Controller 使用

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lvyi/blog/535611

文章标签：

#javascript #ViewUI

本文详细介绍了AngularJS用于构建单一页面应用程序（SPAs），包括数据绑定、控制器的作用及使用方法，并通过实例展示了如何在HTML中实现。

为什么80%的码农都做不了架构师？>>>

AngularJS 可用来构建单一页面应用程序（SPAs：Single Page Applications），现在在微信里的页面基本是 SPAs。

数据绑定

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>

<div ng-app="" >

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

</body>
</html>

代码中 ng-model 指令把元素值（比如输入域的值）绑定到变量 firstname 上，相当于定义一个变量。

使用 {{}} 将 firstname 解引用得出值。

解引用也可以写成

name: <span ng-bind="firstname + lastname" ></span>

如果把 ng-app="" 改为 ng-app="myApp",会出现

Controller

<div ng-app="myApp" ng-controller="myCtrl">

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.firstname = "Johh";
	$scope.lastname = "Doe"
});
</script>

在 ng-app 中指定应用程序名字后需要定义 controller 来控制行为。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。