先看个示例
<div ng-app="myApp" ng-controller="myCtrl">
<!-- 在该控制器内保存着如下两个Model里的数据
ng-model 指令用于双向绑定输入域到控制器的属性 -->
第一个数字: <input type="text" ng-model="first"><br>
第二个数字: <input type="text" ng-model="second"><br>
<br>
相乘结果: {{first* second}}
</div>
<script>
//AngularJS 应用程序:在 <div> 内由 ng-app 定义运行。
var app = angular.module('myApp', []);
//控制器
app.controller('myCtrl', function($scope) {//$scope 是一个应用对象,用于调用控制器,并保存Model(模型)的对象
//给控制器里的model赋值
$scope.first= 10;
$scope.second= 20;
});
</script>
控制器定义
在<div>
内由ng-controller 指令定义,操作应用程序的 JavaScript 对象。
其中应用程序是指由ng-app指令定义的对象。
控制器方法
控制器也可以有方法(变量和函数):
<div ng-app="myApp" ng-controller="myCtrl">
运行方法: {{methodName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.methodName= function() {
return "输出到页面";
}
});
</script>
外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。
此时只需要把 <script>
标签中的代码复制到名为 myController.js 的外部文件中,然后引入即可:
<div ng-app="myApp" ng-controller="myCtrl">
运行方法: {{methodName()}}
</div>
<script src="myController.js"></script>
版权声明:博主地址:http://blog.csdn.net/zcl_love_wx https://blog.csdn.net/zcl_love_wx/article/details/55195010