如何在 AngularJS 中将控制器放在单独的文件中

2023-12-12

我环顾四周，没有找到适合我目前情况的答案。我有一个 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>

我读到我应该调用，例如，我的主模块 App 和所有其他模块文件应该以： angular.module('App').controller(...

但是，这意味着如果我将应用程序的名称从“app”更改为“my_app”，我将必须遍历所有控制器并将“app”更改为“my-app”。

我想避免这种情况，只需能够在 index.html 中导入我的文件，并且只需在我的“app”模块的依赖项中声明它。

角结构

当你构建一个有角度的应用程序时，你应该尽可能地分开以使你的代码具有可读性。您应该为网络应用程序的每个页面/部分创建一个模块。

Example

Here是这种类型结构的一个示例，我编写了它并将其用作角度应用程序的基础。

应用程序文件夹

该文件夹包含所有组件和路线。

路线.js

该文件包含您的项目的状态并且是它自己的模块

app.js

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

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";
    },
  };
});

返回index.html

所以回到我们的索引中，我们可以添加所有这些模块<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>

在生产中，您将缩小所有这些，但您可以在开发中像这样调用它们。

结论

最后，我将做一个总结，以确保您拥有让模块正常工作所需的一切

转到您的 app.js （主角度模块）并将名称应用到它。
转到您的组件并创建新模块
转到index.html并添加链接到新模块的脚本标签
现在您可以根据需要使用控制器和所有组件

我希望这篇关于角度结构的指南对您有所帮助。祝你好运

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS