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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Javascript变量作用域详解
Dec 06 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
javascript读取RSS数据
2007/01/20 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
重构Python代码的六个实例
2020/11/25 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
应届生新闻编辑求职信
2013/11/19 职场文书
先进党支部事迹材料
2014/01/13 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书