使用角度js和firebase的网站错误:[$ injector:modulerr]

时间:2017-06-26 11:38:06

标签: jquery angularjs firebase firebase-realtime-database firebase-authentication

我的角度js出现问题,它会给我这个错误print screen of the error in the console log

我试图通过firebase检索用户名,然后使用angular js将其打印到网页上。

这是我在html中的代码

<header>
    <div class="header-content">
        <div class="header-content-inner">

            <!--<h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1>!-->
            <div data-ng-app="myApp" data-ng-controller="myCtrl">//fix this

                <p>welcome, {{firstname}}</p>
                <hr>
                <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
                <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
            </div>
        </div>
    </div>
</header>

这个是我的javascript

<script>

    $(document).ready(function(){
        var app = angular.module('myApp',['ngRoute']);

        app.controller('myCtrl', function($scope){
            var userId = firebase.auth().currentUser.uid;

            console.log(userId);
            $scope.firstname = firebase.database().ref('users/' + userId).once('value').then(function(snapshot){
                console.log(snapshot.val().firstname);
                return snapshot.val().firstname;
            });
        });

        firebase.auth().onAuthStateChanged(firebaseUser => {
            if(firebaseUser){
                console.log(firebaseUser);
            }else{
                window.location.replace("index.html");
                console.log('not logged in');
            }
        });
        $("#btnLogout").click(function(){
            firebase.auth().signOut();
            window.location.replace("index.html");
        });
    });
</script>

2 个答案:

答案 0 :(得分:0)

我认为您尚未添加 ngRoute 。添加此代码并再次检查。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

答案 1 :(得分:0)

问题是,你在文件就绪时调用angular.module。显然,文档准备就绪,在角度查找模块后调用。

使用javascript:

<script>
        var app = angular.module('myApp',[]);

        app.controller('myCtrl', function($scope){
            var userId = firebase.auth().currentUser.uid;

            console.log(userId);
            $scope.firstname = firebase.database().ref('users/' + userId).once('value').then(function(snapshot){
                console.log(snapshot.val().firstname);
                return snapshot.val().firstname;
            });
        });

        firebase.auth().onAuthStateChanged(firebaseUser => {
            if(firebaseUser){
                console.log(firebaseUser);
            }else{
                window.location.replace("index.html");
                console.log('not logged in');
            }
        });
        $("#btnLogout").click(function(){
            firebase.auth().signOut();
            window.location.replace("index.html");
        });
</script>