Develop Reference

Cannot read property 'index' of undefined

I am very new to Angular and was trying to use it on my Rails Application. But I got the following error.
TypeError: Cannot read property 'index' of undefined
app.js code
angular.module('ticket', ['ngResource', 'ui.router', 'templates'])
.controller('AppCtrl', ['$rootScope', function($rootScope) {
var _this = this;
return $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
return $rootScope.pageTitle = $route.current.title;
});
}])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/_home.html',
controller: 'MainCtrl'
})
.state('members', {
url: '/members',
templateUrl: 'members/_members.html',
controller: 'MemberCtrl'
})
.state('guards', {
url: '/guards',
templateUrl: 'guards/_guards.html',
controller: 'GuardCtrl'
})
.state('tickets', {
url: '/tickets',
templateUrl: 'tickets/_tickets.html',
controller: 'TicketCtrl'
});
$urlRouterProvider.otherwise('home')
}]);
memberCtrl.js code (inside members directory)
angular.module('ticket')
.factory('Member', ['$resource', function($resource) {
return $resource("/members/:id", {id: "#id"}, {
get: { method: 'GET'},
save: { method: 'POST'},
index: { method: 'GET', isArray: true},
remove: { method: 'DELETE'},
"delete": { method: 'DELETE'},
update: { method: 'PUT'}
});
}])
.controller('MemberCtrl', ['$scope', function($scope, Member) {
console.log(Member.index());
$scope.members = Member.index();
}]);

You need to inject dependency Member in the controller properly.
.controller('MemberCtrl', ['$scope', 'Member', function($scope, Member) {
//^^^^^^^^^^
instead of
.controller('MemberCtrl', ['$scope', function($scope, Member) {

Set default child of abstract nested state in ui-router

I use ui-router.
Here are my nested states:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
How can I set books.new state to be default child of the books abstract state, so then when you hit /books ui-router redirects to /books/new?

There is a working example
We can use built in features. 1) default is such child state which has empty url:
$stateProvider
.state('books', {
abstract: true,
url: '/books/new',
controller: 'BooksCtrl',
..
})
.state('books.new', {
//url: '/new',
url: '',
...
})
.state('books.top', {
url: '^/books/top',
...
});
And 2) to keep /books in place, we can use redirection
$urlRouterProvider.when('/books', '/books/new');
And these links will work as expected:
// href
<a href="#/books">
<a href="#/books/new">
<a href="#/books/top">
//ui-sref
<a ui-sref="books.top">
<a ui-sref="books.new">
Check it here

Try this way:
$stateProvider
.state('books', {
abstract: true,
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '',
templateUrl: 'contents/books-new.html'
});
EDIT: I know that's not very nice, but you can create additional state with same arguments except url:
var booksArgs = {
url: '',
templateUrl: 'contents/books-new.html'
};
$stateProvider.state('books.new', booksArgs);
$stateProvider.state('books.new_', angular.extend({}, booksArgs, {
url: '/new'
}));
Another solution from this post:
In states configuration:
$stateProvider
.state('books', {
url: '/books',
controller: 'BooksCtrl',
templateUrl: 'contents/books.html',
redirectTo: '.new'
})
.state('books.top', {
url: '/top',
templateUrl: 'contents/books-top.html'
})
.state('books.new', {
url: '/new',
templateUrl: 'contents/books-new.html'
});
On module run:
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, { relative: to });
}
});
}]);

Unknown Provider error despite other controllers and services working

This is what my app.js looks like where I have defined the states, controller and urls for all the templates:
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
ionic.Platform.fullScreen()
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
// StatusBar.styleDefault();
StatusBar.hide();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/rubyonic/menu.html",
controller: 'AppCtrl',
reload: true
})
// .state('login', {
// url: "/login",
// templateUrl: "templates/rubyonic/login.html",
// controller: 'AppCtrl'
// })
.state('login', {
url: '/login',
templateUrl: "templates/rubyonic/login.html",
controller: 'LoginCtrl'
})
.state('app.alerts', {
url: "/alerts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/alerts.html",
controller: 'AppCtrl'
}
}
})
.state('app.studies', {
url: "/studies",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/studies.html",
controller: 'AppCtrl',
reload: true
}
}
})
.state('app.study_collections', {
url: "/studies/:studynodeRef",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/overview.html",
controller: 'AppCtrl',
reload: true
}
}
})
.state('app.rank-charts', {
url: "/rank_charts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/rank_charts.html",
controller: 'AppCtrl'
}
}
})
// .state('app.overview', {
// url: "/overview",
// views: {
// 'menuContent': {
// templateUrl: "templates/rubyonic/overview.html"
// }
// }
// })
.state('app.claim-details', {
url: "/claim-details",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/claim_details.html",
controller: 'AppCtrl'
}
}
})
.state('app.scorecards', {
url: "/scorecards",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/scorecards.html",
controller: 'AppCtrl'
}
}
})
.state('app.fnol', {
url: "/fnol",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/fnol.html",
controller: 'AppCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
})
Here is my Login Controller:
angular.module('starter.controllers', ['highcharts-ng'])
.controller('LoginCtrl', ['$scope','$stateProvider','UserService', function($scope,$stateProvider,UserService) {
$scope.credentials = {
username: localStorage.getItem('username') || '',
password: localStorage.getItem('password') || ''
};
$scope.login = function(credentails) {
UserService.login(credentails).then(function(user) {
$scope.loginMessage = false;
localStorage.setItem('username', $scope.credentials.username);
localStorage.setItem('password', $scope.credentials.password);
$state.go('app.studies') ;
}
,
function(data) {
$scope.loginMessage = 'Username/Password Invalid';
}
);
}
if($scope.credentials.username && $scope.credentials.password){
$scope.login($scope.credentials);
}
}])
and here is my UserService which is injected into the login controller:
angular.module('starter.services', [])
.factory('UserService', ['$rootScope', '$q', '$http', function($rootScope, $q, $http) {
return {
login: function(credentails) {
var deffered = $q.defer();
$http({
method: 'post',
url: 'http://localhost/platform/j_spring_security_check',
params: {
'j_username': credentails.username,
'j_password': credentails.password
}
}).success(function(user, status, headers, config) {
userLoggedIn = true;
// $location.path('#/app/studies');
localStorage.setItem('lastLoginTime', new Date().getTime());
$rootScope.$broadcast('USER_LOGIN_SUCCESS');
deffered.resolve(user);
}).error(function(data, status, headers, config){
$rootScope.$broadcast('USER_LOGIN_FAILED');
deffered.reject(data);
});
return deffered.promise;
},
isUserLoggedIn: function() {
return userLoggedIn;
}
};
}])
When I run my app I get the: Error: [$injector:unpr] Unknown provider: $stateProviderProvider <- $stateProvider <- LoginCtrl in my console. I know my controller and services are setup correctly because the other templates along with their controllers work. I would really appreciate if someone could help me fix this.

