开发者社区> 浣熊干面包> 正文

AngularJS快速入门指南05:控制器

简介:
+关注继续查看

AngularJS控制器用来控制AngularJS applications的数据

  AngularJS控制器就是普通的JavaScript对象


AngularJS控制器

  AngularJS applications通过控制器进行控制。

  ng-controller指令定义了一个application的控制器。

  一个控制器就是一个JavaScript对象,它可以通过标准的JavaScript对象构造函数来创建。

复制代码
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
复制代码

运行

代码解释:

  AngularJS application通过ng-app="myApp"来定义。该application的有效作用域处于ng-app所在的<div>中。

  ng-controller="myCtrl"属性即一个AngularJS指令,它定义了一个控制器。

  myCtrl函数是一个普通的JavaScript函数。

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

  在AngularJS中,$scope是一个application对象(即application变量和函数的所有者)。

  控制器包含两个属性(或者叫变量):firstNamelastName。它们被附加到$scope对象上。

  ng-model指令将input标签的值绑定到控制器的属性上(firstName和lastName)。


控制器的方法

  上面的例子展示了控制器对象包含两个属性:lastName和firstName。

  控制器也可以包含方法(将函数赋值给变量):

复制代码
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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>
复制代码

运行


将控制器放在外部文件中

  在大型应用中,常常会将控制器代码写在外部文件中。

  将<script>标签中的代码拷贝到personController.js外部文件中:

复制代码
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>
复制代码

运行


另一个例子

  创建一个新的控制器文件并命名为namesController.js:

复制代码
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
复制代码

  然后再application中使用这个控制器文件:

复制代码
<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>
复制代码

运行


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/p/4487781.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Element-UI快速入门
Element-UI快速入门Element-UI快速入门
7 0
实时计算大数据处理的基石-Google Dataflow
简要回顾一下,上一篇我们介绍了Streaming,批量与流式计算,正确性与推理时间的工具,数据处理模式,事件事件与处理时间,窗口化。 在这篇文章中,我想进一步关注上次的数据处理模式,但更详细。 这里会用到一些Google Cloud Dataflow[1]的代码片段,这是谷歌的一个框架,类似于Spark Streaming或Storm。
6 0
理解工厂模式的三种形式
主要内容有: 该模式的介绍,包括: 引子、意图(大白话解释) 类图、时序图(理论规范) 该模式的代码示例:熟悉该模式的代码长什么样子 该模式的优缺点:模式不是万金油,不可以滥用模式 该模式的实际使用案例:了解它在哪些重要的源码中被使用
3 0
nuxt安装与IP端口配置nuxt安装与IP端口配置
一、Nuxt安装与运行 二、IP端口冲突与解决 三、使用终端查看某个端口号对应的进程和杀死进程 四、端口/IP端口配置
13 0
综合项目: 前端:Keepalived 双机热备,节点:LAMP+Discuz 论坛,后端:MHA
综合项目: 前端:Keepalived 双机热备,节点:LAMP+Discuz 论坛,后端:MHA
11 0
【微信小程序开发小白零基础入门】微信小程序数据API【建议收藏】
文章目录 【微信小程序开发小白零基础入门】微信小程序数据API【建议收藏】一、 本地缓存二、 数据存储1. 异步数据存储2. 同步数据存储三、 数据获取1. 异步数据获取2. 同步数据获取四、 存储信息获取1. 异步数据获取2. 同步数据获取五、 数据删除1. 异步数据删除2. 同步数据删除六、 数据清空1. 异步数据清空2. 同步数据清空七、 推荐小程序(欢迎各位大佬指导)一、 本地缓存为了提高使用便捷性,同一个小程序允许每个用户单独存储10MB以内的数据在本地设备中,这些数据称为小程序的本地缓存。开发者可以通过数据缓存API对本地缓存进行设置、获取和清个小程序允许每个用户单独存储10MB以
6 0
飞天计划体验有感
通过这几次的云计算实验,我觉得这个活动对我们大学生来说是非常有力的,而且通过阿里云的这个活动,我了解到了一些关于阿里云服务器的运用和很多知识。 通过使用云服务器做实验,我了解到了一些前端人员需要掌握的指示。而最让我感兴趣的是和云盘相关的内容,云盘的使用,可以使我们存储的空间更大、更安全,可以设密码,这就更提高了云盘的保密性,还是随时可卸载的,它的属性也可改。
7 0
941
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载