Develop Reference

TypeError: Cannot read property 'go' of undefined with injected $state

i already checked on stackoverflow and i see there are duplicate posts, but none of them resolved my issue. The issue with most of the cases is the injection of the $state. But i already injected in my controller above and still having the same issue.
My code:
App.js
var app = angular.module('app', [
'wizardControllers',
'claimDataService',
'ui.router'
]);
app.config(function($stateProvider, $urlRouterProvider){
// Otherwise
$urlRouterProvider.otherwise("/flight-details");
$stateProvider
.state('flight-details', {
url: "/flight-details",
controller: 'FlightDetailsController',
templateUrl: "partials/flight-details.html"
})
.state('flight-problem', {
url: "/flight-problem",
controller: 'FlightProblemController',
templateUrl: "partials/flight-problem.html"
})
});
Controller:
var wizardControllers = angular.module('wizardControllers', ['ngAnimate']);
wizardControllers.controller('FlightDetailsController', ['$scope','$state','$http','claimDataService', function ($scope,$state,$http,claimDataService){
$scope.claim = {};
$scope.claim_data = claimDataService.get();
$scope.nextStep = nextStep;
function nextStep(){
claimDataService.set($scope.claim);
$scope.$state.go("flight-problem");//Giving Me the error
}
}]);

Remove $scope before $state, try this
$state.go("flight-problem");//Working fine

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) {
...
}):

AngularJS: Services error, service not defined. What am I doing wrong?

