如何在angular.js中分别编写控制器、服务、路由和模块？
如何在angular.js中分别编写控制器、服务、路由和模块？
提问于 2015-11-15 10:23:52
我只是尝试使用lumx角材料，它有app.js，所有的控制器，服务，模块在一个地方。
我试着把它们分开，但是它不是在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'
])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>回答 1
Stack Overflow用户
发布于 2015-11-15 10:42:39
您需要为每个类别声明不同的模块(服务、控制器、.)并将其注入主模块。
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文件，然后是包含服务和控制器的所有其他文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33718642
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号