I am trying to do load an html page using angularJS.
My HTML page is like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TSAPI Profiles list</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="main.js"></script>
<style type="text/css">
.container{
margin: 20px;
}
</style>
</head>
<body>
<div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController">
<div class="col-md-4">
<p> <h4> TSAPI Profiles </h4> <br><br></p>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>TSAPIProfile Name</td>
<td>ACD#</td>
<td>HUB...</td>
</tr>
<tr>
<td>AESServerPrimary</td>
<td>NorthACDTSAPI1</td>
<td>NorthACD</td>
</tr>
<tr>
<td>North</td>
<td>AESNorth1</td>
<td>ManualCBSDetails</td>
</tr>
</tbody>
</table>
<!-- Button -->
<div class="btn-group-justified" >
<div class="col-md-4" style="margin-left: 400px;" >
<button name="savebutton" class="btn btn-primary" type="button" ng-click="add()">Add</button>
<button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()">Edit</button>
<button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()">Remove</button>
</div>
</div>
</div>
</body>
</html>
And my JS file is like:
var app = angular.module('TSAPIProfiles', [])
app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
$scope.add = function () {
$location.path('TSAPIProfileCreate.html');
}
}]);
When I click on add button it doesn't load the TSAPIProfileCreate.html. I could not able to find the reason.
Try to follow Manikandan answer because it's the right way to do this (or use ui-router), but if you really want to make a redirection like this, use : $window.location.href like this
$location.path('TSAPIProfileCreate.html'); // This is bad
$location.path returns the part of the URL after the slash NOT including search string parameters (after the question mark).
Create View then use $location.path.
https://docs.angularjs.org/api/ngRoute/directive/ngView
$location.path('TSAPIProfileCreate');
https://docs.angularjs.org/guide/$location
Related
What is the best way to configure a search field on a table that was loaded from MongoDB using a Controller (MEAN architecture: MongoDB | Express | Angular | NodeJS)
I have a main page:
<section class="content">
<div class="nav-tabs-custom" ng-controller="SoftwareInventoryCtrl as swInventoryCtrl">
<ul class="nav nav-tabs">
<li>
<a href data-target="#tabSummary" data-toggle="tab">
<i class="fa fa-bar-chart"></i> Software Summary
</a>
</li>
<li>
<a href data-target="#tabList" data-toggle="tab">
<i class="fa fa-bars"></i> Software List
</a>
</li>
<li>
<a href data-target="#tabOSList" data-toggle="tab">
<i class="fa fa-windows"></i> Operating Systems
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabSummary" ng-include="'myapp/softwareInventorySummary.html'"></div>
<div class="tab-pane" id="tabList" ng-include="'myapp/softwareInventoryList.html'"></div>
<div class="tab-pane" id="tabOSList" ng-include="'myapp/softwareInventoryOSList.html'"></div>
</div>
</div>
Informations come from a Controller:
(function() {
angular.module('primeiraApp').controller('SoftwareInventoryCtrl', [
'$http',
'consts',
SoftwareInventoryController
])
function SoftwareInventoryController($http, consts) {
const vm = this
const urlSoftwareList = `${consts.apiUrl}/softwareInventory`
vm.refresh = function() {
$http.get(urlSoftwareList).then(function(response) {
vm.softwareInventory = { machine_name: [{}],
display_name: [{}],
company: [{}],
version: [{}] }
vm.softwareInventorys = response.data
})
}
vm.refresh()
} })()
and the following page is loaded with all data:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/deps.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<table id="tableSoftwareInventory" class="table table-bordered table-striped dataTable" role="grid">
<thead>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-repeat="softwareInventory in swInventoryCtrl.softwareInventorys">
<td class="sorting_1">{{ softwareInventory.machine_name }}</td>
<td>{{ softwareInventory.display_name }}</td>
<td>{{ softwareInventory.company }}</td>
<td>{{ softwareInventory.version }}</td>
</tr>
</tbody>
<tfoot>
<th>Machine</th>
<th>Software</th>
<th>Company</th>
<th>Version</th>
</tfoot>
</table>
</div>
</div>
</div>
<script src="/assets/js/deps.min.js"></script>
<script src="/plugins/datatables.net/js/jquery.dataTables.js"></script>
<script src="/plugins/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
</body>
</html>
My ideia is put a input box to search on tableSoftwareInventory table
Any ideias?
P.S. I using AdminLTE template.
Thank you very much!!
Finally I found the method necessary: Just implemented dir-paginate function on page where the table is loaded using parameter "search" (bult in the function). More details about how to implement, access here
I've been trying to get my code to save all the components from a table to a database. I thought that if I could save every element that was added to the table into an array, then I could send it to my database, but I don't know if that is the best idea, nor if I am doing it correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/css/colors.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!--Local Stylesheets-->
<link rel="stylesheet" href="css/style.css">
<!--/local Stylesheets-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="handsontable_basic.js"></script>
</head>
<body ng-controller="MainController">
<div class="container">
<div ng-app="productsTableApp" class="table-editable">
<div ng-controller="ProductsController">
<span class="glyphicon glyphicon-plus"></span>
<div class="table-responsive">
<table class="table">
<tr>
<th>Id</th>
<th>Fornecedor</th>
<th>Código do Produto</th>
<th>Deletar</th>
</tr>
<tr ng-repeat="dataum in data"">
<td contenteditable="true">
<input class="form-control" type="text" name="teste" ng-model="dataum.id" placeholder="Forneça o Id">
</td>
<td>
<input class="form-control" type="text" name="teste" ng-model="dataum.fornecedor" placeholder="Forneça o Fornecedor">
</td>
<td>
<input class="form-control" type="text" name="teste" ng-model="dataum.codProduto" placeholder="Forneça o Código do Pruduto"></td>
<td>
<span class="glyphicon glyphicon glyphicon-trash"></span>
</td>
</tr>
</table>
</div>
<button id="export-btn" data-ng-click="exportTable" class="btn btn-primary">Exportar Dados</button>
</div>
<pre>{{data | json}}</pre>
</div>
</div>
</body>
</html>
<script>
angular.module('productsTableApp', [])
.controller('ProductsController', function($scope){
$scope.aux = 0;
// Inicializando Array
$scope.data=[
{id: "001", fornecedor: "Larissa Fornecedor", codProduto: "431"},
{id: "002", fornecedor: "Carlos Fornecedor", codProduto: "523"},
{id: "003", fornecedor: "Rodrigo Fornecedor", codProduto: "123"}
];
// Remove a linha selecionada pelo index
$scope.removeRow = function(index){
$scope.data.splice( index, 1);
};
//Adiciona uma linha no array
$scope.addRow = function(){
$scope.data.push({id: "", fornecedor: "", codProduto: ""})
};
//Envia o conteúdo da tabela para o servidor
$scope.exportTable = function(){
$scope.table[data];
$scope.tabela.push()
};
});
</script>
I am relatively new to plunker, what am I doing wrong? There are errors in the console, and the live preview is not working. The code works perfectly fine in my localhost.
Here's the link for it. http://plnkr.co/edit/cZ48oeBBDthtVqXMRJPy?p=preview
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="less.js#*" data-semver="2.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
<link rel="stylesheet" href="style.less" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<!-- Parent scope -->
<div class="">
<div prevent="" visible="isVisible" object-data="objectData">
<table class="datatable">
<tbody>
<tr ng-repeat="t in templateData">
<td class="haseebtesting" ng-click="current.selected = t; confusedFunction(t)" id="{{'test ' + $index}}">{{t.templateName}}</td>
<td>{{t.templatePath}}</td>
</tr>
</tbody>
</table>
<div ng-show="isVisible" class="parented">
<form class="haseebform">
<input type="text" ng-model="objectData.entername" placeholder="Enter name" />
<br />
<input type="text" ng-model="objectData.entercomment" placeholder="Enter comment" />
<input type="button" class="btn btn-info" ng-click="addT(objectData)" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
plnkr edit
I started it without errors.
script code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="app.js"></script>
You need to move the jquery script above the angular script. When angular loads, if jquery is not present, jqlite is used instead even if jquery is loaded subsequently.
I am new to Angular.
I am getting the error " [ng:areq] Argument 'myTableController' is not a function, got undefined"
I tried to debug it with alerts and I am not hitting Test4 at all
Why is that?
/// <reference path="angular.js" />
alert("Test1");
var app1 = angular.module("myTableModule", []);
alert("Test2");
app1.controller("myTableController", function($scope) {
alert("Test4");
});
alert("Test3");
The following is my html source code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/currentSettings.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div ng-app="myTableModule" ng-controller="myTableController">
<table>
<thead>
<tr>
<th>Company Name</th>
<th>Customer Name</th>
<th>Document Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="currentSetting in currentSettings">
<td>{{currentSetting.companyName}}</td>
<td>{{currentSetting.customerName}}</td>
<td>{{currentSetting.docType}}</td>
</tr>
</tbody>
</table>
</div>
<hr />
<footer>
<p>© 2016 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"4373e3d6a6314b6bb4066b12f1b12d1f"}
</script>
<script type="text/javascript" src="http://localhost:55964/60de32f396fe4106a9655183ab19f24b/browserLink" async="async"></script>
<!-- End Browser Link -->
You need to refer the .js file of your controller in the html file.
Let say if your controller is in a file called controller.js
then in your html you have to write like below
<script src="controller.js" type="text/javascript"/>
To solve the problem I had to recreate the project. Also my path to the web service was not correct.
Thank you for all the help and support
I am using xcode and phonegap for mobile development.When i run the application with simulator,it does not apply any stylesheet. Please let me know how to get rid of this issue.
Here is the index.html Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="stylesheet" type="text/css" href="jqtouch.css" />
<link href="theme.css" rel="stylesheet" type="text/css" />
<script src="Jquery.1.6.1.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jqtouch.js"></script>
<script type="text/javascript">
var jQT = new $.jQTouch({});
</script>
</head>
<body >
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>
NIAID</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Search Users</li>
</ul>
</div>
<div id="get">
<div class="toolbar">
<h1>
NED - Search Users</h1>
</div>
<div class="info">
<center>
<table>
<tr>
<td>
First Name :
<input type="text" id="txtFirstName" />
</td>
</tr>
<tr>
<td>
Last Name :
<input type="text" id="txtLastName" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnSearch" value="Search" />
</td>
</tr>
</table>
</center>
</div>
<ul class="edgetoedge" id="search-results">
<li class="sep">Results</li>
</ul>
<ul id="placeholder" class="edgetoedge">
</ul>
<div class="toolbar">
<a class="back" href="#" onclick="ClearContents()">Back</a></div>
</div>
<div id="Details" style="display: none">
<div class="toolbar">
<h1>
User Details</h1>
</div>
<div class="info">
<div id="result">
</div>
</div>
<div class="toolbar">
<a class="current" href="#" onclick="jQT.goBack();">Back to results</a></div>
</div>
</div>
</body>
</html>
Please let me know what am doing wrong here.
Thanks,
Vishnu
I can't be sure why no css is being applied but the check the following
are you sure you have the right path to css and js files? for js it seems that one js file is under scripts and the other in the same folder as index, the css also seems to be in the same folder - check if that may be your problem. I'm not even sure the the scripts leads to the right path - you can try ./scripts/file
you have 2 viewports meta tags, I'm quite sure this is a mistake. they also partly contradict each other. so probably the browser would override the first one with the second one
to make sure you don't use phonegap api before the device is loaded. best practice to load the page js (besides the libraries) after the devices fires the deviceready event. like this example:
$(document).ready(function(){
document.addEventListener('deviceready',function(){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "./path/to/yourjsscript.js";//change to fit the path
document.getElementsByTagName('body')[0].appendChild(script);
},false);
});
</script>