AngularJS基础学习笔记之控制器


Posted in Javascript onMay 10, 2015

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变量和函数的所有者)。

控制器包含两个属性(或者叫变量):firstName和lastName。它们被附加到$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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
AngularJS基础学习笔记之指令
May 10 #Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
You might like
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
jQuery的一些注意
2006/12/06 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
js切换div css注意的细节
2012/12/10 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
python中的字典详细介绍
2014/09/18 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
使用python+whoosh实现全文检索
2019/12/09 Python
如何给Python代码进行加密
2020/01/10 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
行政管理人员精品工作推荐信
2013/11/04 职场文书
体育活动总结范文
2014/05/04 职场文书
淘宝店策划方案
2014/06/07 职场文书
个性车贴标语
2014/06/24 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL