首页 > 代码库 > AngularJS控制器

AngularJS控制器

2024-07-25 18:50:11   220人阅读

注意：文章代码参照书籍：AngularJS权威教程

控制器在AngularJs中的作用是增强视图，控制器其实就是一个函数.

每当我们创建一个控制器的时候，AngularJs都会创建一个新的作用域$scope

并传递给这个控制器，可以再控制器中初始化$scope。

创建控制器：为了不污染全局空间，我们在模块里面创建控制器

创建模块：var app=angular.module(‘app‘,[]);创建控制器：app.controller(‘firstController‘,function($scope){　　　　$scope.message=‘hello world‘;});注：firstController是控制器的名字

在控制器中进行DOM的操作和数据的操作不是一个号的现象，我们应该设计良好的应用会将复杂的逻辑放到指令和服务中。

通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式：

angular.module(‘myApp‘, []).controller(‘MyController‘, function($scope,UserSrv) {　　//内容可以被指令控制　　$scope.onLogin = function(user) {　　　　UserSrv.runLogin(user);　　};});

下面是一个控制器的简单例子：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title>控制器应用</title> 5 </head> 6 <body> 7     <div ng-app=‘app‘ ng-controller=‘myController‘> 8         <a class="btn" ng-click=‘add(1)‘ href=‘#‘>add</a> 9         <h1>{{count}}</h1>10     </div>11 12 13     <script src=‘./angular.min.js‘ ></script>14     <script type="text/javascript">15         var app=angular.module(‘app‘,[]);16         app.controller(‘myController‘,function($scope){17 18             $scope.    count=0;19 20             //add方法 ： 实现数字递增的功能21             $scope.add=function(num){22 23                 $scope.count+=num;24 25             }    26 27         });28     </script>29 </body>30 </html>

 

 

AngularJS控制器


联系
我们