Как написать отдельно контроллер, службы, маршруты и модуль в angular.js?

Я просто попытался использовать угловой материал lumx, и у него есть приложение app.js со всем контроллером, услугами, модулем в одном месте.Как написать отдельно контроллер, службы, маршруты и модуль в angular.js?

Я попытался сделать их отдельными, но не работал в lumx, как в lumx в файле index.html, они включили файл app.js, но если мне нужно написать много контроллеров, как я должен следовать за ним?

здесь ссылка GitHub для app.js в lumx

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>

источник

2015-11-15 atjoshi

В 'services/mainService.js' удалите декларацию зависимости модуля. Это должно быть 'angular.module ('AppTool'). Service ('Sidebar', function() ...' – georgeawg

Вам нужно будет объявить разные модули для каждой категории (сервис, контроллер, ...) и ввести его в главный модуль.

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

// EDIT : Кажется, я неправильно понял вашу проблему. Вы имеете в виду, что просто хотите иметь отдельные файлы для контроллера и службы, работающие в одном модуле? Затем просто укажите текст объявления js-модуля сначала, а затем все остальные файлы, содержащие службу и контроллеры.

источник

2015-11-15 10:42:39 David

Раньше я работал над одним приложением rdash и имел один модуль и отдельные контроллеры для спецификации или страницы и их соответствующие службы, поэтому я попытался использовать то же самое здесь, а также в lumX, но его не работает, поскольку он включает файл app.js в индекс, и я не знаю, какой файл включить сюда, поскольку будет много контроллеров и служб – atjoshi

Как написать отдельно контроллер, службы, маршруты и модуль в angular.js?

ответ

Смежные вопросы