Unknown provider $sce in AngularJS

Question

I am trying to use the $sce. I set up my code like this:

var app = angular
    .module('app', ['ui.router', 'admin', 'home', 'questions', 'ngResource', 'ngSanitize', 'LocalStorageModule','ajoslin.promise-tracker'])
    .config(['$locationProvider', '$sce', '$sceProvider', '$stateProvider',
        function ($locationProvider, $sceProvider, $stateProvider) {

            $sceProvider.enabled(false);
            $locationProvider.html5Mode(true);

In the controller:

angular.module('questions')
    .controller('QuestionsContentController',
    ['$rootScope', '$sce', '$scope', '$http', '$resource', '$state',
    function ($rootScope, $sce, $scope, $http, $resource, $state) {

        var isNumber = !isNaN(parseFloat($state.params.content));

I checked and I have the angular-sanitize.js v1.2.0-rc.3 loaded.

However I am getting a message:

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

Can anyone help me by suggesting what I am doing wrong. I have followed the example as much as possible but can't find out what's wrong.

Some background:

The reason I think I need to get the $sce is because I have data that I trust 100% and that I want to show on the screen. It's data that contains "<" ">" "&" and thing like this. I set the $sceProvider.enabled(false) but the data still shows up incorrectly. Next I was thinking that maybe I need to do:

$scope.content = data.text; $scope.unsanitizedQuestionText($sce.trustAsHtml(data.text))

and then in my HTML have:

Is this the right way to go about what I need?

Answer 1

$sce is included by default starting with angular 1.2- so you don't need sanitize anymore in order to get $sce. So, with 1.2, you can pass $sce in as any other service. But make sure your angular is version 1.2 (in case you checked the sanitize version vs core).

Answer 2

The problem is you're trying to use $sce, which is a service, inside of the module configuration block. Only providers are accessible in this block.

Change this

.config(['$locationProvider', '$sce', '$sceProvider', '$stateProvider',
  function ($locationProvider, $sceProvider, $stateProvider) {

To this

.config(['$locationProvider', '$sceProvider', '$stateProvider',
  function ($locationProvider, $sceProvider, $stateProvider) {

Since it seems like that extra '$sce' dependency was erroneous anyway. You weren't using it and it wasn't being defined as a parameter.