角度"ng:areq"错误，出厂问题

我已经设置了一个Angular Factory和Controller来使用它们的API从Instagram上提取图像。在尝试加载页面时，我遇到了一个错误，但似乎无法解决这个问题。我的html、app、路由、工厂和控制器代码如下。我没有使用测试控制器，因为它运行正常。我想问题可能出在工厂，因为我刚开始使用它们。

index . html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <base href="/">
    <title>Starter Node and Angular</title>
    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
    <!-- JS -->
    <script src="libs/jquery/dist/jquery.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/angular-resource/angular-resource.min.js"></script>
    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/QuizCtrl.js"></script>
  <script src="js/controllers/InstaCtrl.js"></script>
  <script src="js/services/InstaFactory.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="app">
    <!-- HEADER -->
    <div class="navbar-wrapper">
      <div class="container navvy">
        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/">Frank Social</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Sign Up</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>
</body>
</html>

app.js:

angular.module('app', ['ngRoute', 'appRoutes', 'InstaFactory', 'QuizCtrl', 'InstaCtrl']);

appRoutes.js:

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        // home page
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'QuizController'
        })
        // quiz page that will use the QuizController
        .when('/quiz', {
            templateUrl: 'views/quiz.html',
            controller: 'QuizController'
        })
        // insta page that will use the InstaController
        .when('/insta', {
            templateUrl: 'views/insta.html',
            controller: 'InstaController'
        });
    $locationProvider.html5Mode(true);
}]);

InstaCtrl.js:

angular.module('InstaCtrl', []).controller('InstaController', function($scope, Instagram) {
        $scope.example1 = {
            hash: 'angular'
        };
        $scope.example2 = {
            hash: 'fit'
        };
        $scope.example3 = {
            hash: 'food'
        };
        var instagramSuccess = function(scope, res) {
            if (res.meta.code !== 200) {
                scope.error = res.meta.error_type + ' | ' + res.meta.error_message;
                return;
            }
            if (res.data.length > 0) {
                scope.items = res.data;
            } else {
                scope.error = "This hashtag has returned no results";
            }
        };
        Instagram.get(9, $scope.example1.hash).success(function(response) {
            instagramSuccess($scope.example1, response);
        });
        Instagram.get(9, $scope.example2.hash).success(function(response) {
            instagramSuccess($scope.example2, response);
        });
        Instagram.get(9, $scope.example3.hash).success(function(response) {
            instagramSuccess($scope.example3, response);
        });
});

InstaFactory.js:

angular.module('InstaFactory', []).factory('Instagram', function($http) {
        var base = "https://api.instagram.com/v1";
        var clientId = 'MY-CLIENT-ID-HERE';
        return {
            'get': function(count, hashtag) {
                var request = '/tags/' + hashtag + '/media/recent';
                var url = base + request;
                var config = {
                    'params': {
                        'client_id': clientId,
                        'count': count,
                        'callback': 'JSON_CALLBACK'
                    }
                };
                return $http.jsonp(url, config);
            }
        };
});

您的应用程序结构似乎是错误的，因为模块用于可重用的打包代码，例如，您正在定义一个新模块，只是在其中添加一个工厂，只是将其添加到应用程序模块，您应该将模块视为主要功能，并使用工厂或服务作为特定行为，就像您使用Instagram工厂一样。

找到错误。我将路由逻辑移到了appRoutes.js文件中，但是忘记从我的.html文件中删除对控制器的引用。一旦我从html中删除了这个ng-controller引用，一切就正常了。

相关内容

最新更新

热门标签：