angularJS的Controller注意事项

  1. 不要企图复用controller,一个控制器一般只负责一小块视图。(复用的一般用service)
  2. 不要在controller中操作DOM,这不是它的职责。(重复读写重新渲染布局,超级影响性能)
  3. 不要在controller里面做数据格式化,ng有很好用的表单控件
  4. 不要在controller里面做数据过滤操作,ng有$filter服务
  5. 一般来说,controller是不会互相调用的,控制器直接的交互会通过事件进行

照《AngularJS权威教程》写了个例子,结果报错。

报错如下:

一番折腾搜索后,才发现,原来现在不能直接用function写controller了。

现在,先来看看controller在官方文档中的写法(方式一)

angular.module('ctrlExp', [])
  .controller('SettingsController2', ['$scope','$http', function($scope, $http){
    // ...
}]);

而在一些教程中,我们经常可以看到这样的写法(方式二):

angular.module('ctrlExp', []) 
  .controller(
'SettingsController2', function($scope){
  // ...
});

这两种方法有什么区别?没啥区别其实,方式二只是简写而已。然而简写有简写的麻烦。

AngularJS会扫描function的参数,提取参数的名称作为function的依赖,但是这种注入方式有一个问题,当项目发布到正式环境时都会压缩代码,function的参数可能会变成a,b之类的东西,这会导致代码出现问题,第一种注入方式可以避免这个问题。
既然有问题,为什么还要这样写?
嗯,方式二有专门的压缩工具。坑太多,待验证。
 
还有一个问题,controller直接写到html页面,可以执行。但是外部引用就报错。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
     
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">        
        <p>{{clock.now}}</p>
    </div>
       <script src='node_modules/angular/angular.js'></script>
    <!-- <script src='js/test.js'></script> -->

    <script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function($scope){
            $scope.clock = {
                now: new Date()
            };
            var updateClock = function(){
                $scope.clock.now = new Date()
            };
            setInterval(function(){
                $scope.$apply(updateClock);
            }, 1000);
            updateClock();
        });
    </script>
</body>
</html>

引入的test.js文件代码如下:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
    $scope.clock = {
        now: new Date()
    };
    var updateClock = function(){
        $scope.clock.now = new Date()
    };
    setInterval(function(){
        $scope.$apply(updateClock);
    }, 1000);
    updateClock();
});

各种换位置,焦头烂额,依旧报错如下:

注册一个模块需要确保指定了第二个依赖参数。但我有第二个依赖参数呀。

 所以这个又变成一个待解决的坑...
原文地址:https://www.cnblogs.com/dodocie/p/6673593.html