我环顾四周，没有找到符合我目前情况的答案。我有一个app.js文件：
'use strict';
var demoApp = angular.module('demoApp', [
// Dépendances du "module" <-- demoApp
'ngRoute',
'routeAppControllers',
'todoList'
]);
demoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
// Système de routage
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/contact/:msg?', {
templateUrl: 'views/contact.html',
controller: 'contactCtrl'
})
.when('/todolist', {
templateUrl: 'views/todolist.html',
controller: 'listeCtrl'
})
.when('/testfiltre', {
templateUrl: 'views/testfiltre.html',
controller: 'demoFiltreCtrl'
})
.when('/testCreationfiltre', {
templateUrl: 'views/testcreationfiltre.html',
controller: 'demoCreationFiltreCtrl'
})
.otherwise({
redirectTo: '/home'
});
}
]);
var routeAppControllers = angular.module('routeAppControllers', []);
routeAppControllers.controller('homeCtrl', ['$scope',
function($scope){
$scope.message = "Bienvenue sur la page d'accueil";
}
]);
routeAppControllers.controller('contactCtrl', ['$scope','$routeParams',
function($scope, $routeParams){
$scope.message = "Laissez-nous un message sur la page de contact !";
$scope.msg = $routeParams.msg || "Bonne chance pour cette nouvelle appli !";
}
]);
routeAppControllers.controller('listeCtrl', [function(){}]);
我在todolist_controller.js中有todolist模块：
var todoList=angular.module('todoList',[]);
todoList.controller('todoCtrl', ['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}
]);
我有我的index.html页面：
<!DOCTYPE html>
<html lang="fr" ng-app="demoApp">
<head>
<meta charset="utf-8" />
<title>Demo App</title>
<link rel="stylesheet" href="styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.2/angular-locale_fr-ca.min.js"></script>
<script src="scripts/controllers/app.js"></script>
<script src="scripts/controllers/todolist_controllers.js"></script>
</head>
<body>
<div ng-view>
</div>
<nav>
<a href="#/home" class="btn btn-primary">Page d'accueil</a>
<a href="#/contact" class="btn btn-success">Page de contact</a>
<a href="#/todolist" class="btn btn-primary">Todo list</a>
<a href="#/testfiltre" class="btn btn-success">test filtre</a>
<a href="#/testCreationfiltre" class="btn btn-primary">test création filtre</a>
</nav>
</body>
</html>
我读过，我想要调用，例如，我的主模块应用程序和我的所有其他模块文件应该以：angular.module（＆＃39; App＆＃39;）。控制器（..
但是，这意味着如果我从“应用程序”中更改我的应用程序的名称到了'my_app＆＃39;例如，我必须通过我的所有控制器并更改“应用程序”。为了我的应用程序＆＃39;。
我想避免这种情况，只能在index.html中导入我的文件，只需在我的应用程序的依赖项中声明它即可。模块。
答案 0 :(得分：8)
当您构建一个角度应用程序时，您应该尽可能地分开以提供代码可读性。您应该为Web应用程序的每个页面/部分创建一个模块。
Here就是这种结构的一个例子，我写了这个并将它作为角度应用程序的基础。
此文件夹包含所有组件和路由。
此文件具有项目的状态，并且是自己的模块
此文件只是您可以将所有其他模块作为依赖项调用的基础。
var app = angular.module("myApp", [
'ui.bootstrap',
'ngAnimate',
'myAppRouter',
'myAppHomeCtrl',
'myAppHomeService',
'myAppNavbarDirective',
'myAppNavbarService',
'myAppLoginCtrl',
'myAppLoginService'
]);
您可以在此处查看并添加的所有不同模块。看看这个名为myApp的方式？我们在html中称之为
<html ng-app="myApp">
这将包含诸如“home”和“contact”之类的内容，这些文件夹应该包含一些自包含的html，控制器和服务所需的一切。
这是真正回答你问题的一点，为控制器添加一个新模块，如下所示。
angular.module('myAppHomeCtrl', []).controller('homeCtrl', ['$scope', 'homeContent', function($scope, homeContent){
$scope.dataset = homeContent.getContent();
$scope.header = homeContent.getHeader();
$scope.subheading = homeContent.getSubheader();
}]);
所以你可以看到在我们称之为工厂的模块中，这也在这个文件夹中，看起来像这样。
angular.module('myAppHomeService', [])
.factory('homeContent', function(){
return {
getHeader: function(){
return "Welcome Human";
},
getSubheader: function(){
return "To Joe's Awesome Website";
},
};
});
回到我们的索引中，我们可以在<script>标签中添加所有这些模块。
<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>
<script type="text/javascript" src="app/components/home/homeService.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarDirective.js"></script>
<script type="text/javascript" src="app/shared/navigation-bar/navbarService.js"></script>
<script type="text/javascript" src="app/components/login/loginCtrl.js"></script>
<script type="text/javascript" src="app/components/login/loginService.js"></script>
在制作中你会缩小所有这些，但你可以在开发时把它们称为alll。
总结一下，我将做一个总结，以确保您拥有使模块运行所需的一切
我希望这个角度结构的指导可以帮助你。祝你好运
答案 1 :(得分：3)
而不是将应用定义为var app = angular.module('myApp', []);使用angular.module('myApp', []); var不是必需的。然后在像somethingCtrl.js这样的单独文件中，您可以定义控制器，如：
angular.module('myApp')
.controller('somethingCtrl', ['$scope', function ($scope) {
}]);`
然后你可以在html上按顺序添加脚本标签。首先从模块定义开始。对角度
使用these样式指南选项2
定义你的第一个模块。然后定义各种其他模块并将它们用作依赖项，如此
index.js：
angular.module('mainApp', ['otherApp']);
other.js
angular.module('otherApp', []);
这使您可以灵活地将所有控制器添加到一个模块，将所有指令添加到另一个模块。您可以使用模块作为依赖项来混合使用的功能。只需确保首先在脚本标记顺序中加载mainApp。
答案 2 :(得分：1)
这是requirejs或browserify极大地帮助您的地方。但是，由于你的问题与他们中的任何一个都没有关系，你可以使用好的＆ol; JS要完成类似的事情。
以您的app.js文件为例。构建一个全局配置对象，然后在引用应用程序名称时使用它，无论您身在何处。然后，只需将配置对象中的应用名称更改为其他内容而不会破坏任何其他组件。
var config = {
app : "myApp"
}
angular.module(config.app, ["ngAnimate"]);
现在controller.js中的控制器可以使用相同的配置对象。
angular.module(config.app)
.controller("myController", function($scope) { ... }
只要您先加载app.js，您就可以使用配置对象。
<script src="/js/app.js"></script>
<script src="/js/controller.js"></script>
这不是很好我建议您在将来使用browserify或requirejs（或任何其他替代方案）来构建您的前端，如果您想要这种功能而不需要可怕的全局对象/变量。
答案 3 :(得分：-2)
说这是你的目录布局：
├── controllers
│ └── home.js
├── directives
└── index.html
您可以像往常一样在home.js中定义控制器，然后将其包含在index.html中：
...
<script src="./controllers/home.js"></script>
...
P.S。：使用script标签应该是首选方法，但是如果你想使用Require.js，那就有一个很棒的库angularAMD