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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
使用prototype.js进行异步操作
Feb 07 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
如何用JavaScipt测网速
May 09 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python+opencv实现阈值分割
2018/12/26 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python如何对XML 解析
2020/06/28 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
领导干部考察材料
2014/02/08 职场文书
小学语文国培感言
2014/03/04 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
设备技术员岗位职责
2015/04/11 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
golang 在windows中设置环境变量的操作
2021/04/29 Golang
Github 使用python对copilot做些简单使用测试
2022/04/14 Python