In an attempt to learn AngularFire, I've been messing around with AngularFire user authentication methods. On the Firebase website, an example is given that, when I plug in my Firebase address in the proper place, works. When I copy and paste the code into Notepad++ and attempt to run it that way, the HTML works, but none of the Javascript does. I added an alert box to the Javascript, and on opening the page, the alert box popped up, but none of the rest of the JS worked. I feel like I'm missing something very obvious. What am I doing wrong?
Thanks for any help!
My code is as follows:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"> </script>
</head>
<body>
<script>
var app = angular.module("sampleApp", ["firebase"]);
// let's create a re-usable factory that generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://xxxxx.firebaseio.com/?page=Auth");
return $firebaseAuth(ref);
}
]);
// and use it in our controller
app.controller("SampleCtrl", ["$scope", "Auth",
function($scope, Auth) {
$scope.createUser = function() {
$scope.message = null;
$scope.error = null;
Auth.$createUser({
email: $scope.email,
password: $scope.password
}).then(function(userData) {
$scope.message = "User created with uid: " + userData.uid;
}).catch(function(error) {
$scope.error = error;
});
};
$scope.removeUser = function() {
$scope.message = null;
$scope.error = null;
Auth.$removeUser({
email: $scope.email,
password: $scope.password
}).then(function() {
$scope.message = "User removed";
}).catch(function(error) {
$scope.error = error;
});
};
}
]);
</script>
<div ng-app="sampleApp" ng-controller="SampleCtrl">
Email: <input type="text" ng-model="email">
Password: <input type="text" ng-model="password">
<br><br>
<button ng-click="createUser()">Create User</button>
<br><br>
<button ng-click="removeUser()">Remove User</button>
<p ng-if="message">Message: <strong>{{ message }}</strong></p>
<p ng-if="error">Error: <strong>{{ error }}</strong></p>
</div>
</body>
</html>
I think what has happened is that you have used the ng-app directive twice in your html. If you look at the Angular documentation for ng-app, the first ng-app tag is auto bootstrapped as an application, any additional ng-app have to be manually loaded. Also, you cannot nest applications in a page. When I tried to run your application the SampleCtrl controller is undefined.
I've removed the first ng-app directive and the rest of your code seems to work fine in this plunker I've created.
<!DOCTYPE html>
<!--
ng-app directive is already delclared in the body, removing this one
<html ng-app>
-->
<html>
<head>
...
</head>
<body>
<div ng-app="sampleApp" ng-controller="SampleCtrl">
...
</body>
</html>
Related
I'm new to AngularJS and i want to redirect my Application from Login.html to Homepage.html. I've read a lot and i found two ways for do that:
the first one consists in using $window.location.hrefand it works perfectly
the second one consist in using $location.url or $location.pathand it doesn't work, it ad just /homepage.html to my actual URL.
How can i solve this?
Here's my code.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="loginController">
<label>Username</label><input type="text" name="username" ng-model="username"><br>
<label>Password</label><input type="password" name="password" ng-model="password"><br>
<button ng-click="login()">Login</button>
<p>{{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('loginController', ['$scope', '$location', function($scope, $location){
$scope.result = null;
$scope.login = function(){
$scope.result = "Logged in";
$location.path('#/localhost/homepage.html').replace();
$scope.apply();
}
}])
</script>
</body>
</html>
Thanks you all anticipatedly!
Not sure if it's important or not, but try changing $scope.apply() to $scope.$apply().
Υου should have:
$location.path('/homepage');
Or:
$location.path('/app/homepage');
I'm approaching to AngularJS, it seemed to be easy, but I understood that it isn't.
I want to do a simple login without authentication, just a login that you insert username and password, click on the login button and a message appears and notifies user that they have logged in.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Login Prova</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<h1>Login</h1>
<div ng-app="mainApp" ng-controller="AppController">
Inserisci username<input type="text" ng-model="username1">
Inserisci password<input type="password" ng-model="password">
<button ng-click="stampa()">Click!</button>
<p>Ciao {{result}}</p>
</div>
<script>
var mainApp = angular.model("mainApp",[]);
mainApp.controller('AppController',['$scope', function($scope){
$scope.result = null;
$scope.stampa = function(){
$scope.result = "Logged in";
}
}]);
</script>
</body>
</html>
Thanks you all for the possibile solution.
You have a typo. There is no angular.model function. You meant to put angular.module.
var mainApp = angular.module("mainApp",[]);
I would like to know if it is possible to add angularjs to the custom app in Rally, or as alternative how to call REST services from a Rally Custom app. Can someone help me with this? Thanks in advance.
Best Regards
Here is an example of making a WS API call from an Angular app from inside Rally's custom page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<div ng-controller="MyController" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request to Rally</button>
<br/>
Data from server: {{myData.fromServer}}
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("https://rally1.rallydev.com/slm/webservice/v2.0/defect");
responsePromise.success(function(data, status, headers, config) {
$scope.myData.fromServer = data.QueryResult.Results[0];
console.log(data);
});
responsePromise.error(function(data, status, headers, config) {
alert("AJAX failed!");
});
}
} );
</script>
</div>
</body>
</html>
Using external CDN within app is expected to produce Mixed Content error if accessing over http. It works if https is used. Here is the first query result (a defect from my current project) is returned.
I have the following two files in Angular, wanting to create a simple Login application. The first one is Login.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> AngularJS Login SPA</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="loginCtrl">
<form action="/" id="myLogin">
Username: <input type="text" name="username" id="username" ng-model="username"><br/>
Password: <input type="password" name="password" id="password" ng-model="password"><br/>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
</body>
</html>
and the second one is controller.js:
var app = angular.module("mainApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when ('/', {
templateUrl: 'login.html'
})
.when ('#/dashboard',{
resolve:{
"check":function($location, $rootScope){
if (!$rootScope.loggedIn)
{
$location.path('/dashboard');
}
else{
}
}
},
templateUrl: 'dashboard.html'
})
.otherwise ({
redirectTo: '/'
})
});
app.controller('loginCtrl', function($scope, $location, $rootScope){
$scope.submit = function(){
if($scope.username == 'admin' && $scope.password == 'admin')
{
$rootScope.uname = $scope.username;
$rootScope.password = $scope.password;
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else{
alert('wrong stuff');
}
};
});
The thing is after I succesfully enter the texts 'admin' and 'admin' on username and password (if I click otherwise it correctly shows me an alert), the address changes to .../index.html#/dashboard but it doesn't load me the page dashboard.html, a simple page I created for this app, located in the same folder where index.html is.
Any idea on how it can show me dashboard.html after I succesfully login with the two texts?
Any help could be highly appreciated.
I found out what was the problem.
I had to test the application in Mozilla because Google Chrome doesn't support SPAs (Single Page Applications) that can match a running server.
I'm new to AngularJS, I would like to update my data.json but that I don't know where my file users.json should be and I have this error:
Error: $injector:modulerr
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0
Heres my code :
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', ['ngResource']);
app.factory('User', ['$resource',
function($resource){
return $resource('/users/:userId', {userId:'#id'},
{
'update': {method: 'PUT'}
}
);
}
]);
app.controller('UsersCtrl', function ($scope, User) {
$scope.users = User.query();
$scope.validate=function(user) {
user.$update();
}
$scope.delete=function(user) {
user.$delete();
}
$scope.create = function (newUserName) {
var user = new User();
user.name = newUserName;
user.$save();
$scope.users.push(user);
}
});
</script>
<body ng-app="myApp" ng-controller="UsersCtrl">
<ul>
<li ng-repeat="user in users">
<input type="text" ng-model="user.name" />
<button ng-click="validate(user)">Valider</button>
<button ng-click="delete(user)">Supprimer</button>
</li>
</ul>
Nouveau utilisateur :
<input type="text" ng-model="newUserName" />
<button ng-click="create(newUserName)">Créer</button>
</body>
</html>
Anyone have an idea please?
You forgot to add the ngResource file.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
From ngResource page:
You can download this file from the following places:
Google CDN
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-resource.js
Bower
e.g. bower install angular-resource#X.Y.Z
code.angularjs.org
e.g. "//code.angularjs.org/X.Y.Z/angular-resource.js" where X.Y.Z
is the AngularJS version you are running.
Working Fiddle: http://jsfiddle.net/softvar/rq9eupee/1/
Add angular-resource script below the angular.js file depending upon the version you need within head tag.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
If you want to read some data from the file users.json, have it on server(Backend) and populate it as per your requirements. If you simply want to show the list of users, fetch it from server, server will read the file and returns it contents. If for some purpose, you need to read the file and display it contents on front-end, have it inside your js/ folder. But assuming, you read it to send the response, it should be on backend.