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>

Answer 1

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.

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

Question

1 answers

solution1
0 2015-11-15 10:42:39

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

Question

1 answers

solution1 0 2015-11-15 10:42:39

solution1
0 2015-11-15 10:42:39