i am trying to create a login application with create account option.When i run the ionic serve i get a white screen.
Heres code i have done so far
(am totally new to this stuff )
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view>
<ion-content>
<div class="login-image">
<img src="../img/img3.jpg" width="100%" class="padding">
</div>
<div class="padding">
<form ng-submit="doLogin()" >
<div class="list">
<label class="item item-input">
<span class="input-label"></span>
<input type="text" ng-model="loginData.username" placeholder="Username">
</label><br>
<label class="item item-input">
<span class="input-label"></span>
<input type="password" ng-model="loginData.password" placeholder="Password">
</label><br>
<div style=" text-align: right;">
Forgot Password
</div><br>
<label>
<button class="button button-block button-positive" type="submit" href = "template/dashboard.html">Log in</button>
</label>
<br>
<div style=" text-align: center;">
Create Account
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
createaccount.html
<ion-view>
<ion-content>
<div>
<form name="createaccountform" class="padding">
<div>
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" name="firstname" placeholder="First Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" name="lastname" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" name="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Username</span>
<input type="text" name="Username" placeholder="Username">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Password</span>
<input type="password" name="password" placeholder="Password">
</label>
<label>
<button class="button button-block button-positive" type="submit" href="template/login.html">Create Account </button>
</label>
</div>
</form>
</div>
</ion-content>
</ion-view>
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('index',{
url: '/index',
abstract: true,
templateUrl: '/index.html'
})
.state('login',{
url: '/login',
templateUrl: 'templates/login.html'
})
.state('createaccount',{
url: '/createaccount',
templateUrl: 'templates/createaccount.html'
});
//allows for fallback when page not found or not exist
$urlRouterProvider.otherwise('templates/login.html');
});
Dont know what am dong wrong but i really need a guide on this.
After of run your command, need to access to the following URL to see your login page:
http://localhost:8000/login
The routing is handled in your app.js file throughout state manager.
I suggest taking at look at the official documentation to understand how works.
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 have troubles understanding how it works... basically when I submit my form, it is validated without checking the required inputs nor anything else.
I've set the 'novalidate' attribute to disable the HTML5 validation, then I've set all my fields as 'required' (same for my mail input with an email validation), and I'm using 'ngMessages' from Angular to check the inputs (is that even necessary??). But I can still submit the form without any field filled in... What am I doing wrong? Could it come from the fact that I use ng-submit and not ng-click?
Any help is appreciated !
https://jsfiddle.net/WebMoutarde/n1mocvco/
<div ng-controller="MyCtrl">
<form name="form" novalidate ng-submit="vm.signup()">
<div class="list">
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Nom</span>
<input type="text" name="nom" ng-model="vm.nom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Prénom</span>
<input type="text" name="prenom" ng-model="vm.prenom" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mail</span>
<input type="email" name="mail" ng-model="vm.mail" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Mot de passe</span>
<input type="password" name="password" ng-model="vm.password" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
<label class="item item-input item-stacked-label noborder">
<span class="input-label">Confirmez votre mot de passe</span>
<input type="password" name="passwordCheck" ng-model="vm.passwordCheck" required>
</label>
<hr style="border-style: solid;margin-left: 16px;margin-right: 16px;border-color: #e8e8e8;"/>
</div>
<div ng-messages="form.$error" role="alert">
<p style="text-align: center;" ng-message="required">You must fill in all fields</p>
<p style="text-align: center;" ng-message="email">Your email address is invalid</p>
</div>
<div class="item noborder">
<button class="button button-block button-positive" type="submit" >Créer un compte</button>
</div>
</form>
</div>
I've seen many SO questions about this but I still missing something...
You could disabled form submit button till form gets into valid state by using ng-disabled directive on form button
<button class="button button-block button-positive"
type="submit"
ng-disabled="form.$invalid">
Créer un compte
</button>
Or even better would be verify form has been valid or ng-submit method and then call your signup method of controller like below.
ng-submit="form.$valid && vm.signup()"
I am trying to add a controller to this state but as soon as i add the "ng-controller" attribute, this state stops working. I need to login a user as soon as it is authorized through firebase but i am unable to do so because of this issue. Have already initialized the app with ng-app.
<!--Sign In-->
<script type="text/ng-template" id="signin.html">
<ion-view view-title="Sign In">
<ion-content ng-controller="loginCtrl">
<form name="login" novalidate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="email" placeholder="xyz#something.com" name="email" ng-model="email" ng-minlength="5" required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" placeholder="******" name="pass" ng-model="pass" ng-minlength="6" required>
</label>
</div>
<div class="padding">
<p ng-show="login.email.$error.required && login.email.$dirty && login.email.$touched">*Email is required</p>
<p ng-show="login.email.$invalid && !login.email.$pristine">*Email not valid</p>
<p ng-show="login.pass.$error.required && login.pass.$dirty && login.pass.$touched">*Password is required</p>
<p ng-show="login.pass.$error.minlength">*Password must be longer than 6 characters</p>
</div>
<div class="padding">
<button class="button button-block button-royal" ng-disabled="login.$invalid">Sign In</button>
</div>
</form>
</ion-content>
</ion-view>
</script>
<!--End Sign In-->
And this is the js code for states
app.config(function($stateProvider, $urlRouterProvider){
//main route
$stateProvider.state("main",{
url: "/",
templateUrl: "main.html"
});
//signin route
$stateProvider.state("signin",{
url: "/signin",
templateUrl: "signin.html",
controller: "loginCtrl"
});
//signup route
$stateProvider.state("signup",{
url: "/signup",
templateUrl: "signup.html"
});
$urlRouterProvider.otherwise("/");
})
Controller has to be declared once and it would be cleaner to declare in the config function.So remove ng-controller="loginCtrl" from signin.html
Issue: I have a simple add item form that adds a picture from the phone's album in a view. For some reason, after adding ion-content scroll="true", the page still doesn't allow for scrolling.
Also, I've set $ionicScrollDelegate to refresh in the controller. Thanks!
<ion-view title="Add Item">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<!-- <ion-scroll direction="y" style="height: 800px;"> -->
<ion-pane>
<div class="row">
<div class="col text-center">
<button class="button button-calm" ng-click="getPhoto()"><i class="ion-camera"></i> Select Photo</button>
</div>
</div>
<div class="list card" ng-show="item.pic">
<div class="item">
<img class="full-image" src="data:image/jpg;base64,{{item.pic}}">
</div>
</div>
<form ng-submit="submitItem()" name="newItemForm" novalidate>
<label class="item item-input">
<span class="input-label" type="text">* Designer: </span>
<input type="text" ng-model="item.designer" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Type/Collection: </span>
<input type="text" ng-model="item.collection" ng-required="true">
</label>
<p ng-show="newItemForm.item.collection.$error.required">Type/Collection Required</p>
<label class="item item-input">
<span class="input-label" type="text">* Color: </span>
<input type="text" ng-model="item.color" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Size: </span>
<input type="text" ng-model="item.size" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">Material: </span>
<input type="text" ng-model="item.material">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Condition: </span>
<input type="text" ng-model="item.condition" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Description: </span>
<textarea type="text" ng-model="item.description" ng-required="true"></textarea>
</label>
<p ng-show="newItemForm.$invalid" class="warning">*Items must be filled in to Add Item</p>
<div class="row">
<div class="col text-center">
<button type="submit" class="button button-balanced" ng-disabled="newItemForm.$invalid"><i class="ion-plus"></i> Add Item</button>
</div>
</div>
</form>
</ion-pane>
<!-- </ion-scroll> -->
</ion-content>
</ion-view>
In my page below everything is working except for the user.productNumber input at the bottom. What I mean is that all the "required" fields are keeping the "Create Account" button disabled but it's like the productNumber input is being ignored. How can I get this working?
<ion-view title="Sign Up">
<ion-content>
<form name="signUpForm">
<div class="list">
<label class="item item-input item-stacked-label">
<input data-ng-model="user.email" data-ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" type="email" placeholder="user#mail.net" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.password" type="password" placeholder="password" required>
</label>
<label class="item item-input item-stacked-label">
<input data-ng-model="user.passwordAgain" type="password" placeholder="password (again)" required>
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input data-ng-model="user.newsletter" type="checkbox" checked>
</label>
Weekly Newsletter
</li>
<label class="item item-input item-stacked-label">
<input data-ng-modal="user.productNumber" data-ng-pattern="/^[a-zA-Z0-9-]{8}$/" type="text" placeholder="Product Number" required>
</label>
<button data-ng-click="createAccountClick()" data-ng-disabled="signUpForm.$invalid" class="button button-full button-positive">
Create Account
</button>
</div>
</form>
</ion-content>
</ion-view>
This is because you mispelled data-ng-model with data-ng-modal.
Simply change:
data-ng-modal="user.productNumber"
with
data-ng-model="user.productNumber"