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 高阶函数使用介绍
Jun 15 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
js实现倒计时关键代码
May 05 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
vue-cli的eslint相关用法
Sep 29 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
js+canvas实现画板功能
Sep 13 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php 学习资料零碎东西
2010/12/04 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue创建头部组件示例代码详解
2018/10/23 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python在文本开头插入一行的实例
2018/05/02 Python
python实现批量图片格式转换
2020/06/16 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
获奖的大学生创业计划书
2014/01/05 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2014年林业工作总结
2014/12/05 职场文书
初中重阳节活动总结
2015/05/05 职场文书
上学路上观后感
2015/06/16 职场文书