How to use $ngCookies in angularjs - javascript

I've a trouble in cookies. When I use ngCookies in my project, there's something wrong in my div (alert).
enter image description here
And here's my app.js
angular.module('postLogin', [ngCookies])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
this.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'userauth.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'success.html';
} else {
$scope.errorMsg = "Username and password do not match.";
}
})
}
}]);
And here's my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<title>angulrjs login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" id="main-css"/>
<link href="css/style.css" rel="stylesheet" id="main-css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController as postCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<div class="row">
<img src="images/logo.jpg" class="imglogo"/>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login using username & password</div>
</div>
<div class="panel-body" >
<form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
<span class="glyphicon glyphicon-hand-right"></span> {{errorMsg}}
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
<i class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
When I didn't use ngCookies
angular.module('postLogin', [])
It could be run as normally. Please help me, I really want it to throwing username in my login form to next page. I can't use $cookies like session in php. Thanks.

In your module setter (angular.module...) when you inject dependent modules they must be in quotes. In your example there are no quotes surrounding ngCookies. Also, your index.html doesn't appear to reference the angular-cookies.js file which is not part of the base angular.js file.
Check development tools for specific error(F12).

Related

TypeError: login is not a function at HTMLInputElement.onclick (VM188 index.html:76) onclick # VM188 index.html:76

I am trying to make a login page for my project I am working on and I came across this error while trying to run the code. I have no idea what is causing it.
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JAuth Login</title>
<link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/login.css">
</head>
<body>
<script>
//firebase stuff
//Login
//Authentication
//login
function login() {
var userEmail = document.getElementById("email").value;
var userPass = document.getElementById("password").value;
window.alert(userEmail + " " + userPass);
}
</script>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login.jpg" alt="login" class="login-card-img">
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/Jauth.png" alt="logo" class="logo">
</div>
<p class="login-card-description">Sign into your account</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4" type="button" value="Login" onclick="login()">
<input name="register" id="register" class="btn btn-block login-btn mb-4" type="button" value="Register">
</form>
Forgot password?
<nav class="login-card-footer-nav">
Terms of use.
Privacy policy
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
That was the full script.
When I run the code and go to chrome, I keep finding an error saying: TypeError: login is not a function at HTMLInputElement.onclick (VM188 index.html:76) onclick # VM188 index.html:76
Do you know what is happening?
Thanks

Form validation in Bootstrap v4.0 not working, required tag not working

/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#submit').on('click', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>
Hello All!
I am trying to add form validation into my site for my contact page. I have run into a snag. No matter what I try none of the bootstrap ways of form validation work. I have tried just the plain required tag, and all of the ways bootstrap explains. I did take out my prevent default in my js file and that didnt change anything. I am at a bit of a loss, any help would be much appreciated thank you.
You need to add required attibute to your inputs and submit your form #contact in Jquery (not button click). Try this one:
/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#contact').on('submit', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>
Try a different way. In your situation i'll create a simple function to validate post and use a modal to show some errors or missing data. Use the return of the functiom that you create and use AJAX to POST the data on the server-side page instead of submit.
You didn't insert the required attribute in the input tag. If you want a field to be required then you need to use it like the following
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

getJSON function not triggering

