如何在AngularJS中的单独文件中使用控制器

我环顾四周,找不到符合我目前情况的答案.我有一个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页面:

我读过,我想要调用,例如,我的主模块App和我所有的其他模块文件应该以:angular.module('App').controller(...

但是,这意味着如果我将应用程序的名称从"app"更改为"my_app",我将不得不通过所有控制器并将"app"更改为"my-app".

我想避免这种情况,只能在index.html中导入我的文件,只需在我的'app'模块的依赖项中声明它.

当您构建一个角度应用程序时,您应该尽可能地分开以提供代码可读性.您应该为Web应用程序的每个页面/部分创建一个模块.

下面是这种结构的一个例子,我写了这个并将其用作角度应用程序的基础.

此文件夹包含所有组件和路由.

routes.js

此文件具有项目的状态,并且是其自己的模块

app.js

此文件只是您可以将所有其他模块作为依赖项调用的基础.

var app = angular.module("myApp",   [
                                    'ui.bootstrap',
                                    'ngAnimate',
                                    'myAppRouter',
                                    'myAppHomeCtrl',
                                    'myAppHomeService',
                                    'myAppNavbarDirective',
                                    'myAppNavbarService',
                                    'myAppLoginCtrl',
                                    'myAppLoginService'
                                ]);

您可以在此处查看所有编写和添加的不同模块.看看这个名为myApp的方式？我们在html中称之为那部分

这将包含"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";
    },
  };
});

所以回到我们的索引中,我们可以在这样的

在制作中你将缩小所有这些,但你可以在开发时将它们称为alll.