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
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 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
I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!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>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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 page-scroll" href="#/">Web Designing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());
First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>
I'm trying to use https://github.com/princejwesley/angular-circular-slider
inside my website as a gender slider, it works when I initially load the page with it.
But when I go to another page in the website and then back to the profile, the slider errors out with the error in the title (as seen in the console). The pages use ng-route to load, I would think this is the culprit.
Here is the code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#postsNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Posts</a>
</div>
<div class="collapse navbar-collapse" id="postsNavbar">
<ul class="nav navbar-nav">
<li>Login</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="/app.js"></script>
<script src="/jquery.js"></script>
</body>
</html>
Here also is a Plnkr:
http://plnkr.co/edit/LkzBlHbELK8gHro4XStU
in the menu, click profile to see the circular slider
click login to go back
go to the profile again
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
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>