如何在angular.js中分别编写控制器、服务、路由和模块

How to write seperatly the controller, services, routes and module in angular.js?

本文关键字：控制器 服务 路由 模块 angular js      更新时间：2023-09-26

我刚刚尝试使用lumx angular material，它的app.js将所有控制器、服务和模块都放在一个地方。

我试图将它们分开，但在lumx中不起作用，因为在index.html文件中的lumx中，它们包含了app.js文件，但如果我必须编写许多控制器，我必须如何遵循它？

这是lumx 中app.js的github链接

https://github.com/lumapps/lumX/blob/master/demo/app.js

我已经制作了单独的文件作为

module.js

var app = angular.module('AppTool', [
                         'ngRoute',
                         'lumx',
                         'hljs',
                         'Services'
                     ])

控制器/mainCtrl.js

/* global angular */
/* global escape */
/* global console */
'use strict'; // jshint ignore:line
angular.module('AppTool')
.controller('KMController', [ '$scope', KMController]);
function($scope)
{
    $scope.check = "The Check";
}

services/mainService.js

angular
    .module('AppTool', [])
    .service('Sidebar', function()
    {
        var sidebarIsShown = false;
        function toggleSidebar()
        {
            sidebarIsShown = !sidebarIsShown;
        }
        return {
            isSidebarShown: function()
            {
                return sidebarIsShown;
            },
            toggleSidebar: toggleSidebar
        };
    });

路由.js

'use strict';
/**
 * Route configuration 
 */
angular.module('AppTool')
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
    function($stateProvider, $urlRouterProvider, $$locationProvider) {
//        $locationProvider.html5Mode({
//                    enabled: true,
//                    requireBase: false
//                });
        // For unmatched routes
        $urlRouterProvider.otherwise('/');
        // Application routes
        $stateProvider
            .state('index', {
                url: '/',
                templateUrl: '/',
            })
    }
]);

index.html

<!DOCTYPE html>
<html ng-app="AppTool" ng-controller="KMController">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>LumX</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/lumx.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body>
    <h1>{{check}}</h1>
    <ng-include src="'/includes/common/header.html'"></ng-include>
    <div class="main" ng-view></div>

</body>
</html>

您需要为每个类别（服务、控制器…）声明不同的模块，并将其注入主模块。

angular.module('apptool.service', []);
angular.module('apptool.controller', []);
angular.module('apptool', ['apptool.service', 'apptool.controller'];

现在您可以将服务创建为：

angular
    .module('apptool.service') // without the [] because the module is already declarated
    .service('Sidebar', function()
    {
        var sidebarIsShown = false;
        function toggleSidebar()
        {
            sidebarIsShown = !sidebarIsShown;
        }
        return {
            isSidebarShown: function()
            {
                return sidebarIsShown;
            },
            toggleSidebar: toggleSidebar
        };
    });

控制器：

/* global angular */
/* global escape */
/* global console */
'use strict'; // jshint ignore:line
angular.module('apptool.controller')
.controller('KMController', [ '$scope', KMController]);
function($scope)
{
    $scope.check = "The Check";
}

将所有内容保存在单独的文件中，并将其包含在index.html 中

//编辑：看来我理解错了你的问题。你的意思是你只想让控制器和服务的单独文件在同一个模块中运行？然后只需首先包含模块声明js文件，然后再包含包含服务和控制器的所有其他文件。

相关文章：