The reason behind you are getting error is, inside LoginCtrl you are trying to inject the Provider which is $stateProvider, Basically provider are not available inside the controller, They are accessible as service name,If would be $state instead of $stateProvider inside your controller
controller('LoginCtrl', ['$scope','$stateProvider','UserService',
Should be
controller('LoginCtrl', ['$scope','$state','UserService',

async factory in ionic sidemenu

I am using ionic framework for my mobile application
what I need is when I click the side menu links I want the factory service to bring data from the server
what is happening now is only one http request sent to the server when the application run ,but when I click on any link in the side menu no requests sent
myapp.factory('Authy',function ($cookieStore,Auth,$http,$q) {
return {
can_go :function(){
var deffered = $q.defer();
$http.get(mainUrl+"/user_info.json")
.success(function(data){
deffered.resolve(data);
}).error(function(){
deffered.reject();
});
return deffered.promise;
}
}
});
in my controller
myapp.controller("PowerCtrl",function($scope,Authy ,$cookieStore,$http ){
$scope.view_loading = true;
Authy.can_go().then(function(data){
$scope.view_loading = false;
if (data.user){
var user = data.user;
if ((user.country !="") && (user.city != "")) {
$scope.coins = user.coins
$scope.id =user.id
$scope.current_vip =user.current_vip;
$scope.vip_time =user.vip_time;
}else{
window.location.href="#/step2";
}
}else{
window.location.href="#/login";
}
});
});
my routers
myapp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("main",{
url: "/",
templateUrl: "templates/main.html",
controller: "MainCtrl"
})
.state("login",{
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state("register",{
url: "/register",
templateUrl: "templates/register.html",
controller: "RegisterCtrl"
})
.state("step2",{
url: "/step2",
templateUrl: "templates/step2.html",
controller: "StepCtrl"
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
controller: "HomeCtrl",
templateUrl: "templates/home.html"
}
}
})
.state('app.power', {
url: "/power",
views: {
'menuContent': {
controller : "PowerCtrl",
templateUrl: "templates/power.html"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
});

You have to disable caching on the view, its enabled by default , Ex:
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
read more about caching here

ng-click change route in angularjs with param

I would like to change the route of an angularjs application build with ionic framework, but the route didn't change
this is my code of app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.state('app.annuaire.menuitempage', {
url: "/menuitempage/:ID",
views: {
'menuContent' :{
templateUrl: "templates/menuItemPage.html",
controller: function($stateParams){
$stateParams.ID ;
}
}
}
})
.state('app.annuaire', {
url: "/annuaire",
views: {
'menuContent' :{
templateUrl: "templates/annuaire.html",
controller: 'MenuItemCtrl'
}
}
})
And this is the code of my controller
angular.module('starter.controllers', [])
.controller('MenuItemCtrl', function($scope, $http, $location) {
$scope.itemsMenu = {};
var responsePromise = $http.get("http://monguidepratique.com/mobile/getCategories.php?parent_id=0");
responsePromise.success(function(data, status, headers, config) {
//alert(data);
$scope.itemsMenu = data;
});
responsePromise.error(function(data, status, headers, config) {
alert("AJAX failed!");
});
$scope.itemClick = function(path){
alert(1);
$location.path(path);
};
})
And this is my html code in annuaire.html
<div class="col" ng-click="itemClick('/menuitempage/1628')"><img class="img_menu" src="img/home.png"><p class="titre_center">Accueil</p></div>

Try
$location.path(path)
instead of
$state.go(path)
You need to inject $location service into your controller.
Edit
If you are using $state.go - you should to use it next way:
$scope.itemClick = function(id){
$state.go('app.annuaire.menuitempage', {'ID': id})
};
And HTML:
<div class="col" ng-click="itemClick(1628)"><img class="img_menu" src="img/home.png"><p class="titre_center">Accueil</p></div>
The first param is state name, not URL, the second is an Object with your params.

I solved my problem
in annuaire.html i changed
itemClick('/menuitempage/1628')
by
itemClick('/app/menuitempage/1628')
and i changed the route name app.annuaire.menuitempage by
app.menuitempage
.state('app.menuitempage', {
url: "/menuitempage/:ID",
views: {
'menuContent' :{
templateUrl: "templates/menuitempage.html",
controller: 'SubMenuCtrl'
}
}
})