在多个文件中拆分角度代码答案

【问题标题】：Split angular code in multiple files在多个文件中拆分角度代码
【发布时间】：2016-03-27 09:16:47
【问题描述】：

我正在尝试拆分我的 Angular 代码，但遇到了一些问题。

一开始我有一个关于我的控制器的“未定义函数”，现在我有“错误：[$injector:nomod] http://errors.angularjs.org/1.4.8/$injector/nomod?p0=myApp.controllers.accueil”和“错误： [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0 %3DmyApp.controllers.accueil%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%...”错误。我发现其他一些看起来相似的问题，但我找不到我的错误...

这是我的 index.html ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="M2-SCMN">
    <link rel="icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="web/css/bootstrap.min.css">
    <script type="text/javascript" src="web/js/angular.min.js"></script>
    <script type="text/javascript" src="web/js/angular-route.min.js"></script>
    <script type="text/javascript" src="myApp.js"></script>
    <script type="text/javascript" src="controllers/accueil.js"></script>
    <script type="text/javascript" src="controllers/utilisateur.js"></script>
        <title>AngularProj</title>
    </head>
    <body ng-app="myApp" >
    <div ng-view></div>
    </body> 
</html>

我的 app.js（我想要 1 个文件/模块（用户、主页...））：

angular.module('myApp', [
    'ngRoute', 
    'myApp.controllers.accueil',
    'myApp.controllers.utilisateur'
])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {templateUrl: 'views/accueil.html', controller: 'AccueilCtrl'});
  $routeProvider.when('/connexion', {templateUrl: 'views/connexion.html', controller: 'ConnexionCtrl'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

accueil 控制器看起来像：

angular.module('myApp.controllers.accueil')
    .controller('AccueilCtrl', function ($scope) {
        $scope.texte = 'Hello, Angular fanatic.';
    });

【问题讨论】：

标签： javascript angularjs dependency-injection

【解决方案1】：

您收到该错误是因为您实际上并未在 accueil 控制器文件中创建 myApp.controllers.accueil 模块，您只是在尝试检索该模块。

您首先需要创建 myApp.controllers.accueil 模块。我认为您的困惑来自于您如何创建模块和如何检索模块之间的差异。

取自AngularJS docs（参见创建与检索）：

请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。采用 angular.module('myModule') 检索现有模块。

所以你实际上是在尝试检索一个不存在的模块。

你的控制器代码应该是这样的：

angular.module('myApp.controllers.accueil', [])
.controller('AccueilCtrl', function ($scope) {
    $scope.texte = 'Hello, Angular fanatic.';
});

【讨论】：