Öffnen eines Modals in einer Route in AngularJS mit Angular-UI-Bootstrap

Ich versuche zu tun, was hier im Wesentlichen beantwortet wurdeDas modale Bootstrap-Fenster kann nicht als Route geöffnet werden

Aber meine Lösung wird einfach nicht funktionieren. Ich bekomme eine Fehlermeldung

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal

My app has the ui.bootstrap module injected - here is my application config

var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])

    // Gets executed during the provider registrations and configuration phase. Only providers and constants can be
    // injected here. This is to prevent accidental instantiation of services before they have been fully configured.
    .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

        // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
        // ------------------------------------------------------------------------------------------------------------   

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            })
            .state('transactions', {
                url: '/transactions',
                templateUrl: '/views/transactions',
                controller: 'TransactionsCtrl'
            })      
            .state('login', {
                url: "/login",
                templateUrl: '/views/login',
                controller: 'LoginCtrl'                
            })

            .state('otherwise', {
                url: '*path',
                templateUrl: '/views/404',
                controller: 'Error404Ctrl'
            });

        $locationProvider.html5Mode(true);

    }])

Ich habe meinen Controller auf Folgendes reduziert:

appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) {
    $modal.open({templateUrl:'modal.html'});
}]);

Letztendlich erhoffe ich mir, wenn eine Anmeldung erforderlich ist, nicht direkt zur Anmeldeseite zu wechseln, sondern einen Dialog aufzurufen.

Ich habe es auch mit dem versuchtonEnter Funktion in derui-router Zustandsmethode. Konnte auch nicht funktionieren.

Irgendwelche Ideen?

AKTUALISIEREN

Ok - es stellt sich heraus, dass sowohl ui-bootstrap.js als auch ui-bootstrap-tpls dies verhindern. Nach dem Lesen der Dokumentation dachte ich, dass Sie die Vorlagen für die Arbeit mit dem ui-bootstrap benötigen. obwohl es so aussieht, als würden alle Plunker nur in die ..tpls-Datei geladen - sobald ich die UI-Bootstrap-Datei entfernt habe, funktioniert mein Modal ... Bin ich blind? oder sagt es nicht wirklich was du in den docs auf github brauchst? -

Jetzt muss ich nur noch herausfinden, wie ich verhindern kann, dass meine URL tatsächlich zu / login wechselt, anstatt nur das Modal anzuzeigen :)

Update 2

Ok, wenn Sie $ state.go ('login') in einem Dienst aufrufen, ist dies für mich erledigt.