如何在单独的文件中拆分AngularJS代码?

时间:2017-06-21 12:34:05

标签: javascript angularjs angular-controller angularjs-1.6

一切正常,但当我尝试将我的脚本分离到外部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。:外部文件链接和功能没有任何错误。

2 个答案:

答案 0 :(得分:2)

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

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

如果您想为此模块创建控制器,则需要引用。在您的应用程序中,您可以在模块声明后直接执行:

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

所以你在一行中创建模块和控制器

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

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

在另一个文件中,使用以下synthax在此模块上创建一个控制器:

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

答案 1 :(得分:0)

是的,可以在不同的js上分隔文件。

使用以下代码实例化模块

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

为了获取现有模块并向其添加新控制器,您应该只使用一个参数,即模块的名称。

angular.module('myApp').controller(/*.. Controller code ..*/)