When displaying the sign in message from the main.js class, it displays on the webpage as: . The controller also isn't registering for other functions in the main.js class. Please let me know if I need to add anything else. Any help would be appreciated.
Here is my html class:
<!DOCTYPE html>
<html ng-app="ShoppingApp">
<head>
<title>Sign In</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-controller="OwnerController as ownerCtrl">
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="login.html">Log In</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<section id="header">
<h1>Owner Login</h1>
<p></p>
</section
>
<section class="container">
<div class="innerContainer">
<h2>Account Details</h2>
<form class="form-inline" ng-submit="ownerCtrl.signIn(username, password)">
<label for="username">Username:</label>
<br>
<input id="username" type="text" ng-model="username" name="username">
<label for="password">Password:</label>
<br>
<input id="password" type="password" ng-model="password" name="password">
<button type="submit">Log In</button>
</form>
</div>
</section>
<p>If you don't have an account then you can <a id="register-link" href="ownerSignUp.html">create one.</a></p>
<footer>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-envelope"></a>
</footer>
</body>
</html>
Here is my angular javascript class:
var module = angular.module('ShoppingApp', ['ngResource', 'ngStorage']);
module.factory('ownerRegisterAPI', function ($resource) {
return $resource('/api/owners/register');
});
module.factory('ownerSignInAPI', function ($resource) {
return $resource('/api/owners/:username');
});
module.controller('OwnerController', function (ownerRegisterAPI, $window, ownerSignInAPI, $sessionStorage) {
this.signInMessage = "Please sign in to continue.";
// this.checkSignIn = function () {
// // has the customer been added to the session?
// if ($sessionStorage.owner) {
// this.signedIn = true;
// this.welcome = "Welcome " + $sessionStorage.owner.username;
// } else {
// this.signedIn = false;
// }
// };
this.registerOwner = function (owner) {
ownerRegisterAPI.save(null, owner,
// success callback
function () {
$window.location = 'ownerLogin.html';
},
// error callback
function (error) {
console.log(error);
}
);
};
let ctrl = this;
this.signIn = function (username, password) {
// get customer from web service
ownerSignInAPI.get({'username': username},
// success callback
function (owner) {
// also store the retrieved customer
$sessionStorage.owner = owner;
// redirect to home
$window.location = 'index.html';
},
// fail callback
function () {
ctrl.signInMessage = 'Sign in failed. Please try again.';
}
);
};
this.signOut = function () {
delete $sessionStorage.owner;
$window.location = 'index.html';
};
});
Aucun commentaire:
Enregistrer un commentaire