Question

我已经建立了一个角度工厂和控制器，使用他们的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);
            }
        };
});

Answer 1

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

Answer 2

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

角度“ng：areq”错误，工厂问题

2 个答案: