AngularJS中的控制器

最新推荐文章于 2021-10-17 23:17:04 发布

greensomnuss

最新推荐文章于 2021-10-17 23:17:04 发布

阅读量452

点赞数

本文链接：https://blog.csdn.net/greensomnuss/article/details/70911447

版权

有如下例子：

其中这里面：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

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

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

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

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

现在有一个名为 personController.js 的js文件

personController.js：

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

$scope.names = [

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

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

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

];

});

有一个HTML引用了personController.js：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="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>

</body>
</html>

其中在这里面的ul中的ng-repeat是循环js文件中控制器的names数组。最后得到的页面显示为

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制
器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。
AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操
作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的
桥梁。
AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示
对象的属性。
例如，我们在MyController上创建一个person对象，这个对象只有name这一个属性：
app.controller('MyController', function($scope) {
$scope.person = {
name: 'Ari Lerner'
};
});
在拥有ng-controller='MyController'这个属性的元素内部的任何子元素中，都可以访问
person对象，因为它是定义在$scope上的。
例如，可以方便地在视图中引用person或person.name，效果如图5-1所示。
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>{{ person }}</h1>
and their name:
<h2>{{ person.name }}</h2>
</div>
</div>

greensomnuss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中的控制器

有如下例子：其中这里面：AngularJS 应用程序由 ng-app 定义。应用程序在内运行。ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。myCtrl 函数是一个 JavaScript 函数。AngularJS 使用$scope 对象来调用控制器。在 AngularJS 中，
复制链接

扫一扫