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);
}
}
})();
Related
My angularjs bootstrap modal is not opening.
var app=angular.module('test', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function($scope, $log,$modal) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
});
<html ng-app="test">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<!--<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If I use the bootstrap version 0.6.0 the modal working fine.But If I use version 2.5.0 it gives me the error "Unknown provider: $modalProvider <- $modal". But I have to use version 2.5.0.How to solve the problem? Please help.Thanks in advanced.
In js part:
plunker here.
Make these two files in separate folder, and make sure js is loaded correctly.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
IN HTML:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
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">
So im using ngRoute to load different partial html files to my index.html file. The ng-view directive loads the first partial (search.html), and when i click a link in that partial, it loads a second partial (details.html). The link click effectively makes a call (via a controller) to the OMDB API to retrieve a specific movie's details and sets $scope.movieJson = response. When i try to access this in my details.html partial, it doesnt recognise it.
index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Movie List - Home</title>
</br>
</br>
<div class="container">
<img class="" src="http://www.movie-list.com/images/logo.png" display="block" margin="auto" width="25%">
</div>
</br>
</br>
</head>
<body>
<div class='container'>
<input class="form-control searchBox" ng-show="show" type="text" name="searchBox" ng-model="movies" ng-change="getMovies()" placeholder="Enter your movie search">
</br>
<h3>Search Again</h3>
<div data.ng-view></div>
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/config.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
</body>
</html>
controller.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('AppCtrl', function($scope, $routeParams, $http) {
$scope.show = true;
$scope.hide = true;
$scope.getMovies = function() {
console.log("Get movies requested in controller");
$http.get("http://www.omdbapi.com/?s="+$scope.movies+"&y=&plot=full&r=json").success(function(response) {
console.log("Get movies requested in controller");
console.log($scope.movies);
console.log(response);
$scope.moviesJson = response;
});
};
$scope.getMovie = function(Title, err) {
console.log(Title);
$http.get("http://www.omdbapi.com/?t="+Title+"&y=&plot=full&r=json").success(function(response) {
console.log("Get single movie requested in controller");
console.log(response);
$scope.movieJson = response;
window.scrollTo(0, 0);
});
$scope.show = false;
$scope.hide = false;
};
$scope.reloadPage = function() {
window.location.reload();
};
});
config.js
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/search.html',
controller : 'AppCtrl'
})
.when('/details', {
templateUrl : 'partials/details.html',
controller : 'AppCtrl'
})
.otherwise(
{
templateUrl : '<div>No Page</div>'
});
});
search.html
<div class="container" ng-controller="AppCtrl">
<div class="row" vertical-align: middle ng-show="show">
<div class="col-md-10 col-xs-10 col-lg-10">
<div data-ng-repeat="movie in moviesJson.Search" class="col-md-4 col-xs-4 col-lg-4">
<h4>{{movie.Title}}</h4>
<img class="img-responsive" ng-src="{{ movie.Poster || 'https://www.myuniverse.co.in/ABMUPictureLibrary/NoImage.jpg' }}">
</div>
</div>
</div>
</div>
details.html
<div class="container" ng-controller="AppCtrl">
<div class="col-md-10 col-xs-10 col-lg-10">
<table class="table" border="1">
<thead>
</thead>
<tbody>
<tr><h4><strong>Title:</strong> {{movieJson.Title}}</h4></tr>
<tr><h4><strong>Year:</strong> {{movieJson.Year}}</h4></tr>
<tr><h4><strong>Rated:</strong> {{movieJson.Rated}}</h4></tr>
<tr><h4><strong>Released:</strong> {{movieJson.Released}}</h4></tr>
<tr><h4><strong>Runtime:</strong> {{movieJson.Runtime}}</h4></tr>
<tr><h4><strong>Genre:</strong> {{movieJson.Genre}}</h4></tr>
<tr><h4><strong>Director:</strong> {{movieJson.Director}}</h4></tr>
<tr><h4><strong>Writer:</strong> {{movieJson.Writer}}</h4></tr>
<tr><h4><strong>Actors:</strong> {{movieJson.Actors}}</h4></tr>
<tr><h4><strong>Plot:</strong> {{movieJson.Plot}}</h4></tr>
<tr><h4><strong>Language:</strong> {{movieJson.Language}}</h4></tr>
<tr><h4><strong>Country:</strong> {{movieJson.Country}}</h4></tr>
<tr><h4><strong>Awards:</strong> {{movieJson.Awards}}</h4></tr>
<tr><h4><strong>Metascore:</strong> {{movieJson.Metascore}}</h4></tr>
<tr><h4><strong>IMDB Rating:</strong> {{movieJson.imdbRating}}</h4></tr>
<tr><h4><strong>IMDB Votes:</strong> {{movieJson.imdbVotes}}</h4></tr>
<tr><h4><strong>IMDB ID:</strong> {{movieJson.imdbID}}</h4></tr>
</tbody>
</table>
</div>
</div>
app.js
window.addEventListener('hashchange', function() {
console.log("Worked");
});
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(express.static(__dirname = '\public'));
app.use(bodyParser.json());
app.get('', function (req, res) {
console.log(req.body);
res.json();
});
app.post('', function(req, res) {
console.log(req.body);
res.json(doc);
});
app.listen(3001);
console.log("Server running on port 3001");
End result
Get rid of ng-controller="AppCtrl"
You are effectively creating 3 different instances , each with it's own scope.
The first is created by the route, then you have 2 nested instances inside that one
I am trying to route my navbar using angular js but the content in that HTML file is not displaying, I don't know what is the problem.
here is my register page in this register and login functionality is there on angularjs parse
<!DOCTYPE html>
<html ng-app="AuthApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<!-- start: CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="js/signuplogintoggle.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
<link href="css/sidebarnav.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->
<meta charset=utf-8 />
<title>EPPF</title>
</head>
<body>
<div class="main-container">
<div ng-hide="currentUser">
<form ng-show="scenario == 'Sign up'" class="form-signin" role="form">
<h2 class="form-signin-heading text-center">EPPF</h2>
Email: <input type="email" ng-model="user.email" class="form-control" /><br />
Username: <input type="text" ng-model="user.username" class="form-control" /><br />
Password: <input type="password" ng-model="user.password" class="form-control"/><br />
<button ng-click="signUp(user)" class="btn btn-lg btn-primary btn-block">Sign up</button>
</br>
Login</p>
</div>
</form>
<form ng-show="scenario == 'Log in'" class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
Username: <input type="text" ng-model="user.username" class="form-control" role="form"/><br />
Password: <input type="password" ng-model="user.password" class="form-control" role="form" /><br />
<button ng-click="logIn(user)" class="btn btn-lg btn-primary btn-block">Log in</button>
</br>
Sign up</p>
</form>
</div>
<div ng-show="currentUser">
<div id="wrapper">
<div class="" ng-controller = "MainCtrl">
<div class="container">
<div class="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn" >About</a>
<a ng-click="setRoute('dashboard')" class="btn">dashboard</a>
</div>
<div class="ng-view">
</div>
</div>
</div>
<button ng-click="logOut(user)" class="logout">Log out</button>
</div>
<script type="text/javascript">
Parse.initialize("34olOarYIJtsSy1YcuCdR4RFBPzKthQfAyotWjXP", "vvoqLVt7kMDwuxYliMuOJthEpMvRA3PVFdxC5izY");
angular.module('AuthApp', [])
.run(['$rootScope', function($scope) {
$scope.scenario = 'Sign up';
$scope.currentUser = Parse.User.current();
$scope.signUp = function(form) {
var user = new Parse.User();
user.set("email", form.email);
user.set("username", form.username);
user.set("password", form.password);
user.signUp(null, {
success: function(user) {
$scope.currentUser = user;
$scope.$apply();
},
error: function(user, error) {
alert("Unable to sign up: " + error.code + " " + error.message);
}
});
};
$scope.logIn = function(form) {
Parse.User.logIn(form.username, form.password, {
success: function(user) {
$scope.currentUser = user;
$scope.$apply();
},
error: function(user, error) {
alert("Unable to log in: " + error.code + " " + error.message);
}
});
};
$scope.logOut = function(form) {
Parse.User.logOut();
$scope.currentUser = null;
};
}]);
</script>
</body>
</html>
This is my register page and angular js code is
angular.module('AuthApp',[]).
config(function($routeProvider){
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/dashboard', {template:'partials/dashboard.html'}).
otherwise({redirectTo:'/home',template:'partials/home.html'})
});
function MainCtrl($scope,$location) {
$scope.setRoute = function(route){
$location.path(route);
}
}
I don't know what is the problem I cannot see the routes in ngview directory
I think the ngRoute service is missing there :
angular.module('AuthApp', ['ngRoute']);
See the doc : https://docs.angularjs.org/api/ngRoute
Also, it's suppose to be templateUrl instead of template.
angular.module('AuthApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/about', {templateUrl:'partials/about.html'})
.when('/dashboard', {templateUrl:'partials/dashboard.html'})
.otherwise({redirectTo:'/home',templateUrl:'partials/home.html'})
});
function MainCtrl($scope,$location) {
$scope.setRoute = function(route){
$location.path(route);
}
}
Also, I don't think you should use the setRoute function. You should just set the href like that :
Home
I've been trying to include reactjs in my project with ng-react but when I run the app throws the error "Cannot find react component LoginComponent".
the structure:
components(folder)
LoginComponent.js
controllers(folder)
login.js
directives(folder)
login.js
views(folder)
login.html
app.js
index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/alertify.js/dist/css/alertify.css">
</head>
<body ng-app="gameApp">
<div ng-view=""></div>
<!-- COMPONENTS -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
<script src="../bower_components/ngReact/ngReact.min.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/alertify.js/dist/js/alertify.js"></script>
<script src="../bower_components/babel/browser.js"></script>
<!-- SOCKET.IO -->
<script src="../node_modules/socket.io-client/socket.io.js"></script>
<!-- REACT COMPONENTS -->
<script type="text/babel" src="js/components/LoginComponent.js"></script>
<!-- DIRECTIVES -->
<script src="js/directives/login.js"></script>
<!-- JAVASCRIPT FILES -->
<script src="js/app.js"></script>
<!-- CONTROLLERS -->
<script src="js/controllers/login.js"></script>
<!-- SERVICES -->
<script src="js/services/commonServices.js"></script>
</body>
</html>
app.js:
'use strict';
/**
* #ngdoc overview
* #name gameApp
* #description
* # gameApp
*
* Main module of the application.
*/
angular //modules
.module('gameApp', ['ngResource',
'ngRoute',
'react',
//services
'commonServices',
//directives
'loginDirective'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'js/views/login.html',
controller: 'LoginController'
})
});
LoginComponent.js:
login.value('LoginComponent', React.createClass({
propTypes: {
username : React.PropTypes.string.isRequired
},
render: function() {
return <span>Hi {this.props.username}</span>;
}
}));
login.js(directive):
'use strict';
var loginDirective = angular.module('loginDirective', []);
loginDirective.directive( 'login', function( reactDirective ) {
return reactDirective( 'LoginComponent');
} );
login.html(view):
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Choose your name</h1>
<form>
<div class="form-group">
<input type="text" ng-model="username" class="form-control" placeholder="Name" autofocus>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" ng-click="setUsername()">Enter</button>
</div>
</form>
<login username="username" />
</div>
</div>
</div>
login.js(controller):
var login = angular.module('gameApp');
login.controller('LoginController', ['$scope', '$location', 'commonServices',
function($scope, $location, commonServices) {
$scope.username = '';
$scope.setUsername = function() {
if($scope.username.trim() == '') {
alertify.error("The name can't be empty");
} else {
commonServices.setUsername($scope.username);
$location.path('/');
}
}
}
]);
Somebody knows whats the problem?
This line: return <span>Hi {this.props.username}</span>; isn't valid JavaScript because it contains JSX so it's breaking the directive. You will need to add a compile step to your workflow if you want to use JSX.
Check out my blog post to add JSX and ES6 compilation to your project http://blog.tylerbuchea.com/migrating-angular-project-to-react/
To make sure this is actually the problem try replacing your current LoginComponent code with the code below. I just took your current code and used an online compiler https://babeljs.io/repl/ So the code below should all be valid ES5 JavaScript.
Try this:
'use strict';
login.value('LoginComponent', React.createClass({
propTypes: {
username: React.PropTypes.string.isRequired
},
render: function render() {
return React.createElement(
'span',
null,
'Hi ',
this.props.username
);
}
}));
Try to compile the JSX file. For me it worked.