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();
});

各种换位置，焦头烂额，依旧报错如下：

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

 所以这个又变成一个待解决的坑...

 

posted @ 2017-04-06 15:14  kiera  阅读(743)  评论(0)  编辑  收藏  举报