I'm trying to display some data from JSON file but I can't use ngRoute properly.
For the record, I'm running the files locally using CORS plugin for Chrome.
When I'm trying to access ~/project/13 (where 13 is an ID) the browser return "File not found". There's no errors in the console either.
Here's the code:
hello.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/project/:projectId',{
controller:'GetProjectCtrl',
templateUrl:'project.html'
})
});
myApp.controller('GetProjectCtrl', ['$routeParams','$scope','$http', function($routeParams,$scope,$http){
$http.get('http://localhost:8080/project/'+$routeParams.projectId).
success(function(data) {
$scope.project = data;
});
console.log($routeParams.projectId);
}]);
project.html
<!doctype html>
<html>
<head>
<title>Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
<script src="hello.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="myApp">
<div id="wrapper">
<header>
<div class="header-left">
<h1>Sonar Monitoring Tool</h1>
</div>
</header>
<table ng-controller="GetProjectCtrl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{project.id}}</td>
<td>{{project.name}}</td>
<td>{{project.url}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What am I missing here?
Later edit
Apparently there is an error which is:
Not allowed to load local resource: file:///C:/Users/******/Desktop/Angular/project/13
You need to run youre site under a server. you can use https://www.npmjs.com/package/http-server a simple starters http server with zero configuration ,install using NPM.
Related
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
I'm trying to make a simple Premier League table using a free football data api. When I console log vm.table, I get all the data I should have for the table to work. Does that mean there is a fault in the html file? I'm a total novice with angular and I'm trying to learn it by making this little app. Can someone point me to where my problem is? The console shows no errors or anything, but it simply doesn't print the data into the table as expected.
this is the html file:
<html ng-app="eplApp" lang="en">
<head>
<meta charset="UTF-8">
<title>EPL Feeder</title>
<!-- styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
<!-- scripts -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller='tableCtrl as table'>
<table>
<thead>
<tr><th colspan="4">English Premier League Table</th></tr>
<tr>
<td>Pos</td>
<td>Team</td>
<td>Played</td>
<td>Win</td>
<td>Draw</td>
<td>Loss</td>
<td>GF</td>
<td>GA</td>
<td>GD</td>
<td>Points</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='team in vm.table' ng-class="{top:team.position === 1, cl: (team.position > 1) && (team.position < 5), el:team.position === 5, rel: (team.position > 17)}">
<td>{{team.position}}</td>
<td class="flexbox" ng-click="teamView()">
<img ng-src="{{team.crestURI}}" alt="{{team.teamName}} crest" />
<p class="teamName">{{team.teamName}}</p>
</td>
<td><p>{{team.playedGames}}</p></td>
<td>{{team.wins}}</td>
<td>{{team.draws}}</td>
<td>{{team.losses}}</td>
<td>{{team.goals}}</td>
<td>{{team.goalsAgainst}}</td>
<td>{{team.goalDifference}}</td>
<td>{{team.points}}</td>
</tr>
</tbody>
</table>
This is the script file:
var app = angular.module('eplApp', []);
app.controller('tableCtrl', function($http) {
var vm = this;
vm.table = [];
$http({
headers: { 'X-Auth-Token': '971acba677654cdb919a7ccebd5621e2' },
method: "GET",
url: "http://api.football-data.org/v1/soccerseasons/426/leagueTable"
}).then(function(response) {
vm.table = response.data.standing;
console.log(vm.table);
});
});
You should change,
From
<body ng-controller='tableCtrl as table'>
To
<body ng-controller='tableCtrl as vm'>
it should be similar to this because you use controllerAs syntax in your app.
<tr ng-repeat='team in table.standing' ...
Edit
after editing your question you should use #Sajeetharan answer.
I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response here.
Console is showing error, please check
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="cricApp" ng-controller="cricCtrl">
<div class="form-group">
<h2>Your result</h2>
<table class="table table-striped">
<thead>
<tr><th colspan="4"><h4>Cricket Match Info</h4></th></tr>
<tr>
<th>Sno</th>
<th>unique_id</th>
<th>description</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matchList | filter: nameFilter">
<td>{{$index + 1}}</td>
<td>
{{match.unique_id}}
</td>
<td>{{match.description}}</td>
<td>{{match.title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
$http.get("http://cricapi.com/api/cricket").then(function (response) {
console.log(response);
$scope.matchList = response.data;
});
}
);
</script>
</body>
</html>
your code is fine just replace
$scope.matchList = response.data;
with
$scope.matchList = response.data.data;
because actual data is coming in data inside response.data.
I want tableRow.html to be drawn under the table head but the ng-repeat is not drawing at all and the examples are above the table head. If I drop the row with examples directly into the proper location in index.html it will draw just fine. What am I doing wrong?
index.html
<html>
<head>
<title>Currency Exchange</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h1>A title to the table</h1>
<div>
<div class= "ExTableDiv">
<table class= "ExTable">
<thead>
<tr>
<th class="column">Currency Code</th>
<th class="column">Currency Name</th>
<th class="column">Exchange Rate vs USD</th>
</tr>
</thead>
<tbody ng-controller="TestController"><!--**if you try TestController as TC it will throw an error, why?**-->
<test-directive></test-directive>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/directives/tableFiller.js"></script>
</html>
app.js
(function(){
var app = angular.module('myApp',['exchange-directives']);
app.controller('TestController', ['$http', function($http) {
var table = this;
table.rows = [];
$http.get('/item.json').success(function(data){
table.rows = [{"name":"Captain","rate":"0.8910","inverce":"1.1223"}]; //I added this here so I know I am getting json data
});
}]);
})();
tableFiller.js
(function(){
var app = angular.module('exchange-directives', []);
app.directive('testDirective', function(){
return {
restrict: 'E',
templateUrl: 'js/directives/tableRow.html'
};
});
})();
tableRow.html
<tr ng-repeat='row in TestController.table.rows'>
<td>{{row.name}}</td>
<td>{{row.rate}}</td>
<td>{{row.inverse}}</td>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
<td>Example 3</td>
</tr>
Replace <tr ng-repeat='row in TestController.table.rows'> with
<tr ng-repeat='row in TestController.rows'>
In your controller you're setting table = this, so table.rows actually is this.rows and thus available to the markup via TestController.rows
I am choosing to answer this question:
Also the tutorial I followed on codeschool wraps angular.module within a function but I see that most other examples don't. What is the difference? Why choose one over the other?
This is called an immediately invoked function expression or (IIFE). It is a light-weight way to introduce modules into JavaScript. The goal of using something like this is to ensure lexical scoping of all variables declared at the top level of the module. Without something like this, it is easy to accidentally introduce global variables, which in general is a baaaaad thing.
I can't for the life of me figure out what I'm doing wrong. I'm going off a John Linquist video doing some basic AngularJS routing. When I don't have my table in a partials folder and in my index.html page (and not using ng-view so I don't have to configure routing, it works fine. However, I try to inject my a partial view of my table with <ng-view></ng-view> then I get the error: http://goo.gl/nZAgrj (from the angular docs)
app.js
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
//this is the that iterated over in the partial view's ng-repeat
function AppController($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Routing</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
<h2>Enterprise Crew</h2>
<ng-view></ng-view>
//list.html should be injected here
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
list.html
<table class="table table-striped" style="width: 250px">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td><i class="glyphicon glyphicon-plus-sign"></i> </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.description}}</td>
<td><i class="glyphicon glyphicon-edit"></i></td>
</tr>
</tbody>
</table>
You need to include ng-route.
angular.module('myApp', ['ngRoute']).
cdn:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js
And is it working like that?
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
.controller("AppController", ['$scope',
function ($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
];
}
]);
Ok, response is here : AngularJS 1.2 $injector:modulerr