今天完成的事情：今天学习了AngularJS 的控制器
明天计划的事情：继续学习AngularJS 控制器的后续的内容
遇到的问题：实际操作较少还是需要多加练习
收获：学习了AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。例如
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
运行结果
随意输入
应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
控制器也可以有方法（变量和函数）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function () {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
运行结果
更改
效果也一样
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
</body>
</html>
运行结果
看起来简洁一点
创建一个新的控制器文件:
<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Hege', country: 'Sweden' },
{ name: 'Kai', country: 'Denmark' }
];
});
</script>
然后，在应用中使用控制器文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
</body>
</html>
运行结果
model 中可以有多个 controller，；例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl1">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<br><br>
<div ng-controller="myCtrl2">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl1', function ($scope) {
$scope.firstName = "Johns";
$scope.lastName = "Doef";
});
app.controller('myCtrl2', function ($scope) {
$scope.firstName = "Tom";
$scope.lastName = "kkk";
});
</script>
</body>
</html>
运行结果
controller 中，如果局部 $scope 和 $rootScope 都存在，且有相同名字的变量，{{变量名}} 指局部变量而不是全局变量，作用域只有当前 controller；{{$root.变量名}} 是全局变量，在 ng-app="" 下任何一个 controller 中都能使用。如果没有 $scope, 只有 $rootScope，那么 {{变量名}} 和 {{$root.变量名}} 就没区别了。例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"> //输出结果
{{first}}<br> //ctrl局部first
{{$root.first}}<br> //全局first
{{second}}<br> //全局second
{{$root.second}}<br> //全局second
</div>
<br>
<br>
<div ng-controller="myCtrl2">
{{first}}<br> //全局first
{{$root.first}}<br> //全局first
{{second}}<br> //ctrl2局部second
{{$root.second}} //全局second
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $rootScope) {
$scope.first = 'ctrl局部first';
$rootScope.first = '全局first';
});
app.controller('myCtrl2', function ($scope, $rootScope) {
$scope.second = 'ctrl2局部second';
$rootScope.second = '全局second';
});
</script>
</body>
</html>
运行结果
或者
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<p ng-controller="ctr1">
{{firstName}}
<button ng-click="btn()">
点我
</button>
</p>
<p ng-controller="ctr2">
{{secondName}}
<button ng-click="btn()">
点我
</button>
</p>
<div ng-controller="ctr5">
<ul>
<li ng-repeat="x in names">
{{firstName}}==={{x}}==={{secondName}}
<button ng-click="btn()">
点我
</button>
</li>
</ul>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("ctr1",
function ($scope, $rootScope) {
$scope.firstName = "AAA";
$rootScope.secondName = "BBB";
$scope.btn = function () {
alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
}
});
app.controller("ctr2",
function ($scope, $rootScope) {
$scope.secondName = "CCC";
$rootScope.firstName = "DDD";
$scope.btn = function () {
alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
}
});
app.controller("ctr5",
function ($scope, $rootScope) {
$scope.names = ["111", "222", "333"];
$scope.btn = function () {
alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
}
});
</script>
</body>
</html>
运行结果
依次点击
更加明显一些
剩下的明天继续
返回列表
评论