CODEWITHSUNDEEP
javascriptangularjsdependency-injectionangularjs-filter
slevin
slevin

Reputation: 3886

cannot load custom-made filter , Unknown Provider error

I study the book "Angular JS by example" (pp. 79-84) and in the second chapter I created a custom-made filter.

This is the js file (appModule.js)that contains all the module declarations

//root module
angular.module('app', ['ngRoute','7minWorkout']).
config(function ($routeProvider, $locationProvider, $sceDelegateProvider){
//...

//seven min workout app module
angular.module('7minWorkout', []);

This file contains the custom-made filter (filters.js)

angular.module('7minWorkout').filter('secondsToTime', function () {
//...

The only controller for the 7minWorkout module is in the workout.js

angular.module('7minWorkout').controller('WorkoutController',['$scope', '$interval','$location',function($scope, $interval,$location){
//...

and I am not using any filter inside that file

Lastly this is the view

<h4>Workout Remaining - {{workoutTimeRemaining | secondsToTime}}</h4>

I get

Error: [$injector:unpr] Unknown provider: secondsToTimeFilterProvider <- secondsToTimeFilter

I red this page , but I dont know how to proceed to fix this. Before creating the custom-made filter, I had no problems with my app. Any help?

Thanks in advance

Upvotes: 3

Views: 242

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

Your code looks good for me.

As you separated you various component's in each file, you need to refer those file on your index.html

You must have missed to refer filter.js in your index.html

Upvotes: 2

Yaniv Efraim
Yaniv Efraim

Reputation: 6713

My guess is that you are missing reference to your files in the main html file.

Did you add references to all new javascript files that you added?

Upvotes: 1

Related Questions