this is what my app.js file looks like:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.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'
})
.state('app.alerts', {
url: "/alerts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/alerts.html"
}
}
})
.state('app.profile', {
url: "/profile",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/profile.html"
}
}
})
.state('app.rank-charts', {
url: "/rank_charts",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/rank_charts.html"
}
}
})
.state('overview', {
url: "/overview",
controller: 'OverviewCtrl',
templateUrl: "templates/rubyonic/overview.html"
})
.state('app.claim-details', {
url: "/claim-details",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/claim_details.html"
}
}
})
.state('app.scorecards', {
url: "/scorecards",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/scorecards.html"
}
}
})
.state('app.fnol', {
url: "/fnol",
views: {
'menuContent': {
templateUrl: "templates/rubyonic/fnol.html"
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/overview');
});
Here is my controller.js:
angular.module('starter.controllers', [])
.controller('OverviewCtrl', function($scope,Surveys) {
$scope.surveys = Surveys.all();
})
.controller('NavigationCtrl', function($scope, $state,$ionicHistory) {
// Function to go states. We're using ng-click="go('app.state')" in all our anchor tags
$scope.go = function(path){
// console.log('working. Click was Triggered');
$state.go(path);
// console.log($ionicHistory.viewHistory());
}
//Function to go back a step using $ionicHistory
$scope.goBackAStep = function(){
console.log('clicked');
$ionicHistory.goBack();
}
});
And here is my services.js:
var app = angular.module('starter.services', [])
.factory('Surveys',function(){
var surveys = [{
id: 0,
name: 'Honda Survey Results'
},
{
id: 1,
name: 'Toyota Survey Results'
},
{
id: 2,
name: 'BMW Survey Results'
},
{
id: 3,
name: 'Nissan Survey Results'
},
{
id: 4,
name: 'Tesla Survey Results'
},
{
id: 5,
name: 'Mazda Survey Results'
},
{
id: 6,
name: 'Ford Survey Results'
},
{
id: 7,
name: 'Apple Survey Results'
},
{
id: 8,
name: 'Microsoft Survey Results'
},
{
id: 9,
name: 'IBM Survey Results'
},
{
id: 10,
name: 'Amazon Survey Results'
}
];
return {
all: function() {
return surveys;
},
get: function(surveyId) {
// Simple index lookup
return surveys[surveyId];
}
};
})
I get an Error: [$injector:unpr] Unknown provider: SurveysProvider <- Surveys <- OverviewCtrl error on my console. I think I am injecting the service correctly in the controller don't see what the problem is. Any help would be really appreciated
You forgot to specify starter.services
as a dependency in the module starter.controllers
. This is important because you are injecting Surveys
in your OverviewCtrl
controller.
This is how your controller.js should look like:
angular.module('starter.controllers', ['starter.services'])
.controller('OverviewCtrl', function($scope,Surveys) {
$scope.surveys = Surveys.all();
})
.controller('NavigationCtrl', function($scope, $state,$ionicHistory) {
// Function to go states. We're using ng-click="go('app.state')" in all our anchor tags
$scope.go = function(path){
// console.log('working. Click was Triggered');
$state.go(path);
// console.log($ionicHistory.viewHistory());
}
//Function to go back a step using $ionicHistory
$scope.goBackAStep = function(){
console.log('clicked');
$ionicHistory.goBack();
}
});
Inject your service module to another module as dependency where you want to access it.
angular.module('starter.controllers', ['starter.services'])
You are using services in contollers module, so you need to declare dependency as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With