Reputation: 1955
I have some problem with my AngularJS-app. I have tried to find some solutions on stackoverflow and so on. But i cant get rid off the problem at all. The error message it self, I understand, but i cant find the problem in my own code.
I have four different controllers in my project, two of them runs like i want - two of them doesnt. I pasted the code which works just fine (githubController), but krisController and eniroController doesnt work at all...
Please help
Thanks in advance
app.js
(function(){
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/index.html", {
templateUrl: "index.html",
controller: "searchForData"
})
.when("/github/:username", {
templateUrl: "templates/github.html",
controller: "githubController"
})
.when("/tv/:channel", {
templateUrl: "templates/tv.html",
controller: "tvController"
})
.when("/eniroSearch/:searchword", {
templateUrl: "templates/eniro.html",
controller: "eniroController"
})
.when("/krisinfo", {
templateUrl: "templates/krisInfo.html",
controller: "krisController"
})
.otherwise({redirectTo:"/index"});
});
}());
eniroController.js
(function() {
var module = angular.module("app"); //Referens till modul
var eniroController = function($scope, eniro, $routeParams){
var onEniroComplete = function(data){
$scope.eniro = data;
$scope.eniroArray = [];
for(var i = 0; i < $scope.eniro.adverts.length; i++){
$scope.eniroArray[i] = $scope.eniro.adverts[i];
}
};
var onError = function(reason) {
$scope.error = "Could not fetch data";
};
var eniroSearch = function(data){
eniro.eniroSearch($scope.searchWord).then(onEniroComplete,onError);
};
$scope.searchWord = $routeParams.searchword;
eniro.eniroSearch($scope.searchWord).then(onEniroComplete, onError);
};
module.controller("eniroController", eniroController);
}());
githubController
(function() {
var app = angular.module("app"); //Referens till modul
var githubController = function($scope, github, $routeParams){
var onGithubComplete = function(data){
$scope.user = data;
github.getRepos($scope.user).then(onGitHubRepos, onError);
};
var onGitHubRepos = function(data){
$scope.repos = data;
};
var onError = function(reason) {
$scope.error = "Could not fetch data";
};
$scope.username = $routeParams.username;
github.getUser($scope.username).then(onGithubComplete, onError);
};
app.controller("githubController", githubController);
}());
krisController
(function(){
var module = angular.module("app");
var krisController = function($scope, kris, $routeParams) {
var onFeedComplete = function(data){
$scope.kris = data;
$scope.krisArray = [];
for(var i = 0; i < $scope.kris.Entries.length; i++){
$scope.krisArray[i] = $scope.kris.Entries[i];
}
};
var onError = function(reason) {
$scope.error = "Could not fetch data";
};
var getFeed = function(data){
kris.getFeed.then(onFeedComplete, onError);
};
kris.getFeed.then(onFeedComplete, onError);
};
module.controller("krisController", krisController);
}());
Error: [ng:areq] http://errors.angularjs.org/1.2.5/ng/areq?p0=krisController&p1=not%20aNaNunction%2C%20got%20undefined at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:6:449 at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:18:250) at Qa (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:18:337) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:61:212 at link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js:7:180) at K (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:49:142) at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:42:172) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:41:337 at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:43:54
index.html
<!DOCTYPE html>
<html lang="sv" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>LXSU Angular-Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/eniroService.js"></script>
<script src="js/eniroController.js"></script>
<script src="js/githubService.js"></script>
<script src="js/githubController.js"></script>
<script src="js/tvController.js"></script>
<script src="js/tvService.js"></script>
<script src="js/search.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="style/dashboard.css" rel="stylesheet">
</head>
<body ng-controller="searchForData">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">LXSU Angular-Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"># <span class="sr-only">(current)</span></a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">#</a></li>
<li><a href="">#</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Search</h1>
<div class="input-group">
<form class="navbar-form navbar-right" name="searchUser" ng-submit="search(searchWord)">
<input type="text" class="form-control" placeholder="Search for..." ng-model="searchWord">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</form>
</span>
</div><!-- /input-group -->
<h2 class="sub-header">{{ error }}</h2>
<div class="table-responsive" >
<table class="table table-striped" ng-view>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 281
Reputation: 691635
Your HTML page has scripts for some controllers, but not for all. They're thus not available to angular.
Missing (at least):
<script src="js/krisController.js"></script>
Upvotes: 2