Doesn't work examples from angularfire tutorial

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

  •  14-10-2022
  •  | 
  •  

Pregunta

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

¿Fue útil?

Solución

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
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top