How is this working? Does AngularJS require any mention of the scripts for it to work?
I've always used the "controller as" syntax in AngularJS. However, I just purchased a template and there is NO MENTION of the controller in the HTML. There's no LoginCtrl as vm or any other mention of any back-end scripting.
$stateProvider.state('realLogin', {
url: '/real-login',
views: {
root: {
templateUrl: "app/auth/login/login.html",
controller: 'LoginCtrl'
}
},
data: {
title: 'Login',
rootId: 'extra-page'
}
})
And the HTML is...
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 text-center animated fadeInDown">
<div>
<h1 class="logo-name">My Orange</h1>
</div>
<h3>Welcome to My Orange</h3>
<p>Perfectly designed and precisely prepared admin theme with over 50 pages with extra new web app views.
</p>
<p>Login in. To see it in action.</p>
<form class="m-t" role="form" action="#">
<div class="form-group">
<input type="email" class="form-control" placeholder="Username" required="">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="">
</div>
<button type="submit" class="btn btn-primary btn-block m-b">Login</button>
<a ui-sref="account.forgot">
<small>Forgot password?</small>
</a>
<p class="text-muted text-center">
<small>Do not have an account?</small>
</p>
<a class="btn btn-sm btn-white btn-block" ui-sref="account.register">Create an account</a>
<br/>
<google-signin></google-signin>
<facebook-signin></facebook-signin>
<br/>
</form>
<p class="m-t">
<small>My Orange app framework base on Bootstrap 3 © 2014</small>
</p>
</div>
</div>
</div>
Related
How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.
I have used this code but the contents behind gets covered:
my main.html :
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<img src="img/dsd.png" style="width: 17px">
</button>
</span>
</div>
<a class="btn btn-success" ui-sref="app.login">Login</a>
<a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>
my app.js:
angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("app",{
url:"/app",
views:{
main:{
templateUrl:"templates/main.html",
controller:"appCtrl"
}
}
})
.state("app.register",{
url:"/register",
views:{
sub:{
templateUrl:"templates/register.html",
controller:"registerCtrl"
}
}
})
my modal:
<div id="y" class="modal-dialog">
<div>
<div class="modal-content">
<div class="modal-header btn-danger">
x
SignUp
</div>
<div class="modal-body">
<form ng-submit="register()">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" ng-model="Name" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" ng-model="UserName" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" ng-model="Phone" required>
</div>
<div class="form-group">
<label>Full Address</label>
<textarea class="form-control" ng-model="addr" required></textarea>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" ng-model="Email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="Pwd" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
Sudan Store.
</div>
</div>
</div>
</div>
One approach is to use the appendTo option:
From the Docs:
$uibModal's open function
options parameter
appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.
Use the appendTo option to append to an element that will be fully visible.
For more information, see
UI-Bootstap modal Directive API Reference
I'm trying to create an upload function using angularjs. I have watch and read few tutorials in the internet. Unfortunately all the tutorials are too complicated for me because I'm still new in this field.
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file"/>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
app.controller('postadCtrl', [
'$scope',
'auth',
function($scope, auth) {
$scope.currentUser = auth.currentUser;
$scope.posts = [];
$scope.upload = function(user) {
$scope.posts.push({
company_name: user,
car_type: $scope.newCar,
seaters: 5,
price: $scope.newPrice,
contact: 038880000,
location: $scope.businessArea
});
};
}
]);
So how do I do this in the simplest form and explanation? And how does my router and module will look like?
The output should look like this.
I have a problem with my angular application. I have a register page on my site. Normally when I get straight to the register page it works fine, after submitting the form is sent and user is registered. Problem appears when I for example load register page then go to login page and then again to register. In this case the form is not sent to server.
I tried to figure it out and even to repair by refreshing page after clicking register link but it didn't help.
I debug my application a little and found that it's recaptcha causing my problem. I use angular-recaptcha version 2.2.5; Tried to log the output of vcRecaptchaService.getResponse() but nothing showed in console.
Here is some code, where the problem may lay:
Request of form
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
$scope.formData.reCaptcha = vcRecaptchaService.getResponse();
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
Routes:
app.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/auth/login', {
controller: 'authLogin',
label: 'Logowanie',
templateUrl: 'app/components/authLoginView.html',
access: ['UNAUTH']
})
.when('/auth/register/', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/confirm', {
controller: 'authRegister',
label: 'Potwierdzenie rejestracji',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/resend', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
}]);
And some HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
<div class="form-group" show-errors>
<label for="email" class="col-md-3 control-label">E-mail:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="email" placeholder="E-mail"
ng-model="formData.email" name="username"
ng-required="true">
</div>
</div>
<div class="form-group" show-errors>
<label for="password" class="col-md-3 control-label">Hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="password" placeholder="Hasło"
ng-model="formData.password" name="password" ng-minlength="5"
ng-required="true" equals="{{ formData.confirmPassword }}">
</div>
</div>
<div class="form-group" show-errors>
<label for="confirmPassword" class="col-md-3 control-label">Powtórz hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz hasło"
ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5"
ng-required="true" equals="{{ formData.password }}">
</div>
</div>
<div class="form-group" show-errors>
<label class="col-md-3 control-label" for="userType">Rodzaj konta:</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle form-control"
id="userType" name="userType" dropdown-toggle ng-model="formData.userType"
ng-required="true">
{{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key, userType) in userTypes">
{{ ::userType }}
</li>
</ul>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam się z Regulaminem</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms2">Wyrażam zgodę na przetwarzanie moich danych w celu realizacji usług w ramach Serwisu i akceptuję Politykę Prywatności..</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms3">Wyrażam zgodę na przetwarzanie moich danych w celach marketingowych.</label>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>
Problem could be seen here: http://pze2.biuro.netivo.pl/
Answering to one of questions about ['UNAUTH'] in my routes. It is for allowing only users who are not logged in to enter this page.
Thanks to Vinny I managed to solve the problem.
The problem lies as he said in reCaptcha.getResponse() not getting right widget.
For those who will have same problem I put the solution in my code:
Request:
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
...
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha ng-model="formData.reCaptcha" key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>
I am trying to modify the Jhipster template by doing the following:
If the user is not authenticated , the authentication form is showing (instead of showing a link to the authentication page as it is set by default). I m showing it in the main.html view
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and modified apps.js :
.otherwise({
templateUrl: 'views/main.html',
controller: 'LoginController',
access: {
authorizedRoles: [USER_ROLES.all]
}
});
It works if I m not using the ng-switch-when="false" statement.
If I m using this statement, the value of $scope.password and $scope.login are "undefined" in the LoginController.
Of course this statement is mandatory if I want to show the authentication form only if the user is not authenticated.
I can't understand why.
If you can help me on this, it would be great.
Thanks.
It's a common gotcha with ng-switch and other directives that create sub-scopes. This should work:
<div class="row">
<div class="col-md-4">
<span class="hipster img-responsive img-rounded"></span>
</div>
<div class="col-md-8">
<h1 translate="main.title">Welcome, Java Hipster!</h1>
<p class="lead" translate="main.subtitle">This is your homepage</p>
<div ng-switch="authenticated">
<div class="alert alert-success" ng-switch-when="true"
translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
You are logged in as user "Admin".
</div>
<div ng-switch-when="false">
<div class="row">
<div class="col-md-4">
<h1 translate="login.title">Authentication</h1>
<div class="alert alert-danger" ng-show="authenticationError" translate="login.messages.error.authentication">
<strong>Authentication failed!</strong> Please check your credentials and try again.
</div>
<form class="form" role="form" ng-submit="login()">
<div class="form-group">
<label for="username" translate="global.form.username">Login</label>
<input type="text" class="form-control" id="username" placeholder="{{'global.form.username.placeholder' | translate}}" ng-model="$parent.username">
</div>
<div class="form-group">
<label for="password" translate="login.form.password">Password</label>
<input type="password" class="form-control" id="password" placeholder="{{'login.form.password.placeholder' | translate}}"
ng-model="$parent.password">
</div>
<div class="form-group">
<label for="rememberMe">
{{"login.form.rememberme" | translate}}
<input type="checkbox" class="checkbox inline_class" id="rememberMe"
ng-model="$parent.rememberMe" checked>
</label>
</div>
<button type="submit" class="btn btn-primary" translate="login.form.button">Authenticate</button>
</form>
<p></p>
<div class="alert alert-warning" translate="global.messages.info.register">
You don't have an account yet? Register a new account
</div>
</div>
</div>
</div>
</div>
</div>
Instead of $parent you may bind values to an object, but then you will need to modify Jhipster's LoginController accordingly (and also make sure to update login.html or create a variant of the controller for the main screen only)
MY issue is this:
When I request the data from the server this sent the data correctly but in LoginController after doing the validation I'm trying to populate the user's username and email but those variables are not being printed in the template. However if I just send those variables in a simple JSON such as $scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}]; it's working fine, what am I doing wrong? Is there some issue with ng-repeat directive?
Thanks in advance to whom can help me out with this issue.....
ps: I'm using sillex and ng-resource just in case
<body ng-controller="LoginController">
<div class="col-xs-3 details-user">
<div class="col-xs-1">
<img src="web/img/avatar.jpg" alt="..." class="img-circle">
</div>
<div class="col-xs-2">
<ul>
<li ng-repeat="detail in details">
{{detail.username}} -- {{detail.email}}
</li>
</ul>
</div>
</div>
Controller:
function LoginController($scope, Login) {
var currentResource;
$scope.login = function () {
Login.query({email: $scope.email}, function success(data){
$scope.details = data;
//$scope.details = [{ 'username':'Karman', 'username':'karman#mail.com'}];
});
}
}
Form:
<!-- Main DIV -->
<div id="login" class="login-main">
<div class="form-wrap">
<div class="form-header">
<i class="fa fa-user"></i>
</div>
<div class="form-main">
<form>
<div class="form-group">
<input ng-model="email" type="text" class="input-large" placeholder="Tu email aqui..." required>
<input ng-model="password" type="password" class="input-large" placeholder="Tu password aqui..." required>
</div>
<button ng-click="login()" ng-show='addMode' class="btn btn-success">Sign In</button>
</form><!-- end form -->
</div><!-- end div form-main -->
<div class="form-footer">
<div class="row">
<div class="col-xs-7">
<i class="fa fa-unlock-alt"></i>
Forgot password?
</div>
<div class="col-xs-5">
<i class="fa fa-check"></i>
Sign Up
</div>
</div>
</div>
</div>
</div>