Question

我正在尝试使用Angular JS创建一个种子应用程序，RequireJS＆amp;框架7.到目前为止，我创建了以下文件夹结构。

我的主文件夹如下所示：

enter image description here

我的脚本文件夹如下所示：

enter image description here

我的图书馆是：

enter image description here

我能够看到 - ＆gt;控制器流程正常工作。但是当我尝试将服务对象注入控制器时，我得到以下错误。

enter image description here

我相信我一定错过了什么。我在下面给出了我的代码：

需要-主：

(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>

任何人都可以帮助我吗？你也可以下载并运行整个项目here。

Answer 1

您正在将服务注册为webcallService：

app.service('webcallService',  function() {

但是在控制器中注入$webcallService：

app.register.controller('UserController', function ($scope, $location, $webcallService) {

选择一个，但建议不使用$的那个，因此请使用webcallService声明您的控制器：

app.register.controller('UserController', function ($scope, $location, webcallService) {

编辑：在阅读angularAMD documentation之后发现了另外一个问题，您似乎必须添加包含WebCallManager angularjs服务的requirejs模块webcallService作为define()中的依赖项。

因此，它应该是这样的：

define(['app', 'WebCallManager'], function (app) {
  app.register.controller('UserController', function ($scope,$location,webcallService) {

否则，模块WebCallManager将不会按需加载。

编辑：发现第三个问题，您通过app.register注册控制器，但直接通过app.注册服务。您需要在此处保持一致，但app.register已被弃用（请参阅this thread）。

因此，最好的方法是删除app.register，如下所示：

app.controller('UserController', ..

在app.js中改变：

angularAMD.bootstrap(app);
return app;

到

return angularAMD.bootstrap(app);

希望这有帮助。

获取Angular JS，需要JS＆amp;框架7携手合作

1 个答案: