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 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
iview的table组件自带的过滤器实现
Jul 12 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使用DOM对XML解析处理操作示例
2019/07/04 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
中止javascript执行的方法
2014/02/14 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
js实现轮播图特效
2020/05/28 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python基于select实现的socket服务器
2016/04/13 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python中的self用法详解
2019/08/06 Python
Django values()和value_list()的使用
2020/03/31 Python
基于Python实现简单学生管理系统
2020/07/24 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
精彩的广告词
2014/03/19 职场文书
2015员工年度考核评语
2015/03/25 职场文书
亮剑观后感300字
2015/06/05 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python