3

私は、 'app'という私のモジュールにui.bootstrapを注入しようとしています。私はすでに私のHTMLにJavaScriptのファイルUI-ブートストラップが含まれますが、私は関係なく、私は何をすべきか、エラーの下に取得していない:私はui.bootstrapする任意の依存関係を削除した場合私のモジュールにui.bootstrapを挿入できません

Uncaught Error: [$injector:modulerr] 

は、エラーが表示されなくなります。

ヘッドタグでのjsインポートの順番です。これらのすべてが正常に読み込まれます。 (クロームdevのツールでチェック)

<script src="/Scripts/angular.min.js"></script> 
<script src="/Scripts/angular-route.js"></script> 
<script src="/Scripts/angular-ui-router.min.js"></script> 
<script src="/Scripts/angular-animate.js"></script> 
<script src="/Scripts/ui-bootstrap-tpls-1.2.5.min.js"></script> 

現在AngularJSバージョン1.5.2

app.js

(function() { 
    'use strict'; 

    var app = angular.module('app', [ 
     // Angular modules 
     'ngRoute', 
     'ngAnimate', 
     'ui.bootstrap', 
     // Custom modules 
     // 3rd Party Modules 
     'ui.router' 
    ]); 

    app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$modal', function ($locationProvider, $stateProvider, $urlRouterProvider, $modal) { 
     $locationProvider.html5Mode(true); 

     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('home', { 
       url: '/', 
       controller: 'frontpageController', 
       templateUrl: 'app/views/frontpage.html', 
       data: { 
        authorize: false 
       } 
      }) 
      .state('login', { 
       url: '/login', 
       controller: 'loginController', 
       templateUrl: 'app/views/login.html', 
       data: { 
        authorize: false 
       } 
      }) 
      .state('profile', { 
       url: '/profile/:userId', 
       controller: 'profileController', 
       templateUrl: 'app/views/profile.html', 
       data: { 
        authorize: true 
       } 
      }) 
      .state('error', { 
       url: '/error', 
       controller: 'errorController', 
       templateUrl: 'app/views/404.html', 
       data: { 
        authorize: false 
       } 
      }) 
    }]); 

    app.run(function ($rootScope, loginService) { 
     $rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 
      var authorize = toState.data.authorize; 

      if (authorize && typeof $rootScope.currentUser === 'undefined') { 
       event.preventDefault(); 
       // get me a login modal! 
       loginService() 
      } 
     }); 

    }); 

})(); 
+0

に使用し、私はあなたが状態を使用しているのでngRouteを削除することができると推測しています – Tomer

+0

あなたは完全に正しいですが、私もそれを削除しようとしましたが、私は違いはありません。私は両方の州とルートで遊んでいるので、私は両方のATMを維持しています。 –

答えて

2

サービスをモジュール設定に挿入することはできません。プロバイダのみが許可されます。 $modalは最後のui-bootstrapでも$uibModalという名前に変更されています(コントローラの名前を変更するには)。

したがって、あなたの.configファイルから '$ modal'を削除するには、そのファイルを使用するときにのみ挿入します。

0

あなたは、UI、ブートストラップが一つだけJSファイルを持っていてもよろしいですか? uiブートストラップのすべてのフォルダを確認し、他のJSファイルがない場合は追加してください。

+0

私はかなり確信していますが、100%確実ではありません。私はui-bootstrap.js + ui-bootstrap.tpls.jsを別のorderesで同時にインポートしようとしましたが、同じエラーが発生します。 –

+0

また、異なるバージョンのものは同じですが、ui-bootstrap、テンプレートの有無にかかわらず、通常と縮小されています。 –

0

にはtplslibraryを追加する必要があります。たとえば:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script> 

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap.js"></script> 
+0

自分のウェブサイトに場所を見つけることができません。そこには両方をインポートするよう指示されています。私はちょうど同じ結果でそれを試した:/ –

0

それはあなたの角度のバージョンかもしれません。 AngularJS 1.4.x以上が必要です。

+0

私もそれをチェックしたが、ポストでそれを言及することを忘れないでください。私の角のバージョンは1.5.2です –

-1

バージョン:アンギュラブートストラップ:"~1.1.1"

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 

そして$modalモジュール償却し、代わりにそれのそれは関連はないと思うが、あなたがngRouteとui.routerの両方を使用している$uibModal

+0

非常に曖昧な答え+なぜ私は私のモジュールに注入されたuiのブートストラップを得ることができないのかについて質問しているとき、方程式にバウアーをもたらす。あなたは$モダールについての正しいところが廃止されました。 –

関連する問題