如何分別在angular.js中編寫控制器，服務，路由和模塊？

Question

我只是嘗試使用塊狀角材料，並且它的app.js將所有控制器，服務和模塊集中在一個位置。

我試圖將它們分開，但是它不能在lumx中工作，因為在lumx中index.html文件中，它們包括了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";
}

服務/ mainService.js

angular
    .module('AppTool', [])
    .service('Sidebar', function()
    {
        var sidebarIsShown = false;

        function toggleSidebar()
        {
            sidebarIsShown = !sidebarIsShown;
        }

        return {
            isSidebarShown: function()
            {
                return sidebarIsShown;
            },
            toggleSidebar: toggleSidebar
        };
    });

routes.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>

Answer 1

您將需要為每個類別（服務，控制器等）聲明不同的模塊，並將其注入到主模塊中。

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中

//編輯：似乎我理解您的問題有誤。 您是說只想在同一模塊中運行單獨的Controller和服務文件？ 然后，只需首先包含模塊聲明js文件，然后再包含包含服務和控制器的所有其他文件即可。

如何分別在angular.js中編寫控制器，服務，路由和模塊？

問題描述

1 個解決方案

解決方案1
0 2015-11-15 10:42:39

如何分別在angular.js中編寫控制器，服務，路由和模塊？

問題描述

1 個解決方案

解決方案1 0 2015-11-15 10:42:39

解決方案1
0 2015-11-15 10:42:39