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",[]);
Related
I've not worked on angularJS. I'm trying to navigate to a different page using button onclick functionality.
<html>
<head>
<script src="js/angular.min.js"></script>
</head>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<body ng-app="myapp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click</button>
</div>
<script src="script.js"></script>
</body>
</html>
Here is the JS code
var VLogin = angular.module('myapp',[]);
VLogin.controller('TestCtrl', function($scope) {
$scope.clicked = function(){
window.location = "#/index.html";
};
});
Try this:
$scope.clicked = function(){
window.location.href = "#/index.html";
};
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 want to save the current state of check box and reload it when open the page next time.
AngularJS:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
var init = function () {
$scope.check = $window.localStorage.getItem("app3");
};
init();
$scope.Save = function () {
$window.localStorage.setItem("app3", $scope.check);
}
});
HTML:
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular-1.4.9.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input id="check1" type="checkbox" ng-model="check" />
<input type="button" value="Save" ng-click="Save()" />
</div>
</body>
</html>
Dont use jquery with angular.
Attach a ng-model to your input box like so : and you can access the value of the input in your controller using $scope.check
your local storage setting will be like so :
$window.localStorage.setItem('app3',$scope.check);
Thats it! Kindly go through angular tutorials or their documentation to understand how angular works.
Can anyone tell me how can I do that please?
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form.one" ng-submit="submitForm()">
<input ng-model="name">
<input type="submit">
</form>
<p>Hello {{name}}!</p>
</body>
And my app.js is
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {
var data = form.one.name;
};
});
How can I save input to the data variable? Is it possible to save on keypress?
To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):
<body ng-controller="MainCtrl">
<form novalidate>
<input ng-model="name">
<!-- The method for submitting the data goes on the button. -->
<!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
<input type="submit" ng-click="submitForm(name)" value="Click me!">
</form>
<p>Hello {{name}}!</p>
<!-- This bit of code is to display the results of adding names to the array in the browser window: -->
<pre>{{ data }}</pre>
</body>
Here's the Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
// I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
$scope.data = [];
// Now, whenever the button is clicked, this method is run.
// It then stores the name in the 'data' array defined above.
$scope.submitForm = function(name) {
$scope.data.push(name);
};
});
Try this for it to show straight after typing:
<body ng-controller="myApp">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('myApp', function ($scope) {
$scope.name = $scope.name;
console.log($scope.name)
});
Small little JSFiddle for this:
https://jsfiddle.net/joshdmiller/HB7LU/
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>