获得角度JS，要求JS & Framework 7协同工作
我正在尝试使用角JS、RequireJS &Framework7创建一个种子应用程序。到目前为止，我已经创建了以下文件夹结构。
我的主文件夹如下所示：
我的脚本文件夹是这样的：
我的图书馆是：
我能够正确地查看->控制器流。但是，当我试图向控制器注入一个服务对象时，我会得到以下错误。
我肯定我错过了什么。我给出了下面的代码：
要求-主要：
(function() {
require.config({
baseUrl: "scripts",
// alias libraries paths
paths: {
'angular': '../libs/angular',
'angular-route': '../libs/angular-route',
'angular-animate':'../libs/angular-animate',
'angularAMD': '../libs/angularAMD.min',
'Framework7':'../libs/framework7',
'UserController':'controller/UserCtrl',
'WebCallManager':'services/WebCallManager'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate':['angular'],
'Framework7':{exports: 'Framework7'}
},
//kick start application
deps: ['app']
});
require(['Framework7'], function(Framework7) {
f7 = new Framework7({
modalTitle: 'Seed App',
swipePanel: 'left',
animateNavBackIcon: true
});
return {
f7: f7
};
});
})();app.js：
define(['angularAMD', 'angular-route','angular-animate'], function (angularAMD) {
var app = angular.module("app", ['ngRoute','ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider.when("/", angularAMD.route({ templateUrl: '../pages/login.html',controller: 'UserController'}));
$routeProvider.when("/login", angularAMD.route({ templateUrl: '../pages/home.html', controller: 'UserController'}));
});
angularAMD.bootstrap(app);
return app;
});UserController：
define(['app'], function (app) {
app.register.controller('UserController', function ($scope,$location,webcallService) {
$scope.loginUser = function(){
console.log("Login User Called...");
$location.path('/login').replace();
console.log("View Navigated...");
};
$scope.slidePanel = function(){
f7.openPanel('left');
};
$scope.doWebCall = function(){
console.log("Doing the Web Call...");
webcallService.sendGetRequest();
};
});
});WebCallManager.js (服务)
define(['app'], function (app) {
app.service('webcallService', function() {
var self = this;
self.sendGetRequest = function() {
console.log("Sending HTTP Get Request");
}
self.sendPostRequest = function() {
console.log("Sending HTTP Post Request");
}
});
});我的页面：
index.html：
<!DOCTYPE html>
<html>
<head>
<script data-main="scripts/main" src="libs/require.js"></script>
</head>
<body>
<div>
<div class="slide-animation page-content" ng-view ></div>
</div>
</body>
</html>login.html：
<div class="content-block login-input-content">
<div class="store-data list-block">
<div>
<input type="text" class="login-name" placeholder="Username">
</div>
<div>
<input type="password" class="password" placeholder="Password">
</div>
<a class="multi-language" href="#"><i class="icon ios7-world-outline"></i><span>english</span></a>
</div>
</div>
<div class="content-block login-btn-content">
<button ng-click="loginUser()" class="button button-big button-submit login-submit">Login</button>
</div>Home.html：
<div>
<h3>Welcome to Mobility In Angular-JS</h3>
<div class="content-block login-btn-content">
<button ng-click="doWebCall()" class="button button-big button-submit login-submit">Send Get</button>
<br/><br/>
<button ng-click="doWebCall()" class="button button-big button-submit login-submit">Send Post</button>
</div>
有人能帮我吗？YOu还可以下载并运行整个项目这里。
回答 1
Stack Overflow用户
发布于 2014-08-11 09:28:56
您正在将服务注册为webcallService
app.service('webcallService', function() {但是将$webcallService注入控制器：
app.register.controller('UserController', function ($scope, $location, $webcallService) {选择一个，建议使用没有$的控制器，所以请使用webcallService声明控制器。
app.register.controller('UserController', function ($scope, $location, webcallService) {编辑：发现了另一个问题，在阅读了angularAMD文档之后，似乎还必须在define()中添加包含webcallService angularjs服务的requirejs模块WebCallManager。
因此，应该是这样：
define(['app', 'WebCallManager'], function (app) {
app.register.controller('UserController', function ($scope,$location,webcallService) {否则，模块WebCallManager将不会按需加载.
编辑：发现了第三个问题，您通过app.register注册控制器，但是直接通过app.注册服务。您需要在这里保持一致，但是app.register已经被废弃了(参见这条线)。
因此，最好的方法是像这样删除app.register：
app.controller('UserController', ..在app.js中，从以下几个方面改变：
angularAMD.bootstrap(app);
return app;至
return angularAMD.bootstrap(app);希望这能有所帮助。
https://stackoverflow.com/questions/25239819
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号