简述AngularJS的控制器的使用

2024-12-02 21:46:35

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。

<div ng-app="" ng-controller="studentController">
...
</div>

在这里，我们已经声明采用ng-controller指令的控制器studentController。作为下一步，我们将定义studentController如下

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>

studentController 定义 $scope 作为JavaScript对象参数。
$scope 表示应用程序，使用studentController对象。
$scope.student 是studentController对象的属性。
firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
在fullName函数中，我们现在要学生对象返回组合的名字。
作为一个说明，还可以定义控制器对象在单独的JS文件，并把有关文件中的HTML页面。

现在可以使用ng-model或使用表达式如下使用studentController学生的属性。

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

现在有 student.firstName 和 student.lastname 两个输入框。
现在有 student.fullName()方法添加到HTML。
现在，只要输入first name和lastname输入框中输入什么，可以看到两个名称自动更新。

例子

下面的例子将展示使用控制器。
testAngularJS.html 文件内容如下：

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html，看到以下结果：

详解AngularJS控制器的使用

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可.下面的例子展示了控制器初始化: function my Controller($scope){ $scope.msg="hello,world!"; } 上面这个创建控
AngularJS控制器之间的数据共享及通信详解

AngularJS 本身已经提供了像指令 Directive 和服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a
AngularJS基础学习笔记之控制器

AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS applications通过控制器进行控制. ng-controller指令定义了一个application的控制器. 一个控制器就是一个JavaScript对象,它可以通过标准的JavaScript对象构造函数来创建. <div ng-app="myApp" ng-controller=
Angular页面间切换及传值的4种方法

本文实例为大家分享了Angular JS页面间切换及传值的方法,供大家参考,具体内容如下Angular JS页面间切换及传值 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. state('producers', { url: '/produ
AngularJS控制器详解及示例代码

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope参数指定应用程序/模块,由控制器控制. <div ng-app="" ng-controller="studentController"> ... </div> 在这里,我们已经声明采用ng-controller指令的控制器studentCont
AngularJS控制器之间的通信方式详解

本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San
Angular.js中控制器之间的传值详解

前言每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set
简述AngularJS的控制器的使用

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope参数指定应用程序/模块,由控制器控制. <div ng-app="" ng-controller="studentController"> ... </div> 在这里,我们已经声明采用ng-controller指令的控制器studentCont
AngularJS中控制器函数的定义与使用方法示例

本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex
Angularjs实现控制器之间通信方式实例总结

本文实例讲述了Angularjs实现控制器之间通信方式.分享给大家供大家参考,具体如下: 利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的.控制器之间的通信,显得尤为重要.常见的方式有如下两种:一.angular服务的方式:二.基于事件广播的方式:另外,还有基于作用域继承的方式.下面先说一下前两种方式: 一.基于angular服务的方式: 在angular中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享.
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo
简述AngularJS相关的一些编程思想

在过去的几个月里,我一直遨游于Angular的世界.如今回想起来,很难想象在没有类似于Angular.js, Backbone.js以及其伙伴Underscore.js这些数据绑定框架下我每天如何去编写一个大型前端应用.我不敢相信我已经用它们完成了那件工作. 可能我有点小偏见,但考虑到我一直在做的应用是在浏览器中实现Photoshop类型的编辑器,它呈现相同的数据有几种完全不一样的方式. 图层以图形化的形式呈现,占据了屏幕的大部份.它们列于一个面板内,你可以删除它们. 当你选中一个图层时,它的边
详谈AngularJs 控制器、数据绑定、作用域

上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1.x升级到2.x难度很大,甚至可以说重构,就向我们公司现在还在用1.x版本,所以我还是决定把这系列写完,也给自己一个整理的过程.本人现在也正在学习Angular4.0版本的学习,但是4.0用typescript及nodejs集成比较大,还有学习angular-cli脚手架的学习,所以等我学会以后准备在
AngularJS控制器继承自另一控制器

AngularJS里控制器继承,常用的就是作用域嵌套作用域.默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope. 但有些情况下,rootScope下就是我们的controller,不可能将大量的公用属性方法写到rootScope里去. 比如说有多个类似的页面,都有面包屑,搜索栏,工具栏,表格等元素,面包屑表格这种元素考虑做成directive,那么必然会有许多类似的配置需要从controller传到组件里去,也会产生很多工具类方法用于处
AngularJS+Bootstrap3多级导航菜单的实现代码

将介绍如何用AngularJS构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,AngularJS能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 本文将介绍如何实现多限级导航菜单. 目录 1.静态多级菜单实现 2.动态多级菜单实现 1. 静态多级
ANGULARJS中用NG-BIND指令实现单向绑定的例子

本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用. 不同于jquery只是一个加强和简化前端开发的类库,angularjs是一个完整web前端框架,所以学习曲线高了很多. angularjs给我的感觉类似于Java的Spring框架,处于中心容器位置粘合其他组件,其内置的很多组件已经可以满足一般场景,特殊场景我们可以按照框架思路扩展. 下面从最基础的内容走起: 复制代码代码如下: <!DOCTYPE html> <html ng-app>
AngularJS入门教程之Scope(作用域)

AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例控制器中的属性对应了视图上的属性: <!DOCTYPE html> <html> <head> <me

简述AngularJS的控制器的使用

相关推荐

随机推荐