It was working fine when I used the $http service, but I wanted to make it RESTful. I'm getting errors now. Can someone kick me in the right direction? What am I doing wrong?
app.js:
'use strict';
angular
.module('swoleincApp', [
'ngRoute',
'ngSanitize',
'ngAnimate',
'ngResource'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/models', {
templateUrl: 'app/views/main.html',
controller: 'MainCtrl'
})
.when('/models/:modelId', {
templateUrl: 'app/views/individual.html',
controller: 'ProfileCtrl'
})
.otherwise({
redirectTo: '/models'
});
$locationProvider.html5Mode(true);
}]);
ProfileService.js:
'use strict';
angular
.module('swoleincApp')
.factory('Profile', ['$resource', ProfileService]);
function ProfileService($resource) {
return $resource('app/storage/individual/:modelId.json', {}, {
query: {
method: 'GET',
params: {
modelId: 'individual'
},
isArray: true
}
});
}
ProfileCtrl.js:
'use strict';
angular
.module('swoleincApp')
.controller('ProfileCtrl', ['$scope', ProfileCtrl]);
function ProfileCtrl($scope) {
$scope.profile = Profile.query();
}
When I load the models/:modelId page, the page loads respective to the modelId that was clicked but the angular doesn't compile or whatever, I just get brackets with strings in them.
I also get this error (note I am using Laravel with Homestead and VirtualBox):
ReferenceError: Profile is not defined
at new ProfileCtrl (http://laravel.app/app/js/controllers/ProfileCtrl.js:8:19)
at e (http://laravel.app/app/js/dependencies/angular.min.js:39:193)
at Object.instantiate (http://laravel.app/app/js/dependencies/angular.min.js:39:310)
at http://laravel.app/app/js/dependencies/angular.min.js:80:313
at A.link (http://laravel.app/app/js/dependencies/angular-route.min.js:7:268)
at aa (http://laravel.app/app/js/dependencies/angular.min.js:73:90)
at K (http://laravel.app/app/js/dependencies/angular.min.js:62:39)
at g (http://laravel.app/app/js/dependencies/angular.min.js:54:410)
at http://laravel.app/app/js/dependencies/angular.min.js:53:480
at http://laravel.app/app/js/dependencies/angular.min.js:55:397 <div ng-view="" class="view-frame ng-scope" data-ng-animate="1">(anonymous function) # angular.min.js:107
http://laravel.app/models/dom Failed to load resource: the server responded with a status of 404 (Not Found)

Seems like in your controller
function ProfileCtrl($scope) {
$scope.profile = Profile.query();
}
you didn't inject Profile factory.

Separating my Controller and Factory from App.js - AngularJS

Trying to separate my Controllers and Factories from out of my large app.js file. I learned Angular by putting everything into one file, but now I am trying to organize it all by separating my files.
Originally I had something like this (app.js).
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/faq', {
templateUrl: 'pages/faq.html',
controller: 'FAQController'
})
.otherwise({
redirectTo: '/unknown'
});
});
app.factory('FAQMethodService', function() {
return {
faqs: [
{
question : "Another FAQ",
answer : "Another FAQ."
},
{
question : "Another FAQ",
answer : "Another FAQ."
},
{
question : "Another FAQ",
answer : "Another FAQ."
},
{
question : "Another FAQ",
answer : "Another FAQ."
}
]
};
});
app.controller('FAQController', function($scope, FAQMethodService) {
$scope.faqList = FAQMethodService.faqs;
$scope.title = "FAQ";
});
app.controller('HomeController', function($scope) {
$scope.title = "Home";
});
For my first step of separation I deleted the section of FAQController from app.js, and made a new file called faqController.js (which I included in my index.html).
angular.module('app').controller('FAQController', ['$scope', '$http', function($scope, FAQMethodService) {
$scope.faqList = FAQMethodService.faqs;
$scope.title = "FAQ";
}]);
When I open my FAQ page I get the $scope.title variable (as I display it), but my FAQMethodService information does not show up.
Question: How can I get my Factory when my Controller is in another file (and can I separate my Factory to another file too)?

When registering things using the array notation, the names and sequence of string arguments must match exactly with the sequence of the constructor function's parameters.
You have a mismatch. You've asked Angular to inject $http into your controller as FAQMethodService
.controller('FAQController', ['$scope', '$http', function($scope, FAQMethodService) {
It should be:
.controller('FAQController', ['$scope', 'FAQMethodService', function($scope, FAQMethodService) {

AngularJS templates title not rendering

I am using the following code to display page titles for each of my AngularJS app template, but whenever I try to enter an invalid URL to test the .otherwise I get the following error:
TypeError: Cannot read property 'title' of undefined
at http://localhost/app/js/app.js:34:43
Below is the app.js, index.html code used:
app.js:
var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home',
{ templateUrl: 'templates/index.html',
controller: 'MainController',
title: 'Welcome to Home Page'
});
$routeProvider.otherwise({
redirectTo: '/home',
title: '404 Not found'
});
}]);
myApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
Index.html:
<title ng-bind="title +' - MyAPP Home'"> - MyApp</title>
Can someone please help by telling me what exactly I am doing wrong and how to fix?
Thanks

Change this
myApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
to this and it will work
myApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute) {
$rootScope.title = currentRoute.title;
});
}]);

Just try
$routeProvider.otherwise({
redirectTo: '/home',
title: ''
});

The title property in the provider is required by the routeChange Event.
You should try something like this in order to fix.
$routeProvider
.when('/home', {
templateUrl: 'templates/index.html',
controller: 'MainController',
title: 'Welcome to my page'
}).otherwise({
redirectTo: '/home',
title: ''
});

I am looking at the documentation right now and I don't see any field called title that can be used in that way, could you have a read at:
angular docs
I'll make myself more clear then, you shouldn't be adding random properties in the route object just because you can. You are getting this error message because every time a route changes the event is fired, in this case, when you change the url to something that doesn't match /home, the default route kicks in, which then looks for that random property you set on the route object which it won't find, since you haven't defined it for any other case than the route /home.
Also, any property that you have to access with $$ means is private to angular and it shouldn't be used lightly (what if in the next release they add a private property called title and you are overwriting it?)
If you want to set the title of the page when you have change the route, then you should do that in the controller that gets assigned to that route.