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

Question

I just tried to use lumx angular material and it has app.js having all the controller, services, module at one place.

I tried to make them separate but its not working in lumx as in lumx in index.html file they have included the app.js file but if i have to write many controllers how I have to follow it?

here is the github link for app.js in lumx

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

I have made separate files as

module.js

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

controllers/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
        };
    });

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>

In `services/mainService.js` remove the module dependency declaration. It should be `angular.module('AppTool').service('Sidebar', function()...` — georgeawg, Nov 15 '15 at 10:56

David · Answer 1 · 2015-11-15T10:50:13.027

You will need to declare different modules for each category (service, controller, ...) and inject it into the mainmodule.

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

Now you can create the service as:

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

Controller:

/* 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";
}

save everything in separate files and include them in index.html

// EDIT: Seems that I understood your problem wrong. You mean you just want to have separate Files for Controller and service running in the same module? Then just include you module declaration js file first and after that all other files that contains the service and controllers.

Earlier i worked on one rdash application and it has one module and the separate controllers for specification or page and their respective services, so i tried to use the same here as well in lumX however its not working as it included the app.js file in index and I don't know which file to include here as there will be many controller and services — Mr X, Nov 15 '15 at 12:17

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

1 Answers1