angular.js - angular多個controller的問題

Question

看到這種寫法

//app.js
angular.module('app',['app.controllers']);

//FirstController.js
angular.module('app.controllers').controller('firstCtrl',function($scope){...})

//SecondController.js
angular.module('app.controllers').controller('SecondCtrl',function($scope){...})    

但是我這麼寫缺報 firstCtrl 和 SecondCtrl 不是一個方法，剛開始學習angular，求幫助

Answer 1

建議這麼寫

angular
    //app.js
    .module('app',[])//这个'[]'用来创建依赖

    //FirstController.js
angular
    .module('app')//这个后面没有'[]'，表面继续用之前创建的[]依赖
    .controller('firstCtrl',['$scope',function($scope){//这里用[]来规范写法，防止压缩文件后看不懂形参
        ...
    }])

    //SecondController.js
angular
    .module('app')//同上
    .controller('SecondCtrl',['$scope',function($scope){
        ...
    }])

Answer 2

angular.module('app.controllers').controller('firstCtrl',function($scope){...})

這條語句的前提是你有一個view的ng-app是app.controllers。
module函數的第一個參數就是ng-app的值。
controller函數就是定義該module下的一個控制器。

Answer 3

angular.module('app.controllers',[])。
注意此處，一個模組首次定義的時候需要填入依賴，若沒有需要填空數組。後面其他地方如果引用同一個模組，不用填入依賴。

你這裡兩個controller定義時，依賴都沒填寫，需改為如下。

angular.module('app.controllers',[]).controller('firstCtrl',function($scope){...})
angular.module('app.controllers').controller('SecondCtrl' ,function($scope){...})

注意：不同的依賴會產生不同的實例，因此要注意，定義完後，下次引用時一定不能再填入依賴了，否則前一個的相關定義都會失效，這是個很難排查的bug。

關於angular風格的問題，建議參考大神https://github.com/johnpapa/angular-styleguide