Total Angular newb here...
Just going through a Lynda course and I've got everything working until we get to routing. When all the app logic was in the controller things worked fine. But now for whatever reason my page loads completely blank now that I've added routing into the mix.
I've got an index.html file and I'm trying to pass in a view from list.html.
This is my folder structure so far.
Angular |
|-angular.js
|-angular-route.min.js
|-index.html
js |
|-app.js
|-controllers.js
|-data.json
partials |
|-list.html
The JS and Partials folders are both within the Angular folder.
This is my code so far...
Index
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular/Bootstrap Tests</title>
<link rel="stylesheet" href="bootstrap4/css/bootstrap.css">
<link rel="stylesheet" href="css/bands.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="bootstrap4/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- Recent Listens Section -->
<div id="recent-listens-wrapper" ng-view>
</div>
<!-- End of Recent Listens Section -->
</body>
</html>
List
<div class="container">
<div class="row">
<div class="col-sm-12" id="search">
<h2>Band Directory</h2>
<input class="search-bar" ng-model="query" placeholder="Search for bands" type="text" autofocus>
<label class="search-labels">Sort By:
<select ng-model="bandSort">
<option value="name" selected="selected">Name</option>
<option value="genre">Genre</option>
<option value="year">Year</option>
</select>
</label>
<label class="search-labels">
Ascending:
<input type="radio" ng-model="direction" name="direction" checked>
</label>
<label class="search-labels">
Descending:
<input type="radio" ng-model="direction" name="direction" value="reverse">
</label>
</div>
<div class="col-sm-12">
<h1 class="recent-listens">Recent Listens</h1>
</div>
<div class="col-md-2" ng-repeat="item in bands | filter:query | orderBy:bandSort:direction">
<div class="album-preview">
<img class="img-responsive" ng-src="images/bands/{{item.shortname}}_tn.jpg" alt="Photo of {{item.shortname}}"/>
<h3>{{item.album}}</h3>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
Controllers
var bandControllers = angular.module('bandControllers', []);
bandControllers.controller('RecentBands', ['$scope','$http', function RecentBands($scope, $http) {
$http.get('js/data1.json').then(function(bands) {
$scope.bands = bands.data;
$scope.bandSort = 'name';
});
}]);
App
var myApp = angular.module('myApp', [
'ngRoute',
'bandControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'RecentBands'
}).
otherwise({
redriectTo:'/list'
});
}]);
Try using $stateProvider
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/list");
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'partials/list.html',
controller:"RecentBands"
})
});
The error is in your recentBands controller. Change the first line for
var app = angular.module('myApp');
There is no need of [] if you don't use any injections. It was just the name of the module, it has to be the same as the general controller.
Related
I need help!
I need open html form from another html form by button PUTAWAY START.
At html code I have this button, but I cant understand how to write script to command for button.
I don't know where to start. Thank you for help!
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn1" style="width: 100%">PUTAWAY START</button>
</div>
</div>
I know that it must be by function doGet(e) but how?
Thanks to help from Ron I add his script to my project.
Main form:
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KOP#CK-M#IN-MENU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include("main-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<link id="favicon" rel="shortcut icon" type="image/png" href="https://drive.google.com/file/d/14GrCbJYe3RExAKL_6yuF3kH1EO0L7zge/view?usp=sharing" />
<h6 style="color:blue;"><em>KOP#CK M#IN MENU:</em></h6>
<img src="https://drive.google.com/uc?export=download&id=14GDoNMZxgHlfTKMHmtamXmu93y2jaDy6" class="img-fluid" alt="...">
<form>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<input type="button" class="btn btn-primary" value="PUT#WAY ST#RT" style="width: 100%" onclick="Link1()"/>
</div>
</div>
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn2" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn3" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<?!= include("main-js"); ?>
</body>
</html>
and script in include-main:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById("PreLoaderBar").style.display = "none";
}
}
function Link1(){
var url = document.getElementById("url").value;
console.log(url);
var link = document.createElement('a');
console.log(link);
link.href = url + "&page=Link1";
link.id = 'linkURL';
console.log(link);
document.body.appendChild(link);
document.getElementById('linkURL').click();
}
Script in "doGet":
function doGet(e){
var params = JSON.stringify(e);
console.log(params);
console.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("PUTAWAY_TO").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
}
You can use the doGet(e) event parameters as your condition to determine which html form you will create
Sample Code:
Code.gs
function doGet(e){
var params = JSON.stringify(e);
Logger.log(params);
Logger.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("Form1").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
}
Main.html
<body>
<h1>Welcome to Main Form</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Link 1" onclick="link1()" />
</body>
<script>
function link1()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Link1";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
Form1.html
<body>
<h1>Welcome to Form 1</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Back to Main" onclick="main()" />
</body>
<script>
function main()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Main";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
What it does?
Creates a href link in your html page, the href link contains an event parameter "page". link.href = url+"?page=Link1";
When doGet(e) was called, It will check the page parameter in the event object. Then select the form you want to use based on the page parameter provided.
Additional References:
Create Views (Pages) in Web App - Google Apps Script Web App Tutorial - Part 7
Link HTML Pages using Google Apps Script Web App
<!Doctype html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" class="container jumbotron">
<div class="form-group">
<input type="text" class="form-control" ng-model="empName" placeholder="Please Enter Employee Name"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empUserId" placeholder="Please Enter Employee UserName"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empEmailId" placeholder="Please Enter Employee Email ID"/>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="saveData();">Save</button>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="loadData();">Load</button>
</div>
<hr/>
Employee Name : {{empData.empname}}<br/><br/>
Employee User ID : {{empData.empuserid}}<br/><br/>
Employee Email ID : {{empData.emailid}}
</div>
<script>
var app = angular.module("myApp", ['ngStorage']);
app.controller("myCtrl", function($scope, $localStorage){
$scope.saveData = function(){
var empData = {empname:$scope.empName,
empuserid: $scope.empUserId,
emailid : $scope.empEmailId
}
//$localStorage.name = $scope.empName;
//$localStorage.userid = $scope.empUserId;
//$localStorage.emailid = $scope.empEmailId;
$localStorage.empData = empData;
//window.localStorage.set("empData", JSON.stringify(empData));
}
$scope.loadData = function(){
//$scope.name1 = $localStorage.name;
//$scope.userid2 = $localStorage.userid;
//$scope.emailid3 = $localStorage.emailid;
$scope.empData = $localStorage.empData;
//$scope.empData = JSON.parse(window.localStoage.get('empData'));
}
$scope.loadData();
});
</script>
</body>
</html>
Just call $scope.loadData() at the bottom of your controller to fetch the data.
Try the below steps:
Step 1: Write a init() function inside app.controller and set ng-model values.
$scope.init = function () {
$scope.empName = $localStorage.empData.empname;
$scope.empUserId = $localStorage.empData.empuserid;
$scope.empEmailId = $localStorage.empData.emailid;
$scope.empData = $localStorage.empData;
}
Step 2: Call init() function in HTML using ng-init.
<div ng-controller="myCtrl" class="container jumbotron" ng-init="init()">
I am using Visual Studio Code editor and node js HTTP server. I have created the a simple login page and created a user in firebase. but i didn't able to login using the username. I wrote code for web page in HTML and bootstrap.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
</head>
<body class="bg-dark">
<div id="login-card" class="card">
<div class="card-body">
<h1>Wallpaper App Admin</h1>
<form id="login-form">
<div class="form-group">
<label for="email">email</label>
<input type="email" id="email" class="form-control"/>
</div>
<div class="form-group">
<label for="password">password</label>
<input type="password" id="password" class="form-control"/>
</div>
<div class="form-group">
<button type="button" id="btn-login" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
<script src="js/app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(user){
window.location.href="admin.html";
}
});
</script>
</body>
</html>
style.css file
#login-card{
width:450px;
margin:150px auto;
}
app.js File
var config = {
apiKey: "AIzaSyBF2wl4WHBbLHg90M3lAk_dNKZ7SAo0iE8",
authDomain: "wallpaper-app-b7c7b.firebaseapp.com",
databaseURL: "https://wallpaper-app-b7c7b.firebaseio.com",
projectId: "wallpaper-app-b7c7b",
storageBucket: "wallpaper-app-b7c7b.appspot.com",
messagingSenderId: "302819877773"
};
firebase.initializeApp(config);
firebase.auth.Auth.persistence.LOCAL;
$("#btn-login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
var result = firebase.auth().signInWithEmailAndPassword(email, password);
result.catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
});
admin.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
</head>
<body>
<h1>This is the Admin Page</h1>
<script src="js/app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(!user){
window.location.href="index.html";
}
});
</script>
</body>
</html>
The line firebase.auth.Auth.Persistence.LOCAL is causing error, there are two problems.
The default value is already LOCAL, so it is not necessary to define it.
The proper way to define persistence is
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
I am using an ajax script to stringify the values from a controller of an application which is spring rest web service application..problem is when the values in html in form i click a button, this script should work but doesn't get executed..can someone help me what's wrong in the script, is a load problem or something else, and what is the right way of making it executable???
Ajax Script
load$(document).ready(function () {
$("#submit").click(function () {
var url = 'http://localhost:8080/xxx/authenticate';
var jsondata = JSON.stringify({
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
});
postdata(url, jsondata, 1);
});
$('#register-dev').click(function () {
var url = 'http://localhost:8080/xxx/register';
alert(url);
var jsondata = JSON.stringify({
roleTb: {
roleId: parseInt($('#role').val())
},
firstName: $('#firstname').val(),
lastName: $('#lastname').val(),
emailId: $('#email').val(),
username: $('#username').val(),
password: $('#password').val()
});
postdata(url, jsondata, 2);
});
function postdata(url, jsondata, formId) {
var request = $.ajax({
type: "POST",
url: url,
contentType: 'application/json',
data: jsondata
});
request.done(function (msg) {
if (formId == 1) {
if (msg.errorcode == 200 && msg.obj == true) {
alert("Authentication Successful");
} else {
alert("Authentication failed");
}
}
if (formId == 2) {
if (msg.errorcode == 200) {
alert("Registration Successful Your Access Id is " + msg.obj);
} else {
alert("Registration failed");
}
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
});
HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Title and other stuffs -->
<title>xxxxxx Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-handler.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Favicon -->
</head>
<body>
<!-- Form area -->
<div class="admin-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Widget starts -->
<div class="widget worange">
<!-- Widget head -->
<div class="widget-head"> <i class="fa fa-lock"></i> Login</div>
<div class="widget-content">
<div class="padd">
<!-- Login form -->
<form class="form-horizontal">
<!-- Email -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputEmail">Email</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputPassword">Password</label>
<div class="col-lg-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<!-- Remember me checkbox and sign in button -->
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="col-lg-9 col-lg-offset-3">
<button type="button" id="submit" class="btn btn-info btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
<br />
</form>
</div>
</div>
<div class="widget-foot">Not Registred? Register here
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You should prevent the default hard form submit if you wish to use asynchronous submission. Otherwise form gets refreshed
$("#submit").click(function (e) {
e.preventDefault();
check whether you really need to stringify the data. Normally, in most cases it's just enough to pass it as an object to jQuery.ajax(), unless the server really needs it as JSON string. jQuery internally does the necessary conversion. (serializes to query string) if it's an object or array.
var jsondata = {
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
};
I am using angularjs, were i have defined some routes and on the html page i have used some validations.
My html page looks like:
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
<span ng-show="loginForm.uName.$error.required">Username is required.</span>
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
When i run the page in browser, all the errors/validations are showing up on page load itself.
I would like the validation error to only come up, when there is any error on particular control and wants the button to be disabled, until and unless the form is fully valid.
index.html:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="../js/app.js"></script>
</head>
<body ng-app="test">
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
app.js:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '../partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '../partials/login.html',
controller: 'login'
});
});
your code should work as is. check out this plunker..
what you need is ng-app somewhere in your html
<html ng-app="plunker">
.
.
.
</html>