Skip to main content
 首页 » 编程设计

AngularJS 控制器

2022年07月19日28hnrainll

1.  AngularJS 控制器:

  • AngularJS 控制器控制AngularJS 应用程序的数据。
  • ng-controller指令定义了应用程序控制器。
  • AngularJS 控制器是常规的JavaScript对象,由标准的JavaScript对象的构造函数创建。
    <!DOCTYPE html> 
    <html> 
        <head> 
            <meta charset="UTF-8"> 
            <title></title> 
            <script type="text/javascript" src="js/angular.min.js"></script> 
        </head> 
        <body> 
            <div ng-app="myApp"><!--AngularJS应用程序由ng-app定义,在这个div内运行--> 
                <div ng-controller="myCtrl"><!--ng-controller="myCtrl"属性是一个指令,用于定义一个控制器--> 
                    <input ng-model="carname" /><!--ng-model指令绑定输入域到控制器的属性--> 
                    车名:{{carname}} 
                </div> 
                <p>{{name}}</p> 
            </div> 
         
            <script> 
                var app = angular.module("myApp", []); 
                app.controller('myCtrl', function($scope, $rootScope){/*myCtrl是一个JavaScript函数*/ 
                    $scope.carname = 'Volvo';/*$scope是一个局部的作用域,只作用域定义的控制器内*/ 
                    $rootScope.name = 'wgl'/*$rootScope是一个根作用域,作用于ng-app定义的html元素内*/ 
                }) 
            </script> 
        </body> 
    </html>

2.  控制器方法:可以在这个控制器中定义一个方法,然后在控制器定义的局部作用域中使用这个方法

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js"></script> 
    </head> 
    <body> 
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行--> 
            姓名:{{xingMing()}} 
        </div> 
     
        <script> 
            var app = angular.module("myApp", []); 
            app.controller('myCtrl', function($scope){/*myCtrl是一个JavaScript函数*/ 
                $scope.xing = ''; 
                $scope.ming = '甘林'; 
                $scope.xingMing = function(){ 
                    return $scope.xing+$scope.ming; 
                }; 
            }) 
        </script> 
    </body> 
</html>

3.  外部文件中的控制器:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular.min.js"></script> 
    </head> 
    <body> 
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行--> 
            姓名:{{xingMing()}} 
        </div> 
     
        <script type="text/javascript" src="js/xingMing.js"></script> 
    </body> 
</html>
var app = angular.module("myApp", []); 
app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/ 
    $scope.xing = '王'; 
    $scope.ming = '甘林'; 
    $scope.xingMing = function() { 
        return $scope.xing + $scope.ming; 
    }; 
});

4.  总结:从mvc的思想上可以看出,在实际开发中我们主要用到的是外部文件中的控制器这种方法,这样可以是代码分离,使得后期的维护更加方便。


本文参考链接:https://www.cnblogs.com/wgl1995/p/6264009.html