javascript - Facebook cordova 登录错误 : 'Failed to instantiate module facebookApp due to..'

标签 javascript html angularjs cordova

您好,我是一名初级程序员,正在尝试使用 cordova 集成 facebook 登录。我遵循了这个最近的指南 shown here ,并在新的 cordova 项目中逐字复制粘贴代码。我有过使用 Jquery 的经验,但这是我第一次同时遇到 Angular 和 ionic。
这是我的 index.html

<!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>

eclipse 返回了多个错误,但最重要的错误是,
Uncaught Error :[$injector:modulerr] 由于以下原因无法实例化模块 facebookApp:

错误:[$injector:nomod] 模块“facebookApp”不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。
Anularjs 还为错误生成了一个网页 shown here并建议这行代码:angular.module("facebookApp", ["ionic", "ngCordova"]).controller("mainCtrl", ["$scope", "$cordovaOauth", "$http ", function($scope, $cordovaOauth, $http) { 导致错误。此外,我的 Angular 版本为 1.5.8,不支持代码尝试执行的此操作。该网站建议我添加它依赖于我的应用程序的顶级模块,我不知道该怎么做。

任何输入或建议将不胜感激谢谢! :-)

最佳答案

脚本顺序非常重要。

尝试像这样重新排序

   <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注入(inject)正常吗?

关于javascript - Facebook cordova 登录错误 : 'Failed to instantiate module facebookApp due to..' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39954347/

相关文章:

javascript - 访问对象内部的数组

javascript - 使用 Outlook 通过电子邮件发送临时文件

javascript - React Native borderRadius 一个 Angular 不圆

javascript - 在打开链接之前执行 jQuery 事件

html - 有XSL预览的好工具吗?

javascript - 如何让我的网页变慢?

html - 增加字体大小时间隙较大

c# - 为什么我的 $resource POST 会导致 404 错误?

javascript - 在多个 $http 调用上显示微调器

javascript - 在 get 请求中使用 $interval