Doesn't work examples from angularfire tutorial

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

  •  14-10-2022
  •  | 
  •  

Question

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 ;)

Était-ce utile?

La solution

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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top