I am trying to implement a search functionality using API's and JSON data, but for some reason the getJSON function just doesn't seem to work. There are no errors, the first 2 console logs work in both functions but the one inside the getJSON function does not return anything. The url is valid as the same thing happens even if I use just a hard-coded url without the getElementById functionality. I have been trying to get the code to work for the last 2 days but I just have no idea what the problem is. I would appreciate any feedback.
<!DOCTYPE html>
<html>
<head>
<title>World News</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: lightgrey;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">World News</a>
</div>
<form class="navbar-form navbar-right" action="">
<div class="input-group">
<input id="searchBar" type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button onclick="getText(); getJSON();" id="search_btn" class="btn btn-default" type="submit" href="#search">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content tab-content">
<div id="home" class="col-sm-8 text-left tab-pane fade in active">
<h1 id="homeH0">Welcome to World News</h1>
<p id="homeP0">Example of the welcoming text for the front of the page</p>
<h4 id="h0"></h4>
<p id="p0"></p>
<h4 id="h1"></h4>
<p id="p1"></p>
<h4 id="h2"></h4>
<p id="p2"></p>
<h4 id="h3"></h4>
<p id="p3"></p>
<h4 id="h4"></h4>
<p id="p4"></p>
</div>
</div>
</div>
<script type="text/javascript">
var urlSer;
function getText() {
urlSer = 'https://newsapi.org/v2/everything?' +
'q=' + document.getElementById("searchBar").value + '&' +
'SortBy=popularity&' +
'apiKey=459a144a981941ffa850e2b8c06c5b5f';
console.log(urlSer);
};
function getJSON() {
console.log(urlSer);
$.getJSON(urlSer, function(json) {
console.log(json);
for (i = 0; i <= 4; i++) {
document.getElementById('h' + i).innerHTML = json.articles['' + i].title;
document.getElementById('p' + i).innerHTML = json.articles['' + i].description;
}
});
};
</script>
</body>
</html>
Change your button from type="submit" to type="button" to prevent the form from submitting using browser default process
Right now your page is probably reloading due to the form submit

After clicking submit, Form does nothing

I have been working on a permissions system for my NodeJS (Using the SailsJS MVC) and have ran into a problem. After solving my first error which is outlined here I am now running into an issue where the form does nothing. It does not send an error to console and it does not log an error in the SailsJS console itself. Below is my code.
/**
* GroupsController (API)
*
* #description :: Server-side logic for managing Permissions
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
module.exports = {
update: function(req, res, next) {
var groupObj = {
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
};
Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
if (err) {
return res.redirect('/group/edit/' + req.param('id'));
}
res.redirect('/');
});
},
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
}).exec({
error: function (err) {
return res.negotiate(err);
}
});
}
};
GroupsController (Form)
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.groupCreateForm = function(){
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroup.groupName,
canViewUsers: $scope.createGroup.canViewUsers,
canEditUsers: $scope.createGroup.canEditUsers,
canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
canViewNotes: $scope.createGroup.canViewNotes,
canEditPermissions: $scope.createGroup.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
}}]);
HTML Form
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
<h2 class="form-signin-heading">Create A Group</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<div class="row">
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
</div>
<!-- Can View Users -->
<div class="row">
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
</div>
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
<span>Create Group</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
You don't have the right ng-controller attached to your form, so the $scope.groupCreateForm shouldn't even be getting called. Try adding ng-controller="GroupsController" to your form and try again.
<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
I fixed the issue with the following code
<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>
I had the wrong app and controller defined. Thank you to Fissio for sparking the idea that this was the problem.

angular routeprovider include header, footer and template

I'm trying to add templates to links, which is working, however I was wondering if there was a possibility to add your header and footer to it aswell, now I'm copying my header and footer for each page.
here's my js:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/startpage.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
.when('/page/test', {
templateUrl: 'test.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
and here's the template im loading them in
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
<title>SiteEngine Mobile</title>
</head>
<body ng-app="ngViewExample">
<div class="fixedHeaderApp">
<div class="headerIconLogo">
<img src="img/world_icon.png" width="28px" height="28px" />
</div>
<span class="blue">Site</span><span class="orange">Engine</span>
</div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="homebackimgWrapper">
<div class="titleLarge">SiteEngine</div>
<div class="titleSmall">Mobile</div>
</div>
<div class="container">
<div class="loginLogo">
<img src="img/loginIcon.png" width="120px" height="120px" />
</div>
<form action="views/startpage.html">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Ingelogd blijven
</label>
</div>
<button type="submit" class="btn btn-primary btnq-lg btn-block">Inloggen</button>
</form>
<div class="whitespace"></div>
<div ng-controller="HomeController as product">
<div ng-repeat="product in product.products">
<h4>{{product.name}}</h4>
<button ng-show="product.canPurchase">Add to stomach</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Also I have different pages with different menu options.
You can try use ng-view as place for including yours templates. Your footer and header will be outside that ng-view. You can also rendering your menu directly in html. Just put map of yours menus and links somewhere and render it in html.

Categories