1

lumx angular マテリアルを使用しようとしましたが、すべてのコントローラー、サービス、モジュールを 1 か所に持つ app.js があります。

私はそれらを別々にしようとしましたが、app.jsファイルが含まれているindex.htmlファイルのlumxのようにlumxでは機能しませんが、多くのコントローラーを作成する必要がある場合は、どうすれば従う必要がありますか?

これは、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";
}

サービス/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>
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 に答える