AngularJS入门实例2——控制器的使用_angular 调用控制器-优快云博客

本文链接：https://blog.youkuaiyun.com/lynch0571/article/details/49741771

本文通过一个简单的示例介绍了AngularJS的基本用法，包括如何定义AngularJS应用程序、控制器及作用域对象，并展示了如何使用ng-model双向绑定数据以及如何在视图中展示控制器计算的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码

<!doctype html>
<html>
    <head>
    	<meta charset="utf-8">	
        <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> 
    </head>
    <body>
		<div ng-app="myApp" ng-controller="myCtrl">
			单价: <input type="text" ng-model="price"><br>
			数量: <input type="text" ng-model="count"><br>
			<br>
			控制器属性计算的总价: ￥{{price*count}}<br>
			控制器方法计算的总价: ￥{{totalPrice()}}<br>
		</div>
		<script>
			angular.module("myApp", []).controller('myCtrl', function($scope) {
			    $scope.price = 0.8;
			    $scope.count = 50;
			    $scope.totalPrice=function(){
			    	return $scope.price*$scope.count;
			    }
			});
		</script>
    </body>
</html>

二、说明

1、AngularJS 应用程序由 ng-app 定义，本例应用程序在 <div> 内运行；

2、ng-controller="myCtrl" 是一个 AngularJS 指令，用于定义一个控制器；

3、myCtrl 函数是一个 JavaScript 函数；

4、AngularJS 使用$scope 对象来调用控制器。控制器的 $scope （相当于作用域、控制范围）是表达式执行的上下文，用来保存AngularJS Model(模型)的对象。在 AngularJS 中， $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联。有了 $scope 就在视图和控制器之间建立了一个通道，视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图；

5、控制器在作用域中创建了两个属性 (price和count)；

6、ng-model 指令绑定输入域到控制器的属性（price和count）；