简述AngularJS的控制器的使用  更新时间:2015年06月16日 12:10:08   投稿:goldensun   这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下  AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块,由控制器控制。 … 在这里,我们已经声明采用ng-controller指令的控制器studentController。作为下一步,我们将定义studentController如下     studentController 定义 $scope 作为JavaScript对象参数。     $scope 表示应用程序,使用studentController对象。     $scope.student 是studentController对象的属性。     firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。     fullName 是$scope.student对象的函数,它的任务是返回合并的名称。     在fullName函数中,我们现在要学生对象返回组合的名字。     作为一个说明,还可以定义控制器对象在单独的JS文件,并把有关文件中的HTML页面。 现在可以使用ng-model或使用表达式如下使用studentController学生的属性。 Enter first name: Enter last name: You are entering: {{student.fullName()}}     现在有 student.firstName 和 student.lastname 两个输入框。     现在有 student.fullName()方法添加到HTML。     现在,只要输入first name和lastname输入框中输入什么,可以看到两个名称自动更新。 例子 下面的例子将展示使用控制器。 testAngularJS.html 文件内容如下: Angular JS Controller AngularJS Sample Application Enter first name: Enter last name: You are entering: {{student.fullName()}} 输出 在Web浏览器打开textAngularJS.html,看到以下结果: 您可能感兴趣的文章: 详解AngularJS控制器的使用 AngularJS控制器之间的数据共享及通信详解 AngularJS基础学习笔记之控制器 AngularJS控制器之间的通信方式详解 AngularJS控制器详解及示例代码 Angular页面间切换及传值的4种方法 Angular.js中控制器之间的传值详解 AngularJS 控制器 相关文章 Angular下H5上传图片的方法(可多张上传) 本文给大家分享在使用angular上传图片的功能,在开发过程中遇到很多问题,最终都解决了,今天小编给大家介绍下Angular下H5上传图片的方法(可多张上传),非常不错,需要的朋友参考下 2017-01-01 AngularJS通过ng-route实现基本的路由功能实例详解 这篇文章主要介绍了AngularJS通过ng-route实现基本的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由功能的操作步骤与相关实现技巧,需要的朋友可以参考下 2016-12-12 AngularJS使用拦截器实现的loading功能完整实例 这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下 2017-05-05 Angular2入门教程之模块和组件详解 这篇文章主要给大家介绍了Angular2入门教程之模块和组件的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 使用AngularJS编写较为优美的JavaScript代码指南 这篇文章主要介绍了使用AngularJS编写较为优美的JavaScript代码指南,包括控制器和封装等进阶技巧上的编程建议,倾力推荐!需要的朋友可以参考下 2015-06-06 Ionic + Angular.js实现图片轮播的方法示例 图片轮播在我们日常开发中是再熟悉不过的了,下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。 2017-05-05 angularjs中ng-bind-html的用法总结 这篇文章主要介绍了angularjs中ng-bind-html的用法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular2开发环境搭建教程之VS Code 不久前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器,尝试了Emacs、Sublime text,最后选择了vscode。下面这篇文章主要给大家介绍了关于Angular2开发环境搭建教程之VS Code的相关资料,需要的朋友可以参考下。 2017-12-12 在Angular中使用JWT认证方法示例 这篇文章主要介绍了在Angular中使用JWT认证方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 将Angular单项目升级为多项目的全过程 有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下 2021-11-11 最新评论

 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控制器的使用
  • AngularJS控制器之间的数据共享及通信详解
  • AngularJS基础学习笔记之控制器
  • AngularJS控制器之间的通信方式详解
  • AngularJS控制器详解及示例代码
  • Angular页面间切换及传值的4种方法
  • Angular.js中控制器之间的传值详解
张贴在3