Doesn't work examples from angularfire tutorial

StackOverflow https://stackoverflow.com/questions/21938394

  •  14-10-2022
  •  | 
  •  

题

When I try to run page as described in https://www.firebase.com/docs/angular/

    <html ng-app="sampleApp">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="//cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
    <script src="//cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="SampleController">
    <input type="text" ng-model="text"/>
    <h1>You said: {{text}}</h1>
  </body>
</html>

and app.js:

 angular.module("sampleApp", ["firebase"])
  .factory("sampleService", ["$firebase", function($firebase) {
    var ref = new Firebase("https://sizzling-fire-8112.firebaseio.com/");
    return $firebase(ref);
  }])
  .controller("SampleController", ["$scope", "sampleService",
    function($scope, service) {
      service.$bind($scope, "text");
    }
  ]);

There is: You said: {{text}} on the web screen. What I did wron? Thanks ;)

有帮助吗？

解决方案

I suppose you are opening this page not via webserver, but directly from filesystem. If so, never do that way. There can be various restrictions with AJAX, canvas, etc.

In your example you're trying to load outer scripts with protocol relative URLs.
In case of opening page from filesystem, URLs are being transformed into file://... format.

To solve this problem you should use a webserver. If you can't use it for some reasons, add http: to the beginning of the outer URLs, so it will be:

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js

instead of

//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top