I have checked all the available solution but didn't help me to resolve the problem.
I have simple code but it fails to run with the mentioned error.
Here is my code
index.html
<!DOCTYPE html>
<html data-ng-app="piApp">
<head>
<script data-require="system.js#*" data-semver="0.16" src="https://jspm.io/system#0.16.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="piController">
<div class="container-
fluid">
<div class="row">
<div class="col-xs-12">
<h1> Dash Board</h1>
</div>
</div>
<div class="row">
<div
class="col-xs-12">
<table class="table table-striped table-hover">
<tbody>
<tr data-ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-="" click="getControllPanel()" class="btn btn-primary">Control Panel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the script.js
'use strict';
var app = angular.module('piApp',[]);
app.controller("piController", ["$scope",
function($scope) {
$scope.data =
[{
name: "Temperature",
value: 25
},
{
name: "Humidity",
value: 75
},
{
name: "Humidity2",
value: 75
}];
}]);
Not able to understand what is causing the mentioned error?
Do I need to have the angular.min.js locally?
Am I missing something trivial?
You have added dependency of angular2, and you have written code of angularjs
Also, you cannot use "data-ng-app" before loading the script. So remove it from html tag, and add it in body.
Add following line in head:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
and remove the first two lines which has dependency of systemjs and angular2
Related
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 in angularjs and nodejs, What i am doing is create a html file name of index.html and make a controller.js file in which printing a console.log message but getting error on browser in console box my code is as follow
<html ng-app>
<head>
<title> App </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container" ng-controller="AppCtrl">
<h1> Contact List App </h1>
<table class="table table-bordered">
<thead>
<tr>
<td> name </td>
<td> Email </td>
<td> mobile </td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
and controller.js code is as follow
function AppCtrl() {
console.log("Hello Bro")
}
First of all you cannot call this a Angular App.
You dont have the module. Declare a module as follows,
var app = angular.module('todoApp', []);
Register a controller,
app.controller("dobController", ["$scope",
function($scope) {
}
You have not refered the angular reference.
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
console.log("Hello Bro");
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="col-md-20">
</div>
</body>
</html>
I am using Bootstrap 3 to create a page that contains a navbar which needs to be fixed (navbar-fixed-top) and a table below. The table is displayed correctly when I just use navbar-default. As soon as I add navbar-fixed-top, the table header seems to go under the navbar. Anything I am missing here ? The sample is available in Plnkr as well : http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Interaction Summary Comparision View</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-loading-spinner/master/angular-loading-spinner.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<!-- Angular logic -->
<script>
// Angular App
var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'restangular', 'ngLoadingSpinner']);
app.factory('dataService', function($http, Restangular) {
var exports = {};
exports.getRestangular = function() {
return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/daa51de397e90387ef51e07e25e971f24c667d0c");
}
exports.getData = function() {
return exports.getRestangular().all("summary.json").getList();
}
return exports;
});
// Controllers
app.controller('SummaryController', function($scope, $rootScope, $filter, dataService) {
$scope.summary = [];
dataService.getData().then(function(data) {
$scope.summary = data.plain();
},
function(data) {
// Error
});
$scope.downloadCsv = function() {
window.open('data:text/csv;charset=utf-8,' + escape(Papa.unparse(angular.toJson($scope.summary))));
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var summaryList = {
name: 'SummaryList',
url: '/',
templateUrl: '/summary_list.html',
controller: 'SummaryController',
};
$stateProvider.state(summaryList);
});
</script>
<!-- Templates -->
<script type="text/ng-template" id="/summary_list.html">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Summary View</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-download-alt" title="Download CSV"></span>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="search form-control" ng-model="search.$" placeholder="Search in table">
</div>
</form>
</div>
</nav>
</div>
<div class="col-sm-12">
<div class="panel panel-default">
<div class="table-responsive">
<table class="table table-hover" ts-wrapper>
<thead>
<th>E2E time</th>
<th>Server time</th>
<th>Step</th>
<th>Total</th>
</thead>
<tr ng-repeat="entry in summary | filter:search" ts-repeat>
<td>{{ entry.e2e_time }}</td>
<td>{{ entry.server_time }}</td>
<td>{{ entry.step }}</td>
<td>{{ entry.total_transactions }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container-fluid">
<span us-spinner="{radius:30, width:8, length: 16}"></span>
<div data-ui-view></div>
</div>
</body>
</html>
Add this in your style
body{
margin-top:70px;
}
#media(max-width: 768px){
body{
margin-top:180px;
}
}
You must use margin-top style on your table
Sadly, bootstrap 3 never included a padding or a margin when you make a navbar fixed. So you should do it manually.
.col-sm-12 {
width: 100%;
margin-top: 3%;
}
This would give some margin!
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 have following html file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="list.css">
</head>
<body class="body" ng-app="myApp" ng-controller="FirstController as ctrl">
<div>
<input type="text" ng-model="inputText">
</div>
<first-tag></first-tag>
</body>
</html>
In this I have an element directive called first-tag.
Following is my js file:-
var app=angular.module('myApp',[]);
app.controller('FirstController',function($http){
var self=this;
$http.get("data.json").success(function(response){
self.data=response.records;
})
})
app.directive('firstTag',function(){
return{
restrict:'E',
replace:true,
templateUrl:'template.html',
controller:'FirstController',
controllerAs:'ctrl'
}
})
In my directive i have declared template.html as the templateURL. Can someone tell me why is following content not working properly in the code?
<table>
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<tr>
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</div>
</table>
Following seems to be working fine though:-
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<p>Name:{{message.modelName}}</p>
<p>Brand:{{message.modelBrand }}</p>
<img src="{{message.imageUrl}}" width="auto" height="auto">
</div>
I want to print above contents in a table.
I think it should be:
<table>
<tr class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img ng-src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</table>