脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS的控制器

简述AngularJS的控制器的使用

 更新时间：2015年06月16日 12:10:08   投稿：goldensun  
这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下

 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，看到以下结果：

2015616120726250.png (679×365)

您可能感兴趣的文章:

相关文章

  • Angularjs中controller的三种写法分享

    Angularjs中controller的三种写法分享

    这篇文章给大家介绍了angularjs中controller的三种写法，每种写法都给出了示例代码，对大家理解和学习很有帮助，有需要的朋友们可以参考借鉴。
    2016-09-09
  • Angularjs单选改为多选的开发过程及问题解析

    Angularjs单选改为多选的开发过程及问题解析

    在项目中遇到这样的需求想把下拉框的单选改为多选，怎么实现呢？下面小编通过本文给大家分享angularjs单选改为多选的开发过程及问题解析，需要的朋友参考下
    2017-02-02
  • Angular应用懒加载模块配置管理详解

    Angular应用懒加载模块配置管理详解

    这篇文章主要为大家介绍了Angular应用懒加载模块配置管理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Angular实现的table表格排序功能完整示例

    Angular实现的table表格排序功能完整示例

    这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 详解Angular2中的编程对象Observable

    详解Angular2中的编程对象Observable

    大家都是在Reactive Extensions for Javascript诞生于几年前，随着angular2正式版的发布，它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象，有需要的朋友们可以参考借鉴。
    2016-09-09
  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    不知道大家是否遇到过这个问题，在当Angular.JS ng-repeat数组中有重复项时，系统就会抛出异常，这是该怎么做？本文通过示例代码介绍了详细的解决方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-10-10
  • 使用angular帮你实现拖拽的示例

    使用angular帮你实现拖拽的示例

    下面小编就为大家带来一篇使用angular帮你实现拖拽的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 深究AngularJS——ng-checked（回写：带真实案例代码）

    深究AngularJS——ng-checked（回写：带真实案例代码）

    本篇文章主要介绍了深究AngularJS——ng-checked（回写：带真实案例代码），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Angularjs中使用layDate日期控件示例

    Angularjs中使用layDate日期控件示例

    本篇文章主要介绍了Angularjs中使用layDate日期控件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • AngularJS实现的自定义过滤器简单示例

    AngularJS实现的自定义过滤器简单示例

    这篇文章主要介绍了AngularJS实现的自定义过滤器,结合实例形式分析了AngularJS自定义过滤器的简单定义与使用操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论