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
Related
controller.js code
angular.module('Zoho.controllers', [])
.controller('loginController', function($scope, $state) {
$scope.login = function(loginData) {
console.log(loginData);
}})
.controller('signUpController', function($scope, $state) {
$scope.signUp = function(signUpData) {
console.log(signUpData);
}})
app.js
angular.module('Zoho',
['ui.router','Zoho.controllers','Zoho.services','Zoho.directive'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
$stateProvider
.state('login',{
url: '/login',
templateUrl : 'pages/login.html',
controller : 'loginController'
})
.state('signUp',{
url: '/signup',
templateUrl : 'pages/login.html',
controller : 'signUpController'
});
Here only the login part is executing but signup is not working, Im using both signup and login code in a single page with ng-show and ng-hide methods
login.html
<div class="container-fluid login" ng-show="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Login</h1>
<input placeholder="Username" type="text" ng-model="loginData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="loginData.mobile" required="required"/>
<button class="btn-signUp" ng-click="login(loginData)">Login <span class="glyphicon glyphicon-log-in"></span></button>
<p>New User <button class="btn-link" ng-click="showDiv=false">SignUp</button></p>
</div>
</div>
<div class="container-fluid login" ng-hide="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Register</h1>
<input placeholder="Name" type="text" ng-model="signUpData.name" required="required"/>
<input placeholder="Username" type="text" ng-model="signUpData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="signUpData.mobile" required="required"/>
<input placeholder="Email" type="email" ng-model="signUpData.email" required="required"/>
<button class="btn-signUp" ng-click="signUp(signUpData)">SignUp <span class="glyphicon glyphicon-log-in"></span></button>
<p>Already User<button class="btn-link" ng-click="showDiv=true">Login</button>
</div>
</div>
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.
I've been trying to figure this out for 3 days ....
I have an admin module:
'use strict';
angular.module('aaBlogger.admin',['aaBlogger.admin.controllers']);
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
controller: 'AdminController',
templateUrl: 'modules/admin/views/admin.home.html'
}).state('admin.postNew',{
url: '/post/new',
controller: 'PostCreationController',
templateUrl: 'modules/admin/views/admin.new.post.html'
}).state('admin.postUpdate',{
url: '/post/:id/edit',
controller: 'PostUpdateController',
templateUrl: 'modules/admin/views/admin.update.post.html'
}).state('admin.postViewAll',{
url: '',
controller: 'PostListController',
templateUrl: 'modules/admin/views/admin.all.posts.html'
});
}]
);
Admin home page loads into index.html just fine. However I cant figure out how to load admin.postNew state template into admin.home.html template
Admin home template
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked on-click-make-active">
<li><a ui-sref="admin.postViewAll">View All Posts</a></li>
<li class="active"><a ui-sref="admin.postNew">Add Post</a></li>
</ul>
</div>
<div class="col-xs-9 border-left">
<div ui-view></div>
</div>
</div>
Just in case here is admin.postNew template
<div class="row" ng-controller="PostCreationController">
<div class="col-xs-8">
<form name="newPostForm" class="form-horizontal" novalidaterole='form'>
<div class="form-group" ng-class="{'has-error':postForm.title.$dirty && postForm.title.$invalid}">
<label for="title" class="col-sm-2 control-label">Post Title</label>
<div class="col-sm-10">
<input type="text" name="title" ng-model="post.title" ng-required="true" class="form-control" id="title" placeholder="Title">
<span>Permalink:<i>/posts/[id]/{{post.title | permalink}}</i></span> <br/>
<span class="error-message" ng-show="postForm.title.$dirty && postForm.title.$invalid">Title is mandatory boss!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.content.$dirty && postForm.content.$invalid}">
<label for="content" class="col-sm-2 control-label">Content</label>
<div class="col-sm-10">
<textarea cols="8" rows="6" name="content" class="form-control" ng-model="post.content" ng-required="true" id="content" placeholder="Content"></textarea>
<span>{{post.content | wordcount}} words</span> <br/>
<span class="error-message" ng-show="postForm.content.$dirty && postForm.content.$invalid">You need to have some content!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.tags.$dirty && postForm.tags.$invalid}">
<label for="tags" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
<input type="text" name="tags" class="form-control" id="tags" ng-pattern="/^[\w,]+$/" ng-model="post.tags" placeholder="Comma separated tags"/>
<span class="error-message" ng-show="postForm.tags.$dirty && postForm.tags.$invalid">Sorry! No special characters allowed here.</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.keywords.$dirty && postForm.keywords.$invalid}">
<label for="keywords" class="col-sm-2 control-label">Keywords</label>
<div class="col-sm-10">
<input type="text" name="keywords" class="form-control" id="keywords" ng-pattern="/^[\w,]+$/" ng-model="post.keywords" placeholder="Comma separated keywords"/>
<span class="error-message" ng-show="postForm.keywords.$dirty && postForm.keywords.$invalid">Sorry! No special characters allowed here</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success" ng-disabled="postForm.$invalid">{{buttonText}}</button>
</div>
</div>
</form>
</div>
</div>
I had a similar problem. its solution
admin.home.html must have tag <div ui-view="content"></div>
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
templateUrl: '<div ui-view=""></div>'
})
.state('admin.postNew',{
url: '/post/new',
views: {
'': {
templateUrl: 'modules/admin/views/admin.home.html',
controller: 'AdminController'
},
'content#admin.postNew': {
templateUrl: 'modules/admin/views/admin.new.post.html',
controller: 'PostCreationController'
}
}
})
}]
);
I have a mobile app screen which is built with ionic. The following image show the screen for that.
Once I clicked the contacts button in the home screen in the mobile It will load just a white blank screen. But when I run the app through the browser It is showing. The code for the above screen and the code for the home screen are as follows. Please let me know where I got wrong. I am very new to ionic framework.
Thanks.
=============================
Code for Home Screen - Html
<ion-content id="homeContent" scroll="false" class="padding">
<div class="row">
<span class="text-center blackBold">Menu</span>
Logout
</div>
<div class="row" id="buttonsFirstWrapper">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/contacts_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/groups_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/de_duplication_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/import_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/export_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/configuration_btn.png" /></div>
</div>
</ion-content>
========================
Code for the internal screen which loads once click on the contacts big button
<ion-content id="homeContent" scroll="false" class="padding">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="New Contact" icon-off="ion-person-add" icon-on="ion-person-add" href="#/contacts">
<ion-nav-view name="tab-chats">
<div class="row">
Home
<span class="text-center blackBold">New Contact</span>
Logout
</div>
<div id="createContact" class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First name</span>
<input type="text" placeholder="First name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Preferred Name</span>
<input type="text" placeholder="Preferred Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">NRIC</span>
<input type="text" placeholder="NRIC">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Phone</span>
<input type="tel" placeholder="Phone">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Mobile</span>
<input type="tel" placeholder="Mobile">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Block/House No:</span>
<input type="text" placeholder="Block/House No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Unit No:</span>
<input type="text" placeholder="Unit No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Street Name</span>
<input type="text" placeholder="Street Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Postal Code</span>
<input type="text" placeholder="Postal Code">
</label>
<label class="item item-input" style="height: 40px;">
<span class="input-label">Country</span>
<select
style="width: 100%; max-width: 100%; height: 40px;"
ng-model="engineer.currentActivity"
data-ng-options="cL.countryCode as cL.countryName for cL in CountryList">
</select>
</label>
</div>
<div id="loginBtnWrapper" class="col text-center">
<button style="margin-top: -15px" id="loginBtn" class="button button-positive">Create</button>
</div>
</ion-nav-view>
</ion-tab>
<ion-tab title="List Contacts" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/contacts">
<ion-nav-view name="tab-dash">
<div class="row">
Home
<span class="text-center blackBold">Contacts</span>
Logout
</div>
<div id="contactListing" class="list">
<div ng-repeat="eachContact in AllContacts" class="item item-button-right">
<h2 class="blackBold">{{ eachContact.FNM }}</h2>
<p class="blackBold">{{ eachContact.EML }}</p>
<p class="blackBold">{{ (eachContact.PNM != "" ? '(' + eachContact.PNM + ')' : "") }}</p>
Call
</div>
</div>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
===========================================
My application.js is as follows
angular.module('XXXXXXXXXX', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('contacts', {
url: '/contacts',
templateUrl: 'templates/contacts.html',
controller: 'ContactsCtrl'
})
.state('contact-details', {
url: '/contact-details',
templateUrl: 'templates/contact-details.html',
controller: 'ContactDetailsCtrl'
})
.state('logout', {
url: '/logout',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise("/");
})
.controller('HomeCtrl', function($scope, $http, $state, $ionicPopup, AuthService) {
AuthService.isLoggedIn('home');
})
.controller('ContactsCtrl', function($scope, $http, $state, $ionicPopup, AuthService, CommonServices, $ionicLoading) {
var contactList = null,
tempStr = "",
jsonStr;
$scope.AllContacts = [];
$scope.CountryList = [];
AuthService.isLoggedIn('contacts');
$scope.CountryList = CommonServices.retrieveCountryList();
$ionicLoading.show();
$http.get('SERVICE_CALL').success(function(data) {
tempStr = data.substr(8880, data.length);
jsonStr = JSON.parse(tempStr);
if (jsonStr.Contacts.length > 0){
angular.forEach(jsonStr.Contacts, function (obj) {
if ((typeof obj.FNM != "undefined") && (obj.FNM != null) && (obj.FNM != "")){
$scope.AllContacts.push(obj);
}
});
$ionicLoading.hide();
}
});
});
Some weeks ago, I've got a similar problem with my SPA (angualar.js, BootStrap) hosted inside SalesForce, on my iPad but not on my Desktop.
Sometimes, clicking on a button or doing something finished by a empty (white) screen...
I'm not sure it is the same problem than yours, but after some test/research, I've found that the problem was triggered by having a div element (filled with a ng-repeat)with a height greater than screen height inside a main div with height and width set as 100% (google maps).
To resume, when the ng-repeat return to much items, the container div growths outside the main div
I know i have already asked the same question but i am getting nowhere with this problem..I am trying to navigate from login page to next page...
login.html
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
</form>
</div> <!-- /container -->
</div>
</body>
my app file is
'use strict';
//Define Routing for app
var applog = angular.module('myApp',['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'html/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: 'html/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and the controller is
applog.controller("LoginController", function($scope, $location){
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "html/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
now when i click on the login button the url is getting generated but it just changes the url in the url tab and nothing happens i.e the page is not getting refreshed or navigating to the next page....can someone help plz...
just enter the path not with .html, like this
$location.path( "/login" );