AngularJS $inject depencies dynamically

by yrezgui

HTML

<p>
    <a href="#/">index</a>
    <br>
    <a href="#/base64">base64</a>
</p>
<hr>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js" ng-autobind></script>

JavaScript

var mainModule = angular.module('main', [], function($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        template : '<h2>Hello World - {{title}}<h2>',
        controller: 'indexController'
    });

    $routeProvider.when('/base64', {
        template: 
            '<h2>Hello World - Base64 page<h2><br>' +
            '<p>Raw: My text</p>' +
            '<p>Encoded: {{base64.encode("My text")}}</p>',
        controller: 'algoController'
    });

    $routeProvider.otherwise({redirectTo: '/'});
});

angular.module('other', []).factory('base64', function() {
    return {

        name: 'Base64',
        readonly: false,

        encode: function(input) {
            return window.btoa(input);
        },

        decode: function(input) {
            return window.atob(input);
        }

    };
});

mainModule.factory('base64', ['$window', function($window) {
    return {

        name: 'Base64',
        readonly: false,

        encode: function(input) {
            return $window.btoa(input);
        },

        decode: function(input) {
            return $window.atob(input);
        }

    };
}]);



var indexController = function($scope) {
    $scope.title = 'Index page';
};

var algoController = function($scope) {
    $scope.base64 = angular.injector(['other']).get('base64');
};