Develop Reference

angular showing TypeError: Cannot read property 'state' of undefined

I am trying to learn routing by adding routing to a specific page in my rails app using angular which will replace ajax. Below is the console error am getting.
Uncaught Error: [$injector:modulerr] Failed to instantiate module
testApp due to: TypeError: Cannot read property 'state' of undefined
This is how I defined.
app.js
app = angular.module("testApp", ['ui.router']);
app.config([
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mylistings', {
url: '/mylistings',
templateUrl: '/views/mylistings.html',
controller: 'dashboardCtrl'
});
}
]);
app.controller('dashboardCtrl', function ($scope, $http, $stateParams) {
$scope.testing="testdata"
});
mylistings.html
{{testing}}
In this case http://localhost:3000/dashboard is the url I want routing. Could someone tell me what am doing wrong here.

Problem is with definition of config function.
If you use array app.config([]) that means that you write safe code for the dependencies prepared for minification. Syntax is:
app.config(['$arg1', '$arg2', function ($arg1, $arg2) {
}]);
So when code is minified you will get something like:
app.config(['$arg1', '$arg2',function(a,b) {}]);
In your example in app.js change config to following code if you want to write code safe for minification (if you are not using ng-annotate):
app = angular.module("testApp", ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mylistings', {
url: '/mylistings',
templateUrl: '/views/mylistings.html',
controller: 'dashboardCtrl'
});
}
]);
app.controller('dashboardCtrl', function ($scope, $http, $stateParams) {
$scope.testing="testdata"
});
or you can remove [] from config function :
app.config(function ($stateProvider, $urlRouterProvider) {
...
}):

yeoman angular not rendering views

So, I've been trying to set up an app using Yeoman's official angular gen and this hapijs generator for the backend. Now, so far on the backend I've only got the home route serving the index.html as you can see here
server.route({
method: "GET",
path: "/{param*}",
handler: {
directory: {
path: ["../../client/app", "../../client/bower_components"]
}
},
config: {
auth: false
}
});
next();
};
exports.register.attributes = {
name: 'index'
};
The thing is that worked until I tried to add a new service, controller and view to the angular app, when I did so the views stopped rendering.
Heres the service:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
// AngularJS will instantiate a singleton by calling "new" on this function
return {
GetAllMatches: function(){
return $httpq.get(config.steamApiBaseUrl + 'IDOTA2Match_570/GetMatchHistory/v001/?key' + config.steamApiKey + '&accountId' + config.steamAccountId + '&matches_requested=5');
}
};
}]);
Heres the controller:
angular.module('graphMeDota2App')
.controller('MatchesCtrl', ['MatchesService', function ($scope, MatchesService) {
$scope.matches = {};
$scope.getMatches = function(){
MatchesService.GetAllMatches().done(function(response){
$scope.matches = response.data;
});
};
$scope.getHeroPlayed = function(match){
console.log(match);
return 'asdfasdf';
};
}]);
Heres the view:
<div class="jumbotron">
<table>
<tr>
<th>Number</th>
<th>Match Id</th>
</tr>
<tr ng-repeat="match in matches">
<th>{{$index}}</th>
<th>{{match.match_id}}</th>
</tr>
</table>
</div>
And here's my app.js:
angular
.module('graphMeDota2App', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/matches', {
templateUrl: 'views/matches.html',
controller: 'MatchesCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And finally, this is what I get: .
There are no javascript errors, no server sider errors and the views were rendering perfectly before I added my controller/service (both added with the yeoman command line generator).

So, following what Byron Sommardahl said found out the problem was when I was creating my service, specifically this line:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
Only thing I did was remove the first "[]" in the first line, then it started working. Any thoughts on why that happened?
angular.module('graphMeDota2App')
.service('MatchesService', ['$http', 'config', function ($http, config) {

AngularJS DI with different modules

I am having some issues trying to use the Angular dependency injection with different modules. At the moment, I have the following. In my index.html, the files are loaded in the following order (end of <body> tag):
network.js
authentication.js
login.js
app.js
network.js
angular.module('services.network', [])
.factory('Network', ['$http', '$state', function ($http, $state) { ... }]);
authentication.js
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$state', 'Network', function ($state, Network) { ... }]);
login.js
angular.module('controllers.login', [])
.controller('LoginCtrl', ['$scope', function ($scope) { ... }]);
app.js
var app = angular.module('parkmobi', [
'ngRoute',
'services.network',
'services.authentication',
'controllers.login'
]);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation('reflow');
});
}])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
}]);
Up until this point, everything seems to be quite happy. Now, however, I want to use the Authentication service in the LoginCtrl, which I would have thought is done as follows:
login.js
angular.module('controllers.login', ['services.authentication'])
.controller('LoginCtrl', ['$scope', 'Authentication', function ($scope, Authentication) { ... }]);
However, this causes the following injection error:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20Authentication
R/<#http://localhost/testapp/vendor/angularjs/angular.min.js:6:417

Error came because you've injected $state provider in your Authentication factory, without having ui.router module in app.js parkmobi module.
It should use $route instead of $state as your are doing your route in angular-router.
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$route', 'Network', function ($route, Network) { ... }]);
Or if you want to use ui-router then you need to use $stateProvider while registering states & ui.router module should be include in your app.

"Argument 'BrowseController' is not a function, got undefined" in AngularJS 1.3.8

I was working on my AngularJS application and suddenly I received the error "Argument 'BrowseController' is not a function, got undefined" I undid all my changes and tried the answers supplied on here but the problem still remains.
Here is my app.js file
'use strict';
var app = angular
.module('BikeShopApp', [
'ngAnimate',
'ngResource',
'ngRoute',
'firebase',
'toaster',
'angularMoment'
])
.constant('FURL', 'contains url to my application')
.run(function($rootScope, $location) {
$rootScope.$on("$routeChangeError", function(event, next, previous, error) {
// We can catch the error thrown when the $requireAuth promise is rejected
// and redirect the user back to the login page
if (error === "AUTH_REQUIRED") {
$location.path("/login");
}
});
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/browse.html',
controller: 'BrowseController'
})
.when('/browse/:taskId', {
templateUrl: 'views/browse.html',
controller: 'BrowseController'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'AuthController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'AuthController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {
currentAuth: function(Auth) {
return Auth.requireAuth();
}
}
})
.otherwise({
redirectTo: '/'
});
});
and here is the main part of my browse.js controller
'use strict';
app.controller('BrowseController', function($scope, $routeParams, toaster, Task, Auth, Comment, Offer) {
Any help would be greatly appreciated thanks

I've managed to fix this myself, as it turns out at the bottom of my code I was missing a bracket
This is what it as originally
Offer.acceptOffer($scope.selectedTask.$id, offerId, mechanicId.then(function() {
And here is the updated version where I have added the bracket which threw the entire error
Offer.acceptOffer($scope.selectedTask.$id, offerId, mechanicId).then(function() {

Angular UI Router - state.go after module running

There is the following code (posts.js) :
'use strict'
angular.module('myBlog.posts', [
'myBlog.posts.controllers',
'myBlog.posts.directives',
'myBlog.posts.services',
'myBlog.posts.filters',
'ui.router'
]).config(['$stateProvider', '$locationProvider', function(stateProvider, locationProvider) {
stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
and main code (app.js):
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myBlog', [
'myBlog.posts',
'myBlog.controllers',
'myBlog.directives',
'myBlog.filters',
'myBlog.services'
]).run(['$state', function(state) {
state.go('allPosts');
}]);
I got no errors, but this code didn't work (i.e. after module loading I was not got to the 'posts' state. What's wrong?