未能实例化模块启动器
[英]Failed to instantiate module starter due
问题描述
I keep getting that error and i have no idea why: 
我不断收到该错误，我也不知道为什么：
Error: [$injector:modulerr] Failed to instantiate module starter due to: [$injector:modulerr] Failed to instantiate module starter.controllers due to: [$injector:modulerr] Failed to instantiate module starter.services due to: [$injector:nomod] Module 'starter.services' is not available!
calendar.html file: calendar.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="CalendarCtrl">
<ion-content>
<div class="card" ng-repeat="event in events">
<div class="item item-divider">
{{event.title}}
</div>
<div class="item item-text-wrap">
{{ event.description }}
<p/>
<strong>When: {{ event.date | date:'short' }}</strong>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
services.js file: services.js文件：
angular.module('starter.services', [])
.factory('Events', function($q) {
var incrementDate = function (date, amount) {
var tmpDate = new Date(date);
tmpDate.setDate(tmpDate.getDate() + amount)
return tmpDate;
};
//create fake events, but make it dynamic so they are in the next week
var fakeEvents = [];
fakeEvents.push(
{
"title":"Meetup on Ionic",
"description":"We'll talk about beer, not Ionic.",
"date":incrementDate(new Date(), 1)
}
);
fakeEvents.push(
{
"title":"Meetup on Beer",
"description":"We'll talk about Ionic, not Beer.",
"date":incrementDate(new Date(), 2)
}
);
fakeEvents.push(
{
"title":"Ray's Birthday Bash",
"description":"Celebrate the awesomeness of Ray",
"date":incrementDate(new Date(), 4)
}
);
fakeEvents.push(
{
"title":"Code Review",
"description":"Let's tear apart Ray's code.",
"date":incrementDate(new Date(), 5)
}
);
var getEvents = function() {
var deferred = $q.defer();
deferred.resolve(fakeEvents);
return deferred.promise;
}
return {
get:getEvents
};
});
controller.js file: controller.js文件：
angular.module('starter.controllers', ['starter.services'])
.controller('AppCtrl', function ($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function () {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function () {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function () {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function () {
$scope.closeLogin();
}, 1000);
};
})
.controller('CalendarCtrl', ['starter.services', function ($scope, Events) {
Events.get().then(function (events) {
console.log("events", events);
$scope.events = events;
})
}])
.controller('PlaylistsCtrl', function ($scope) {
$scope.playlists = [
{title: 'Reggae', id: 1},
{title: 'Chill', id: 2},
{title: 'Dubstep', id: 3},
{title: 'Indie', id: 4},
{title: 'Rap', id: 5},
{title: 'Cowbell', id: 6}
];
})
.controller('PlaylistCtrl', function ($scope, $stateParams) {
});
app.js file: app.js文件：
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.calendar', {
url: '/calendar',
views: {
'menuContent': {
templateUrl: 'templates/calendar.html',
controller: 'CalendarCtrl'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
5 个解决方案
解决方案1
4 已采纳 2016-06-21 10:10:24
Firstly, you jinxed your calendar.html with index.html . 首先，您使用index.html calendar.html 。 I recommend you to separate your index.html and calendar.html . 我建议您将index.html和calendar.html分开。
Your starter.controllers injection in app.js was throwing error because of that. 因此，您在app.js中的starter.controllers注入app.js错误。
Secondly, after you have injected the starter.services in app.js , you don't need to inject it in every controller file you create although it will not throw error. 其次，在将starter.services注入app.js ，尽管它不会引发错误，但无需将其注入到您创建的每个控制器文件中。
Thirdly, your injection of starter.services factory into the controller is just wrong in this case. 第三，在这种情况下，将starter.services工厂注入控制器是错误的。 Your code for services.js is fine though. 不过，您的services.js代码很好。 I have changed the app.js to point to the calendar page directly at first. 我已经将app.js更改为首先直接指向日历页面。
Follow the below and you are good to go: 请按照以下说明进行操作，您会很顺利：
index.html index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
calendar.html calendar.html
<ion-pane ng-controller="CalendarCtrl">
<ion-content>
<div class="card" ng-repeat="event in events">
<div class="item item-divider">
{{event.title}}
</div>
<div class="item item-text-wrap">
{{ event.description }}
<p/>
<strong>When: {{ event.date | date:'short' }}</strong>
</div>
</div>
</ion-content>
</ion-pane>
controller.js controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function ($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function () {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function () {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function () {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function () {
$scope.closeLogin();
}, 1000);
};
})
.controller('CalendarCtrl', function ($scope, Events) {
Events.get().then(function (events) {
console.log("events", events);
$scope.events = events;
})
})
.controller('PlaylistsCtrl', function ($scope) {
$scope.playlists = [
{title: 'Reggae', id: 1},
{title: 'Chill', id: 2},
{title: 'Dubstep', id: 3},
{title: 'Indie', id: 4},
{title: 'Rap', id: 5},
{title: 'Cowbell', id: 6}
];
})
.controller('PlaylistCtrl', function ($scope, $stateParams) {
});
app.js app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.calendar', {
url: '/calendar',
views: {
'menuContent': {
templateUrl: 'templates/calendar.html',
controller: 'CalendarCtrl'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/calendar');
});
解决方案2
1 2016-06-21 09:18:26
Please change order of below script include in calendar.html 请更改calendar.html中包含的以下脚本的顺序
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
with 与
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/app.js"></script>
Let me know if this is not working also you can provide jsfiddle where i can help you exactly. 让我知道这是否不起作用，您也可以提供jsfiddle，在这里我可以为您提供确切帮助。
if this solved i can explain that modules should register first and then should use anywhere. 如果解决了这个问题，我可以解释一下模块应该先注册然后在任何地方使用。
I mean this will work same like variable which is not hoisted. 我的意思是，它将像未悬挂的变量一样工作。 if we injecting/using module A in module B before doing this we must register Module A that is why we need to change order here. 如果在执行此操作之前将模块A注入/使用模块B，则必须注册模块A，这就是我们需要在此处更改顺序的原因。
解决方案3
0 2016-06-21 09:17:52
check your controller 检查您的控制器
angular.module('starter.controllers', ['starter.services'])
it should be like this 应该是这样
angular.module('starter.controllers', [])
and check your index.html to you have included all the .js files 并检查index.html是否包含所有.js文件
change this it will help you 改变它会帮助你
解决方案4
0 2016-06-21 09:18:01
The code you posted is rather irrelevant, the error states clearly what's wrong 您发布的代码是无关紧要的，该错误清楚地指出了什么地方出了问题
the starter.services is not available at the time application bootstrap 应用程序引导时starter.services不可用
either the services.js is not loaded (check your network tab in developer tools) or it's loaded in wrong order (most likely) 尚未加载services.js （检查开发人员工具中的“网络”标签）或加载顺序错误（最有可能）
as soon as module that matches ng-app is loaded angular will bootstrap the application, so you can reorder the files so services and controllers are loaded before app.js 只要加载了与ng-app匹配的模块，angular就会引导应用程序，因此您可以重新排序文件，以便在app.js之前加载服务和控制器
OR 要么
you can automate with gulp or grunt to concatenate all files you need into one 您可以用gulp或grunt自动化将所需的所有文件串联在一起
OR 要么
you could remove the ng-app from your html and add following lines at the bottom of head or body to manually bootstrap 您可以从html中删除ng-app并在头部或主体底部添加以下几行以进行手动引导
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['starter']);
});
</script>
that way order of the files will not matter 这样文件的顺序将无关紧要
解决方案5
0 2017-02-15 09:43:04
If you ever come across such errors please make sure you've added your js and other resources referred in htmls to index.html file with absolute path. 如果遇到此类错误，请确保已将js和html中引用的其他资源添加到具有绝对路径的index.html文件中。
This an abstract answer to anyone looking for solution to such problems. 这是对寻求此类问题解决方案的任何人的抽象答案。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.