1

To whom it may concern,

In effort to bind some html, which, to note, will include angular directives, upon injecting an ngSanitize dependency, my app ceases to render. Any thoughts as to why this happens, and whether my code has any blatant issues?

TLDR: everything works fine until bring ngSanitize into the picture!

Working Controller: 

angular.module('appName')
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

Broken Controller:

angular.module('appName', ['ngSanitize'])
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

Console Errors:

Uncaught Error: [$injector:modulerr] Failed to instantiate module appName due to: Error: [$injector:unpr] Unknown provider: $stateProvider

Thank you

Peter Ward

just another profile name
  • 722
  • 1
  • 9
  • 31

2 Answers2

3

Your problem is misunderstanding the difference between a module declaration and a reference to an existing module.

To declare a module there are 2 arguments, the name and the dependency array

angular.module('appName', [/* all the dependencies for this module*/]);

Then when you add components you use the module reference getter that does not have second dependency argument. This getter returns the module object for chaining the component(s) to

angular.module('appName')
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

What you have done is try to inject a dependency into a module reference getter. this in turn over wrote the original declaration for that module

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 1
    Yes, you are right, my problem was that basic misunderstanding. Thanks for helping me work through it, and, happy to say: I have since found the declaration and put ngSanitize there. Thank you everybody! – just another profile name Jul 22 '15 at 20:55
0

You want to inject it in your app.js . In that yeoman generator its - appName / client / app / app.js

angular.module('yourapp', [
  //your injections here
 'ngSanitize',
 'other injection',
 'another injection'

]).config(function ($routeProvider, $locationProvider, $httpProvider) {

You declare all of your apps dependancies here.

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • can inject into any module in the app. Last statement about individual module is not right – charlietfl Jul 22 '15 at 20:39
  • Why shouldn't be just inject directly into the controller? In an app with multiple controllers, would'n that be modular? – Mawg says reinstate Monica Oct 28 '17 at 15:31
  • 1
    @Mawg with what version of angular are you asking this question? This answer was provided for about 1.4~ – ajmajmajma Oct 28 '17 at 15:53
  • I am seeking to understand 1.x (1.5, actually), where I am currently having a problem injecting sanitize and $sce directly into one of my two controllers – Mawg says reinstate Monica Oct 28 '17 at 15:55
  • 1
    @Mawg it’s been a while, but I believe you have to inject all your main dependencies into the app like that, then you inject them into the controllers you are using them in. – ajmajmajma Oct 28 '17 at 16:03
  • I'll try that, thanks. Is it time to switch to Angular 4? Have things like UI-bootstrap been converted? – Mawg says reinstate Monica Oct 28 '17 at 16:05
  • 1
    @Mawg Depends on what you are working on my friend. If you have a greenfield project I would use angular 4 - personal opinion of course. If you are working on a legacy project maybe stay with what you have. I think there is still a angular 1.x bootstrap directives, but you can also find plugins for new versions of angular. good luck! – ajmajmajma Oct 28 '17 at 19:54
  • 1
    Thanks for that (+1). Existing projects will, of course, be finished with 1.x, but I think that it is about time to move up. As to bootstrap, I am also wondering whetheer to switch to CSS grid, but can't think of a S.E site where the question would be allowed – Mawg says reinstate Monica Oct 28 '17 at 22:28