This is what I get along with a blank screen. I want a login page where people can register and use their registration to log into the app.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either
misspelled the module name or forgot to load it. If registering a module
ensure that you specify the dependencies as the second argument.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Firebase Database -->
<script src="https://www.gstatic.com/firebasejs/3.8.0/firebase.js">
</script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA2D9aQVQEfeKTt1duY1s2kd9zLgTDeHZY",
authDomain: "health-3d3fd.firebaseapp.com",
databaseURL: "https://health-3d3fd.firebaseio.com",
projectId: "health-3d3fd",
storageBucket: "health-3d3fd.appspot.com",
messagingSenderId: "339252162124"
};
firebase.initializeApp(config);
</script>
<!-- IF using Sass (run gulp sass first), then uncomment below and
remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Controllers.js
angular.module("starter")
.controller('LoginCtrl',function($scope,$firebaseAuth,$rootScope,$ionicHistory,
sharedUtils,$state,$ionicSideMenuDelegate) {
$rootScope.extras = false; // For hiding the side bar and nav icon
// When the user logs out and reaches login page,
// we clear all the history and cache to prevent back link
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope){
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
}
});
//Check if user already logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true); // Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('dashboard', {}, {location: "replace"});
}
});
$scope.login = function(user,cred) {
if(user.$valid) { // Check if the form data is valid or not sharedUtils.showLoading();
//Email
firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(funct
ion(result) {
// You dont need to save the users session as firebase handles it
// You only need to :
// 1. clear the login page history from the history stack so that you can’t come back
// 2. Set rootScope.extra;
// 3. Turn off the loading
// 4. Got to menu page
$ionicHistory.nextViewOptions({
historyRoot: true
});
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('dashboard', {}, {location: "replace"});
};
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("Please note","Authentication Error");
}
);
}else{
sharedUtils.showAlert("Please note","Entered data is not valid");
}
};
})
.controller('RegCtrl',function($scope,$rootScope,sharedUtils,$ionicSideMenuDelegate,$state,fireBaseData,$ionicHistory) {
$rootScope.extras = false; // For hiding the side bar and nav icon
$scope.submitForm = function (user, cred) {
if (user.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading();
//Main Firebase Authentication part
firebase.auth().createUserWithEmailAndPassword(cred.email,cred.password).then(f
unction (result) {
//Add name and default dp to the Autherisation table
result.updateProfile({
displayName: cred.name,
photoURL: "default_dp"
}).then(function() {}, function(error) {});
//Add phone number to the user table
fireBaseData.refUser().child(result.uid).set({
telephone: cred.phone
});
//Registered OK
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true);
// Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('loginpage', {}, {location: "replace"});
}, function (error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("Please note","Registration Error");
});
}else{
sharedUtils.showAlert("Please note","Entered data is not valid");
}
}
})
.controller('DashCtrl', function($scope, formData) {
$scope.user = formData.getForm();
})
services.js
.factory('sharedUtils'['$ionicLoading','$ionicPopup',function($ionicLoading,$io
nicPopup){
var functionObj={};
functionObj.showLoading=function(){
$ionicLoading.show({
content: '<i class=" ion-loading-c"></i> ', // The text to display in the loading indicator
animation: 'fade-in', // The animation to use
showBackdrop: true, // Will a dark overlay or backdrop cover the entire view maxWidth: 200,
// The maximum width of the loading indicator. Text will be wrapped if longer than maxWidth
showDelay: 0 // The delay in showing the indicator
});
};
functionObj.hideLoading=function(){
$ionicLoading.hide();
};
functionObj.showAlert = function(title,message) {
var alertPopup = $ionicPopup.alert({
title: title,
template: message
});
};
return functionObj;
}])
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving
Angular modules
// 'starter' is the name of this angular module example (also set in a
<body> attribute in index.html)
// the 2nd parameter is an array of 'requires' angular.module('starter',
['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the
// accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('loginpage', {
url: "/loginpage",
templateUrl: "templates/loginpage.html",
controller: "LoginCtrl"
})
.state('regform', {
url: "/regform",
templateUrl: "templates/regform.html",
controller: "RegCtrl"
})
.state('dashboard', {
url: "/dashboard",
templateUrl: "templates/dashboard.html",
controller: "DashCtrl"
})
$urlRouterProvider.otherwise("/loginpage");
});
Login Page
<ion-view>
<ion-content class="padding">
<label class="item item-input">
<input ng-model="user.email" type="text" placeholder="E-mail">
</label>
<label class="item item-input">
<input ng-model="user.password" type="text" placeholder="Password">
</label>
<button ng-click="login(user)" class="button button-block button-
positive">Submit</button>
<center><p>Don't have an account? Create Account</p>
</center>
</ion-content>
</ion-view>
Registration Page
<ion-view>
<form class="padding">
<ion-list>
<ion-item class="item-input">
<input type="text" ng-model="user.firstName" placeholder="First Name">
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.lastName" placeholder="Last Name">
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.dob" placeholder="Date of birth"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.phoneno" placeholder="Phone No."></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.gender" placeholder="Male/Female"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.email" placeholder="Email"></input>
</ion-item>
<ion-item class="item-input">
<input type="text" ng-model="user.password" placeholder="Password"></input>
</ion-item>
<button ng-submit="submitForm(user) class="button button-block button-
positive">Register</button>
<center><p>Don't have an account? Login</p>
</center>
</ion-list>
</form>
</ion-view>
Please can anyone help me out?
If the code above is full code of you . Problem is here
angular.module("starter")
Change to
angular.module("starter",[])
And you should put your main app in html tag
<html ng-app="starter">
Related
I am using stripe payment to process payments. I followed this GITHUB project and this blog.
My project has nested views and uses routers as well.
My project structure looks like
src
app
views
controllers
directives
index.html
app.js
The app.js is where angular module is loaded manually and has the routers.
app.js
var myApp = angular.module('myApp', ['ui.router', 'formData']);
myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
// routers
}
The index.html is where the angular and stripe scripts are included
index.html
<head lang="en">
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<Script src="resources/angular.min.js"></Script>
<Script src="resources/angular-ui-router.min.js"></Script>
<script src="app.js"></script>
<script src="directives/formData/formData.js"></script>
<script type="text/javascript"
src="resources/angular-payments.js">
</script>
<script>
Stripe.setPublishableKey('key')
</script>
</head>
<div>
<div ui-view>
</div>
</div>
Now the formData directive is where I am trying to include the strip payment
formData.js
var formData = angular.module('formData',['angularPayments']);
formData.directive('formData',function(){
return {
restrict: 'EA',
scope: {},
replace: true,
link: function($scope, element, attributes){
},
controller: function($scope,$attrs,$http, $state){
//This is the callback for strip from the links above as followed
$scope.stripeCallback = function (code, result) {
console.log("inside cc callbakc");
if (result.error) {
console.log("credit card error");
window.alert('it failed! error: ' + result.error.message);
} else {
console.log(result);
console.log("credit card succes "+result.id);
window.alert('success! token: ' + result.id);
}
};
},
templateUrl: 'directives/formData/formData.tpl.html'
}
});
formData.tpl.html has another ui router
formData.tpl.html
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div ui-view></div
</form>
and one of the ui router html page is the payment page with this code
<form stripe-form="stripeCallback" name="checkoutForm">>
<input ng-model="number" placeholder="Card Number"
payments-format="card" payments-validate="card" name="card" />
<input ng-model="expiry" placeholder="Expiration"
payments-format="expiry" payments-validate="expiry"
name="expiry" />
<input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" />
<button type="submit">Submit</button>
</form>
I get the validations working but nothing prints in the console when I hit submit. I guess the js is not being fired. Let me know if you need more information.
This will render as nested forms, which is invalid html. Most browsers are silently 'forgiving' of this by treating the inner form as a non-form element.
If you move the checkoutForm out from the signup-form, this should put you on the right track.
I am currently developping an application using Ionic - angularJS
To show the content in the home page I use the directive ng-show='isLogged', this condition has to be false to display the content.
Here is the code for the page home.html :
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
the parametter isLogged is defined when the user open the application
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
My problem is that when I open the application and the variable $rootScope.isLogged is true the content is still displayed
I have a side menu in the application and I don't know why but when I click to open the side menu, the content disapear as expected in the begining.
For testing another part of the project I added a button in the menu bar of the application and when I click this button (used to display in console the content of localStorage) the content disapear too.
Thank you in advance for any ideas.
app.js :
var app = angular.module('starter', ['ionic', 'ngCordova'])
app.run(function($ionicPlatform, $rootScope)
{
$ionicPlatform.ready(
function()
{
if(window.cordova && window.cordova.plugins.Keyboard)
{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
});
$rootScope.serverUrl = '';
})
app.config(function($stateProvider, $urlRouterProvider){
// Home view
$stateProvider.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
// Login view
$stateProvider.state('logIn', {
url: '/logIn',
templateUrl: 'templates/logIn.html',
controller: 'connectionController'
})
// Sign up view
$stateProvider.state('signUp', {
url: '/signUp',
templateUrl: 'templates/signUp.html',
controller: 'connectionController'
})
$urlRouterProvider.otherwise('/home')
});
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Project</title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- Models -->
<script type="text/javascript" src="js/Models/sha512.js"></script>
<!-- jquery -->
<script type="text/javascript" src='js/jquery-1.7.1.min.js'></script>
<!-- controllers -->
<script type="text/javascript" src="js/controllers/connectionController.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class='bar-stable'>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side='left'>
<button class='button button-icon button-clear ion-navicon' menu-toggle='left'></button>
</ion-nav-buttons>
<ion-nav-buttons side='right'>
<button ng-show='isLogged' class='button' ng-controller='connectionController' ng-click='disconnect()'>Log Out</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side='left'>
<ion-item menu-close ui-sref='home'>Home</ion-item>
<ion-item menu-close ui-sref='logIn' ng-show='!isLogged'>Log In</ion-item>
<ion-item menu-close ui-sref='signUp' ng-show='!isLogged'>Sign Up</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
home.html :
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
</ion-view>
Try updating to following code (leaving out the '' marks around the isLogged variable. You want them to treat the variables as boolean not strings
if (window.localStorage.getItem('isLogged') == true)
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', true);
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', false);
}
In your ng-show then, do this instead: ng-show="(isLogged !== 'true');"
Ok I found a solution,
The first time I tried to create a controller for the home view I created a function to initialize the rootScope variable isLogged and call that function as the begining of home.html,
I just tried again now but without the function and it seems to be working.
here is the homeController.js:
app.controller('homeController', ['$rootScope',
function($rootScope){
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
}]);
Thank you all for your help.
errors
controllers.js:6 Uncaught SyntaxError: Unexpected token (
ionic.bundle.js:26794 Error: [ng:areq] Argument 'MenuCtrl' is not a function, got undefined
I am working to create an cross platform app with help of Ionic framework using word press as back end, Following are the files with codes
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl'
})
.state('main.contentRecent', {
url: '/contentRecent',
templateUrl: 'templates/menuContent.html',
controller: 'MenuCtrl'
})
.state('main.postDetail', {
url: '/postDetail',
templateUrl: 'templates/postDetail.html',
controller: 'PostCtrl'
});
$urlRouterProvider.otherwise('/main/contentRecent');
})
Controllers.js
angular.module('starter')
.controller( 'MenuCtrl', function ($http, $scope){
$scope.categories = [];
$http.get("http://bijay.sahikura.com/api/get_category_index/").t
function(data){
$scope.categories = data.data.categories;
console.log(data);
}, function ( err){
console.log(err);
}
})
.controller('PostCtrl', function() {
//hello
})
Menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"> खुला सरकार </h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="category in categories" menu-close href ="#">
<span> {{category.title}} </span> <span class="badge badge-assertiv"> १</span>
category.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It looks like you want to reuse the same controller within your config as well as define a controller 'MenuCtrl' that is visible within the html in the app. In that case you are better off defining the function separately and reusing the function name wherever you need that function. For eg.
function menuCtrlFunc(http, scope) {
$scope.categories = [];
// other stuff
}
angular.module('starter').controller('MenuCtrl', menuCtrlFunc);
angular.module('starter').config(
//....
//....
controller: menuCtrlFunc,
);
HTH
Forgive me for my novelty with Angular but I can't find what the problem to this seemingly simple program. Instead of the $scope displaying "Jonathan" which is defined LoginController, it displays {{logins.username}} in login.html. If I move the controller in the index.html, it works fine. When I move it to app.js file, it does not work. Any help or direction would be greatly appreciated. Focusing on LoginController, below is my code:
Index.html
<!DOCTYPE html>
<html ng-app="millersFormalsApp">
<head>
<meta charset="UTF-8" />
<!-- This add the Angular JS to the program -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<!-- load the logo -->
<img src="img/millers_icon.png">
</head>
<body>
<h2> AngularJS Project</h2>
<div class="container">
<div id="menu">
Home
Login
Register
</div>
<div ng-view=""></div>
</div>
</body>
</html>
login.html
<h2> Login Page</h2>
Username:
<input type="text" placeholder="Username" ng-model="logins.username"
<br />
Password:
<input type="text" placeholder="Password" ng-model="logins.password"
<h2>Your Username is {{ logins.username }} </h2>
app.js
var millersFormalsApp = angular.module('millersFormalsApp', ['ngRoute']);
//** Route Provider takes care of routing functionality based
//** upon what has been selected
millersFormalsApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'Views/home.html'
})
.when('/login',
{
controller: 'LoginController',
templateUrl: 'Views/login.html'
})
.when('/register',
{
controller: 'RegisterController',
templateUrl: 'Views/register.html'
})
.otherwise({redirectTo: 'home.html'});
});
//** Controllers are called by the Route Provider to specifically execute
//** the selected item
millersFormalsApp.controller('HomeController', function ($scope)
{
$scope.homePage = "This is Miller's Home Page";
});
millersFormalsApp.controller('LoginController', function ($scope)
{
$scope.logins = {username: "Jonathan", password: ""};
console.log($scope);
});
millersFormalsApp.controller('RegisterController', function ($scope) {
$scope.register = { firstname: "", lastname: "" };
console.log($scope);
});
hi I was trying to do a log-in form in angular but i don't know where to start, any help or maybe reference would be appreciated
i tried to type a function that checks username and pass but i can't redirect it to another page
any help please?????????????
here is my html code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="loginform">
<ion-pane ng-controller="AppCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Unilever</h1>
</ion-header-bar>
<ion-content>
<div class="modal">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username" required>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" required>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</div>
</ion-content>
</ion-pane>
</body>
</html>
and this is my angular code
angular.module('loginform.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal) {
// Form data for the login modal
$scope.loginData = {};
// Create the`enter code here` login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
if($scope.loginData.username === users.username && $scope.loginData.password===users.password)
alert("Welcome");
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.users = [
{ username: 'Marwan ', password:'taro', course1:'software engineering', course2:'Web Dev' id: 1 },
{ username: 'Galal', password:'1234', course1:'software engineering' course2:'workflow engines' id: 2 },
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
$location.path('/newpath') will let you redirect. Inject the $location service in your controller and call the $location.path function at the place of your alert.
Hi try this example this will help you:
login.html:
<div class="container" data-ng-controller="login as vm">
<form class="login">
<p>
<label for="login">Email:</label>
<input type="text" name="login" id="login" data-ng-model="log.email" placeholder="aaa#gmail.com" required>
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" data-ng-model="log.password" placeholder="Password" required>
</p>
<p class="login-submit">
<button type="submit" class="login-button" data-ng-click="vm.login(log)">Login</button>
</p>
<p class="forgot-password">Forgot your password?</p>
</form>
login.js
(function () {
'use strict';
var controllerId = 'login';
angular.module('app').controller(controllerId, ['common', 'loginservice', '$location', '$rootScope', login]);
function login(common, loginservice, $location, $rootScope) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var loggedIn;
var vm = this;
vm.title = 'login';
vm.login = function (log) {
loginservice.getLoginData(log.email, log.password, vm.loginsuccess);
}
vm.loginsuccess = function (data) {
if (data == null) {
toastr.error('Invalid username and password');
}
else {
sessionStorage.Id = data;
loggedIn = data;
$location.path('/dashboard');
$rootScope.$broadcast('logindata', data);
}
}
activate();
function activate() {
common.activateController([], controllerId)
.then(function () { log('Activated login View'); });
$rootScope.$broadcast('logindata', 0);
}
}
})();
loginservice.js
(function () {
'use strict';
var serviceId = 'loginservice';
angular.module('app').factory(serviceId,
['common', loginservice]);
function loginservice(common) {
var $q = common.$q;
var service = {
getLoginData: getLoginData,
};
return service;
function getLoginData(email, password,success) {
var data;
if (email === 'parthi' && password === '12345') {
data= 1;
}
else
data = null;
return success(data);
}
}
})();