1

我只是尝试使用 lumx 角度材料，它的 app.js 将所有控制器、服务、模块放在一个地方。

我试图将它们分开，但它不能在 lumx 中工作，就像在 index.html 文件中的 lumx 中一样，它们已经包含了 app.js 文件，但是如果我必须编写许多控制器，我必须如何遵循它？

这是 lumx 中 app.js 的 github 链接

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

我已经制作了单独的文件

模块.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";
}

服务/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: '/',
            })
    }
]);

索引.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>
4

1 回答 1

0

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

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 文件，然后包含所有其他包含服务和控制器的文件。

于 2015-11-15T10:42:39.797 回答