Currently, I am utilizing the 'ngbp' angular boilerplate from GitHub to develop my project. My goal is to implement ngProgress for displaying a loader when navigating between sections.
I have successfully installed ngProgress via bower and ensured that the necessary CSS and JS files are in place.
In my app.js file, the configuration looks like this:
(function(app) {
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
app.run(function () {});
app.controller('AppController', ['$scope', function ($scope) {
}]);
}(angular.module("grinFood", [
'grinFood.home',
'grinFood.about',
'grinFood.menu',
'grinFood.catering',
'grinFood.takeithome',
'grinFood.contact',
'templates-app',
'templates-common',
'ui.router.state',
'ui.router',
'ngProgress',
])));
For instance, the catering.js file contains the following code:
(function(app) {
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('catering', {
url: '/catering',
views: {
"main": {
controller: 'CateringController',
templateUrl: 'catering/catering.tpl.html'
}
},
data:{ pageTitle: 'Catering' }
});
}]);
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
var init = function() {
// A definitive place to put everything that needs to run when the controller starts. Avoid
// writing any code outside of this function that executes immediately.
ngProgress.start();
};
init();
}]);
}(angular.module("grinFood.catering", [
'ui.router'
])));
However, I encounter an error stating
TypeError: Cannot read property 'start' of undefinedThe error can be observed here:
Any assistance or guidance on resolving this issue would be highly appreciated. Thank you.