Question

我没有太多的角度信息。我想做离子foursquare集成。但是不要解决错误。

    Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
    Error: 

        [$injector:modulerr] Failed to instantiate module ngFoursquare due to:
        Error: [$injector:nomod] Module 'ngFoursquare' is not available! 

You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

app.js

angular.module('starter', ['ionic', 'starter.controllers' ,'ngFoursquare'])
.constant('CLIENT_ID', 'X4ITCR1UHKU2EKFVIBEZRRYX52W2I2I3I3ZN5K0A2M3YDIKS')
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

    if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {

      StatusBar.styleDefault();
    }
  });
})

.config(function ($stateProvider, $urlRouterProvider, FoursquareProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.login', {
      url: '/login',
      views: {
          'menuContent': {
              templateUrl: 'templates/login.html',
              controller: 'LoginCtrl'
          }
      }
  })

  //$urlRouterProvider.otherwise('/app/playlists');

  $urlRouterProvider.otherwise({
      resolve : {
          token: function ($location) {
              var match = $location.path().match(/access_token=(.*)/)
              if(match){
                  FoursquareProvider.token = match[1]
              }
          }
      }
      ,templateUrl: 'templates/login.html'
      ,controller:'LoginCtrl'
  })
});

controllers.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  $scope.loginData = {};

  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  $scope.login = function() {
    $scope.modal.show();
  };

  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('LoginCtrl', function($scope,Foursquare, $log, CLIENT_ID, $location) {
    var match = $location.path().match(/access_token=(.*)/)
    $scope.userId       = 'self'
    $scope.client_id    = CLIENT_ID
    $scope.redirect_uri = encodeURIComponent(location.origin+location.pathname)
    $scope.access_token = match && match[1] || ''

    $scope.clear = function () {
        $scope.userId=null
        $scope.venueId=null
        $scope.ll=null
        $scope.checkinId=null
    }

    $scope.getUser = function (userId) {
        $scope.data =  Foursquare.Users.get({
            userId: userId
        },function (data) {
            $scope.user = data.response.user
        })
    }
    $scope.getUserLists = function (userId) {
        $scope.data = Foursquare.Users.lists({
            userId: userId
        })
    }
    $scope.searchVenues = function (ll) {
        $scope.data = Foursquare.Venues.search({ll:ll})
    }
    $scope.getVenue = function (venueId) {
        $scope.data = Foursquare.Venues.get({
            venueId:venueId
        })
    }
    $scope.addCheckin = function (venueId,broadcast) {
        $scope.data = Foursquare.Checkins.add({
            venueId:venueId,
            broadcast:broadcast
        })
    }
    $scope.getCheckin = function (checkinId) {
        $scope.data = Foursquare.Checkins.get({
            checkinId:checkinId
        })
    }

    $scope.search = function () {
        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.$apply(function () {
                $scope.pos  = pos
                $scope.data = Foursquare.search(pos) 
            })
        })
    }

    $scope.getList = function (listId) {
        $scope.data = Foursquare.Lists.get({
            listId:listId
        })
    }
    $scope.addList = function (name) {
        $scope.data = Foursquare.Lists.add({
            name:name
        })
    }
})

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <script src="js/platformOverrides.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/foursquare.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>
</html>

foursquare.js

angular.module('ngFoursquare',["ngResource"])
  .constant('BASE_API_URL','https://api.foursquare.com/v2')
  .constant('encodeParam',function (data) {
    return data && Object.keys(data).map(function (k) {
      return encodeURI(k)+'='+encodeURI(data[k])
    }).join('&')  
  })
  .config(function ($provide,$resourceProvider,$httpProvider) {
    var $hp = angular.copy($httpProvider)
      ,$rp = angular.copy($resourceProvider)
      i = 0

    $provide.decorator('$cacheFactory',function ($delegate) {
      return function (cacheId,options) {
        if(cacheId=='$http'){
          cacheId+=''+i++
        }
        $delegate(cacheId,options)
      }
    })
    
    delete $hp.defaults.headers.common["X-Requested-With"]
    $provide.provider('$customHttp',$hp)
    $rp.$get[0]="$customHttp"
    $provide.provider('$customResource',$rp)
  })
  .provider('Foursquare',function (encodeParam) {
    var FoursquareProvider = {
    '$get': function ($customResource,$q,BASE_API_URL) {
      var $resource=$customResource
        ,params = {
          oauth_token: FoursquareProvider.token || ''
          ,v: '20130425'
        }
        ,Foursquare = {
        token: function (token) {
          FoursquareProvider.token = token
        }
        ,Users: $resource(BASE_API_URL+'/users/:userId/:action',
          {},{
          lists:{
            method:'GET',
            params: angular.extend({action:'lists'},params)
          },
          get:{
            method:'GET',
            params: params
          }
        })
        ,Venues  : $resource(BASE_API_URL+'/venues/:venueId/:action',
          {},{
          search: {
            method: 'GET'
            ,params: angular.extend({action:'search'},params)
          },
          get: {
            method: 'GET',
            params: params
          }
        })
        ,Checkins: $resource(BASE_API_URL+'/checkins/:checkinId/:action',
          {},{
          add: {
            method: 'POST',
            params: angular.extend({action:'add'},params),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: encodeParam
          },
          get: {
            method: 'GET',
            params: params
          }
        })
        ,Lists: $resource(BASE_API_URL+'/lists/:listId/:aspect/:action',
          {},{
          get: {
            method:'GET',
            params: params
          },
          add: {
            method: 'POST',
            params: angular.extend({action:'add'}, params),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: encodeParam
          }
        })
        ,search:function (position) {
          return $q.when(position).then(function (pos) {
              var c = pos.coords,
                ll = "" + c.latitude + "," + c.longitude
              return ll
            })
            .then(function (ll) {
              var deferred = $q.defer()
              Foursquare.Venues.search({
                ll:ll
              },deferred.resolve,deferred.reject)
              return deferred.promise
            })
        }
      }
      return Foursquare
    }
    }
    return FoursquareProvider
  })

Answer 1

我认为您未在index.html中添加angular-resource.js。

您需要先包含它。然后在创建ngFoursquare模块后

然后在其他模块中为available for injection。

错误：[$ injector：modulerr]无法实例化模块ngFoursquare

1 个答案: