javascript - 如何在单独的文件中拆分 AngularJS 代码？

Question

一切正常，但是当我尝试将我的脚本分离到外部 js 文件时，AngularJS 没有运行。

这是我的脚本:

<script>
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope) {
    $scope.isDisabled = true;
    $scope.UnitReport = function(){
        alert("aa");
    }
})
//this is just a part of script
;
</script>

我是这样分开的:

.controller('AppCtrl', function ($scope) {
    $scope.UnitReport = function(){
        alert("aa");
    }
})

但没用。

此外，我像这样分开:

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope) {
    $scope.UnitReport = function(){
        alert("aa");
    }
})

但没有再次工作。

如何分离这个 AngularJS？

P.S.:外部文件链接和函数没有错误。

Answer 1

这一行创建模块MyApp，因为[...]部分:

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

因为你想为这个模块创建一个 Controller ，你需要引用它。在您的应用中，您可以在模块声明之后直接执行此操作:

angular.module('MyApp', [...]).controller(...);

因此，您在一行中创建了模块和 Controller 。

---

现在你需要的是分离它，所以，首先创建你的模块:

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

在另一个文件中，使用以下语法在此模块上创建一个 Controller :

angular.module('MyApp').controller(...); /* There are no [] anymore -> not a mod creation */