Angularjs中的Controller

最新推荐文章于 2019-05-28 20:17:15 发布

转载最新推荐文章于 2019-05-28 20:17:15 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tianranhui/p/9333218.html

文章标签：

#javascript #ViewUI

本文介绍了AngularJS中控制器的概念及其使用方法。通过一个简单的例子展示了如何创建模块和控制器，并将数据绑定到视图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angularjs中的Controller

概念：一个应用（APP，本身也是一个大模块）是由若干个模块（module）组成的，每个模块实现一个功能。利于代码的复用。

书写格式：

<!DOCTYPE html>
<html ng-app="test"> <!---依赖--->
  <head>
    <meta charset="utf-8">
    <title></title>
        <!-- 1.引入angular包 -->
    <script src="angular.js" charset="utf-8"></script>
    <script>
     //2.AngularJS对外暴露了一个全局对象angular，调用他的方法创建模块
   //参数1：模块名称；参数2：此模块依赖的其他模块
    let mod=angular.module('test', []);
        
        // 3.用模块对象的方法去创建控制器
    mod.controller('main', function ($scope){        
        
      // 4.$scope为模型对象，将数据绑定到他身上
      $scope.a=0;
      $scope.b=0;

      $scope.int=function (str){
        return parseInt(str);
      };
    });
    </script>
  </head>
    <!-- 5.将控制器绑定到视图上，这个body下就可以使用该控制器的数据 -->
  <body ng-controller="main">
    <input type="text" ng-model="a">
    <input type="text" ng-model="b">
    {{int(a)+int(b)}}
  </body>
</html>