2016-10-10 1 views
2

안녕하세요 저는 cordova를 사용하여 페이스 북 로그인을 통합하려는 초보 프로그래머입니다. 나는이 아주 최근의 가이드 shown here을 따라 갔고, 새로운 코도 바 프로젝트에서 코드 단어를 붙여 넣었다. 나는 Jquery에 대한 경험이 있었지만 이것은 처음으로 Angular와 ionic에 직면했다.
여기Facebook cordova 로그인 오류 : '..로 인해 facebookApp 모듈을 인스턴스화하지 못했습니다.'

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <title>Facebook Login</title> 

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

     <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
     <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script> 
     <script src="https://cdn.rawgit.com/nraboy/ng-cordova-oauth/master/dist/ng-cordova-oauth.min.js"></script> 

     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="cordova_plugins.js"></script> 
     <!-- added the directories myself below --> 
     <script src="/bower_components/angular/angular.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 
    <body> 
     <div ng-app="facebookApp"> 
      <div ng-controller="mainCtrl"> 
      </div> 
     </div> 

     <div data-role="page" id="home"> 
      <div data-role="header"> 
       <h1>Login</h1> 
      </div> 

      <div data-role="main" class="ui-content"> 
       <p>You need to login to view your Facebook profile information</p> 
       <p>V1.0.1</p> 
       <a target="_blank" href="#" onclick="login()" style="text-decoration: none"><button>Login using Facebook</button></a> 
      </div> 
     </div> 

     <div data-role="page" id="profile"> 
      <div data-role="header"> 
       <a target="_blank" href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> 
       <h1>Profile</h1> 
      </div> 
      <div data-role="main" class="ui-content" id="listTable"></div> 
     </div> 

     <script type="text/javascript"> 
      angular.module("facebookApp", ["ionic", "ngCordova"]).controller("mainCtrl", ["$scope", "$cordovaOauth", "$http", function($scope, $cordovaOauth, $http) { 
       window.cordovaOauth = $cordovaOauth; 
       window.http = $http; 
      }]); 

      function login() 
      { 
       facebookLogin(window.cordovaOauth, window.http); 
      } 

      function facebookLogin($cordovaOauth, $http) 
      alert($cordovaOauth); 
      alert($http); 
      { 
       $cordovaOauth.facebook("201821216900862", ["email", "public_profile"], {redirect_uri: "http://localhost/callback"}).then(function(result){ 
        displayData($http, result.access_token); 
       }, function(error){ 
         alert("Error: " + error); 
       }); 
      } 

      function displayData($http, access_token) 
      { 
       $http.get("https://graph.facebook.com/v2.2/me", {params: {access_token: access_token, fields: "name,gender,location,picture", format: "json" }}).then(function(result) { 
        var name = result.data.name; 
        var gender = result.data.gender; 
        var location = result.data.location; 
        var picture = result.data.picture; 
        var html = '<table id="table" data-role="table" data-mode="column" class="ui-responsive"><thead><tr><th>Field</th><th>Info</th></tr></thead><tbody>'; 
        html = html + "<tr><td>" + "Name" + "</td><td>" + name + "</td></tr>"; 
        html = html + "<tr><td>" + "Gender" + "</td><td>" + gender + "</td></tr>"; 
        html = html + "<tr><td>" + "Picture" + "</td><td><img src='" + picture.data.url + "' /></td></tr>"; 
        html = html + "</tbody></table>"; 

        document.getElementById("listTable").innerHTML = html; 
        $.mobile.changePage($("#profile"), "slide", true, true); 
       }, function(error) { 
        alert("There was a problem getting your profile. Check the logs for details."); 
        console.log(error); 
       }); 
      } 
     </script> 
    </body> 
</html> 

Mutliple 오류가 일식에 의해 반환 된 내 index.html을하지만, 가장 중요한 오류,
Uncaught Error: [$injector:modulerr] Failed to instantiate module facebookApp due to:

Error: [$injector:nomod] Module 'facebookApp' 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.
되는 Anularjs 또한 오류 shown here을위한 웹 페이지를 제작하고 다음 코드 줄을 제안했습니다 : angular.module("facebookApp", ["ionic", "ngCordova"]).controller("mainCtrl", ["$scope", "$cordovaOauth", "$http", function($scope, $cordovaOauth, $http) {이 오류를 발생 시켰습니다. 또한, 내 각도는 코드가하려고하는이 작업을 지원하지 않는 버전 1.5.8입니다. 이 웹 사이트는 필자가 응용 프로그램의 최상위 모듈에 의존성을 추가하는 방법을 제안합니다.

모든 입력 또는 sugestion 감사드립니다! :-)

답변

1

스크립트 순서가 정말로 중요합니다.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <script src="/bower_components/angular/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script> 
    <script src="https://cdn.rawgit.com/nraboy/ng-cordova-oauth/master/dist/ng-cordova-oauth.min.js"></script> 

    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="cordova_plugins.js"></script> 

처럼 순서를 변경하는 것을 시도는 2 angular.js 주입이 정상인가? 당신은 아마 오류 같은 것을 볼 수 있습니다 크롬 오픈 index.php를 당신 -as : 솔루션이 그래서

+0

안녕하세요, 재 배열 후 오류가 여전히 여기에 있습니다. .js meself를 추가 했는데도 제거 할 때 작동하지 않습니다. 여전히 입력 해 주셔서 감사합니다 !! –

0

내가이 문제를 극복 된 각 모듈 부분에 의해 발생

Error: [$injector:unpr] Unknown provider: $cordovaProvider http://....

- 당신이 보면 그 부분에 가깝게. ionic, ngCordova을 포함하는 헤더 행이 있지만 새 버전 ngCordova은 두 개의 파일로 나뉘어져 있습니다. 그래서 기본적으로 당신이해야 할 일이에 각 헤더를 변경할 수 있습니다 : ngCordovaOauth

angular.module("facebookApp",["ionic","ngCordova","ngCordovaOauth"]).controller("mainCtrl", ["$scope", "$cordovaOauth", "$http"], function($scope, $cordovaOauth, $http) { 
... 
//your app code 
... 
}) 

테이크 고지 헤더에 추가했다. 그것이 당신의 문제였습니다. :] 좋은 하루 되세요! 그것이 도움이 되었기를 바랍니다, 당신은 처음 stackowerflow에 도움이되었습니다.

관련 문제