I'm trying to build a firebase+angularfire application, however i'm unable to use angularfire because of this error. I'm able to connect to firebase and load angular without using angularfire.
ReferenceError: $firebaseObject is not defined
Stack trace:
#http://localhost:5000/scripts/controllers.js:5:13
invoke#http://localhost:5000/components/angular/angular.js:5003:16
$controllerInit#http://localhost:5000/components/angular/angular.js:10866:24
nodeLinkFn#http://localhost:5000/components/angular/angular.js:9746:35
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9055:13
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9058:13
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9058:13
publicLinkFn#http://localhost:5000/components/angular/angular.js:8920:30
bootstrapApply/<#http://localhost:5000/components/angular/angular.js:1919:11
$eval#http://localhost:5000/components/angular/angular.js:18161:16
$apply#http://localhost:5000/components/angular/angular.js:18261:20
bootstrapApply#http://localhost:5000/components/angular/angular.js:1917:9
invoke#http://localhost:5000/components/angular/angular.js:5003:16
doBootstrap#http://localhost:5000/components/angular/angular.js:1915:5
bootstrap#http://localhost:5000/components/angular/angular.js:1935:12
angularInit#http://localhost:5000/components/angular/angular.js:1820:5
#http://localhost:5000/components/angular/angular.js:33367:5
trigger#http://localhost:5000/components/angular/angular.js:3431:5
controllers.js
angular.module('ghfzero',['firebase'])
.controller('testController', ['$scope',function($scope) {
var ref = firebase.database().ref();
var obj = $firebaseObject(ref);
ref.set({
first:"hello",
last:"world"
});
}])
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ghfzero">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<h1>firebase working ok with angular prelims</h1>
<form ng-controller="testController">
<input type="text" name="test" ng-model="angtest">
<input type="submit" value="add test">
<h2>{{angtest}}</h2>
<button ng-click="addMessage()">test db</button>
</form>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = ......
.........
firebase.initializeApp(config);
</script>
<!--Firebase 3.0.0 and above require angularfire ver ^2.3.0!-->
<!--Initializing Angular, Angular Ui Router, Angular Fire, jQuery!-->
<script src="components/angular/angular.js"></script>
<script src="components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="components/angularfire/dist/angularfire.js"></script>
<script src="components/jquery/dist/jquery.js"></script>
<script src="scripts/controllers.js"></script>
</body>
</html>
inject de $firebaseObject in controller like this:
...
.controller('testController', function($scope, $firebaseObject) {
...
Related
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
index.html: this is the html
<html ng-app="myapp">
<head>
<title>shruthi reddy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript">window.NRUM ||(NREUM={}),__nr_require=function(e,t...</script>-->
<script src="js/app.js"></script>
</head>
<body ng-controller="Controller">
<h1> ASHOK KUMAR PETLA</h1>
<P>VIJAYAWADA IS KING IS VANGAVEETI MOHAN RANGA. </P>
<button type="submit" ng-click="create()">swathi</button>
<button type="submit" ng-click="subject()">srisha</button>
<button type="submit" ng-click="delete()">ramya</button>
<button type="submit" ng-click="edit()">sunitha</button>
</body>
</html>
APP.JS: ui bootstrap in js file . u can send the correct answer or code. i have tried but not come the popup.
this is script of index.html
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
index.html and app.js .
pop up is not coming if the swathi is clicked.
Are you sure the templateUrl you have given that is correct or the html file is available?
Or make sure you have initialized all the required dependent modules like ui-bootstrap-tpls-0.12.1.js
I have created a plunkr for your code and that is working.
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'mypage.html',
});
}
}]);
See the plunkr here-
http://plnkr.co/edit/GRgjv8fyquOQirXwWaWQ?p=preview
You need to include the -tpls.js file aswell, that file will make your own templates go into $templates.cache so you can use your own.
I can't see that you've installed the tpls file.
Also shouldn't it be $uibModal instead of $modal?like so
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$uibModal', function($scope, $uibModal) {
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
Hi I am just learning the AngularJS, and trying to save cookies values
I have two html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="helloCtrl">
Hello <input type="text" ng-model="helloText"/>
<input type="button" ng-click = "redirectToTest()" value="Go" />
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
Hello {{cookiesText}}
</body>
</html>
test.js
var myApp = angular.module('myApp', ['ngCookies']);
var helloCtrl = myApp.controller('helloCtrl',
function ($scope, $cookies, $window) {
$scope.helloText = "Hello World!"
$scope.redirectToTest = function(){
$cookies.put('hello', $scope.helloText);
console.log("Added hello to cookies : "+ $cookies.get('hello'));
$window.location.href = "test.html";
}
});
var testCtrl = myApp.controller('testCtrl',
function ($scope,$cookies) {
$scope.cookiesText = '';
$scope.init= function(){
$scope.cookiesText = $cookies.get('hello');
}
});
I am adding some text into cookies and redirecting to test.html to display cookies value, but it lost somewhere ?
Is there $window.location.href reset cookies value ?
I just started with VS2015 ASP.Net5 using Angular. I get an error when using the angular retrieved by Bower:
Error: [ng:areq] Argument 'TextController' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=TextController&p1=not%20a%20function%2C%20got%20undefined
This is my html code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<!--works-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>-->
<script>
function TextController($scope) {
$scope.SomeText = "Go";
}
</script>
</body>
When I use the Angular Google provides it works like a charm.
Below is a what a picture of what was generated using Bower in VS
What am I missing?
UPDATE
This is the working version thanks to Claies:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<script>
angular.module('myApp', []).controller('TextController', function ($scope) {
$scope.SomeText = "Go";
});
</script>
</body>
</html>
Your controller cannot be global in the latest release of Angular, and, even if it should, you should try to modularise your design anyway.
Declare a module:
angular.module('myApp', [])
and register the controller onto the module:
angular.module('myApp')
.controller('TextController', function() { /*...*/ })
Finally, add the module to the ng-app directive:
<html ng-app="myApp">
What is wrong?
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
$(function(){
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
})
})
</script>
</body>
</html>
And error message in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.7/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.7%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...2) angular.js:36
But examples from the official site are working normal. I can't see the serious difference.
Change:
var app = app.module('SOO', ['ngRoute']);
To:
var app = angular.module('SOO', ['ngRoute']);
And remove the jQuery document ready handler that is wrapping your code:
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
From the documentation:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
Just remove Jquery statement $(function(){}), then everything works fine.
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
</body>
</html>