第一个 Angular JS 应用程序 - 发布加载服务

Question

我确实讨厌问新问题，事实上我相信这是我的第一个问题，但你可以相信我的话，我已经尽最大努力在不依赖你们的情况下找到答案。

它非常简单，构建了我的第一个愚蠢的 Angular JS 应用程序，但据我所知，我手上似乎有一些语法错误，一切似乎都是正确的。只是想习惯使用一个简单的工厂返回一些数据的服务，但我什至不能那样做:,(

问题出在 menuService 上，它在 service.js 文件中，它只是 returns 一个通过工厂的数组，但我被告知它是未定义的。

TypeError: 无法读取未定义的属性 'getData' 在新的 (app.js:49)

第 49 行是我分配 $scope.menuItems = menuService.getData;

谢谢！

我的index.html:

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Jan Michael Vincent</title>
    <meta name="description" content="A sample Angular app featuring Jan Michael Vincent">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/angular/angular.js"></script>
    <link href="bower_components/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="app.css" rel="stylesheet" type="text/css">
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="service.js"></script>
    <script src="app.js"></script>
</head>

<body ng-app="JMV">


    <!-- HEADER -->
    <div class="header" ng-controller="mainController">
        <img class="header_logo" ng-src="{{title.logo}}">
        <h1>{{title.value}} {{title.total+1}}</h1>
    </div>


    <!-- ALERTS -->
    <div class="alerts">
        <div ng-controller="alertController">
            <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
        </div>
    </div>


    <!-- ----- CONTENT & SIDEBAR ----- -->
      <div class="section">
        <div class="container">
            <div class="row">


              <!-- SIDEBAR -->
              <div class="col-md-3" ng-controller="menuController">   
                <h3 ng-repeat="item in menuItems"> <a href src="{{item.link}}"> {{item.name}} </a> </h3>
              </div>


              <!-- CONTENT -->
              <div class="col-md-9" ng-controller="contentController">

                <div class="row">
                  <h2> Our Team of Developers </h2>
                </div>

                <div class="row">
                    <div class="col-md-3" ng-repeat="member in teamMembers">
                      <img src="{{member.img}}" class="center-block img-circle img-responsive">
                      <h3 class="text-center">{{member.name}}</h3>
                      <p class="text-center">{{member.title}}</p>
                    </div>
                </div>

                <p ng-if="myBool">{{content.value}}</p>
                <button ng-click="myBool=!myBool">Tog-L</button>


              </div>


            </div>
          </div>
        </div>

    <!-- FOOTER -->


</body></html>

我的app.js:

    'use strict';

angular.module('JMV', [
    'ui.bootstrap',
    'serv'
    ])
    .controller('mainController', function($scope){
        $scope.title={};
        $scope.title.value="Jan Michael Vincent";
        $scope.title.logo="img/logo.png";
        $scope.title.total=2999;
    })
    .controller('contentController', function($scope){
        $scope.myBool = true;
        $scope.content={};
        $scope.content.value="First Content Butch";
        $scope.content.date="21/04/16";

        function toggleOn () {
            if (myBool) {
                myBool = false;
            } else {
                myBool = true;
            }
        };

        $scope.teamMembers = [
            {
                'name' : "Tiny Rick",
                'img' : "img/rick.jpg",
                'title' : "Science guy"
            },
            {
                'name' : "Morty",
                'img' : "img/morty.jpg",
                'title' : "Loon"
            },
            {
                'name' : "Jerry",
                'img' : "img/jerry.jpg",
                'title' : "Employee"
            }
        ];
    })
    .controller('menuController', [
        'menuService',
        function($scope, menuService){
        $scope.menuItems = menuService.getData;
    }])
    .controller('alertController', function ($scope) {
      $scope.alerts = [
        //{ type: 'danger', msg: 'Accept our Cookie Policy or GTFO!' },
        { type: 'danger', msg: 'You are not logged in!' }
      ];

      $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
      };
    });

我的service.js:

(function() {

    'use strict';

    angular.module('serv', [])
        .factory('menuService', menuService);

        function menuService () {

            var service = {
                getData: getData,
                putData: putData
            }

            return service;

            //////

            function getData() {
                return [{
                    'name' : 'Home',
                    'link' : 'index.html'
                },
                {
                    'name' : 'About',
                    'link' : 'about.html'
                },
                {
                    'name' : 'Contact',
                    'link' : 'contact.html'
                }];
            }

            function putData() {
                //TODO
            }

        };
})();

任何帮助将不胜感激，一旦我明白我在这里做错了什么，我就应该放弃它。非常感谢 :D

N

Answer 1

给你。我懒得在你的代码中找到错误。我不会这样做，而是 post 我的一个项目中的一些我知道有效的代码。看看您是否可以对其进行逆向工程以使用您的代码。我建议一次一步地从代码中剥离任何无用的东西。直到它运行。

'use strict';

//define module and dependencies to other modules
angular.module('MyModule', ['pascalprecht.translate', 'ngAnimate', 'ui.bootstrap']);

//define translations
angular.module('MyModule').config(function ($translateProvider) {

    $translateProvider.translations('en', {
        HEADLINE: 'Hello there, This is my awesome app!',
        INTRO_TEXT: 'And it has i18n support!'
    });

    $translateProvider.translations('de', {
        HEADLINE: 'Hey, das ist meine großartige App!',
        INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
    });

    $translateProvider.translations('sv', {
        HEADLINE: 'Hejsan detta är min awesome app!',
        INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
    });

    //$translateProvider.preferredLanguage('de');
    //$translateProvider.preferredLanguage('en');
    $translateProvider.preferredLanguage('sv');
});

//define services
angular.module('MyModule').service('TabService', ['$log', function ($log) {

    //fetches the url of the current window and active tab
    this.requestCurrentTabData = function (callback) {

        if (!chrome.tabs) {
            $log.error("chrome.tabs api is only available when running as a browser extension");
            return callback("request error");
        }

        chrome.tabs.query({ active: true, currentWindow: true }, function (result) {
            var tab = result[0];
            callback({
                url: tab.url,
                title: tab.title
                //favIconUrl: tab.favIconUrl
            });
        });

    };
}]);

//define directives
angular.module('MyModule').directive('myAutoFocus', ['$document', function ($document) {
    return {
        link: function (scope, element, attributes, controller) {
            angular.element($document).ready(function () {
                element[0].focus();
            });
        }
    };
}]);

Answer 2

您的代码中的问题与依赖注入有关。

使用内联数组注释将组件注入控制器时，首先提供字符串依赖项名称列表，然后是函数声明，它接受与数组完全相同数量的参数，顺序完全相同.

在您的代码中，您有：

.controller('menuController', [
    'menuService',
    function($scope, menuService){

这个声明有一个字符串值，但是有两个函数参数。这些不同步。实际上，这会将 $scope 设置为您的 'menuService' 对象，并且 menuService 将是未定义的，并且两者都不会按照您期望的方式执行。

要更正此问题，请确保您的参数列表和实际参数同步：

.controller('menuController', [
    '$scope', 'menuService',
    function($scope, menuService){

第一个 Angular JS 应用程序 - 发布加载服务

First Angular JS App - issue loading service

angularjs-service