2017-07-30 16 views
0

私が取り組んでいるプロジェクトにブートストラップをインストールしようとしていましたが、でヒットしています。私はBowerの両方をインストールしたので、それが関係しているかどうかはわかりませんが、ファイルを見つけるのに問題はないので、私はそうは思わないのです。私はこの問題を知りましたが、スクリプトファイルを参照する順序が重要であることを認識しました。そのため、私が読んだ内容を反映するように変更しましたが、問題は解決しませんでした。ファイルエクスプローラのディレクトリを調べると、core.jsというファイルが見えましたが、それも含めて助けにはなりませんでした。私はそれがファイルを参照する方法と関係があることをかなり確信しているので、私はそのコードを提供しますが、もっと必要なものがあるかどうか尋ねてください。ブートストラップのインストールに関する問題

index.htmlを(ルートフォルダ、テキストが体内にある以下):

<script src="./bower_components/jquery/dist/jquery.js"></script> 

<script src="./bower_components/angular/angular.js"></script> 
<script src="./bower_components/angular-route/angular-route.js"></script> 
<script src="./bower_components/angular-animate/angular-animate.js"></script> 
<script src="./bower_components/angular-aria/angular-aria.js"></script> 
<script src="./bower_components/angular-material/angular-material.js"></script> 

<script src="angulator.js"></script> 
<script src="./components/calculator/calculator.controller.js"></script> 

<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script> 

答えて

0

あなたは

バウアーは、私が表示されていないjqueryの

0

をインストールするエラーを取り除くためにjqueryのを必要としますあなたが提供したコードでjQueryを参照しています。 Bowerを使用してインストールしましたが、引き続き参照を追加する必要があります。このような前

<script src="./bower_components/jquery/jquery.js"></script> 
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script> 
<script src="./bower_components/angular/angular.js"></script> 
<script src="./bower_components/angular-route/angular-route.js"></script> 
<script src="./bower_components/angular-animate/angular-animate.js"></script> 
<script src="./bower_components/angular-aria/angular-aria.js"></script> 
<script src="./bower_components/angular-material/angular-material.js"></script> 

<script src="angulator.js"></script> 
<script src="./components/calculator/calculator.controller.js"></script> 
+0

のjQueryを含めるための正しい方法

も使用パッケージ下bower.ioに与えられる: ' ' – WubbaLubbaDubbDubb

+0

あなたは編集をする前にあなたの質問を読んでいなければなりません。 –

0

輸入jQueryのスクリプト、:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="./bower_components/angular/angular.js"></script> 
<script src="./bower_components/angular-route/angular-route.js"></script> 
<script src="./bower_components/angular-animate/angular-animate.js"></script> 
<script src="./bower_components/angular-aria/angular-aria.js"></script> 

...

+0

最初の行でjQueryスクリプトを参照しています。 WubbaLubbaDubbDubb

0

は、私はあなたが角でのjQueryを混同しているかもしれないと思います。あなたはjQueryを含んでいませんが、あなたは角度を含んでいます(角素材を含みます、それはブートストラップのための競合するフレームワークです)。

角度付きのブートストラップを使用する場合は、標準のブートストラップJSの代わりにng-bootstrapを使用することをお勧めします。角度コンポーネントの内部からブートストラップコンポーネントとやりとりすることができます。これを "標準"(非ブートストラップ)のJavaScript経由で行うと、Bootstrap JSがDOMを突然変異させるとすぐに崩れ始めるでしょう。ビューステートをコンポーネント状態から推測することもできません(データバインディングの代わりにブートストラップJSの関数を呼び出す必要があるため)。

+0

ng-bootstrapにはAngular 4が必要です。https://alligator.io/angular/ng -bootstrap /私はそれを理解していない。私の最初の行は ''です。それはjQueryへの参照ではありませんか?更新:申し訳ありませんが、質問にその行を含めるのを忘れていました – WubbaLubbaDubbDubb

+0

これはjQueryへの参照ですが、パスが間違っている可能性があります。私はそれが '/ bower_components/jquery/dist/jquery.js'であるべきだと思います(" dist "に注意してください - これを確認するためにファイルシステムを見てください)。そしてyes、ng-bootstrapには角度4が必要です。 –

+0

ファイルが見つからないというエラーはなく、私が知る限りAngular 1を使用しているので、パスは間違いありません。 – WubbaLubbaDubbDubb

0

ブートストラップは、ここで適切に

を仕事にjQueryを必要とは、あなたが彼らに私はjQueryのを参照しながら、あなたがミスを犯したと思うの両方

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>Bootstrap</title> 
 
     <link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS--> 
 
     <link rel="stylesheet" href="css/main.css"> <!--Your custom css file--> 
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
     <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
     <![endif]--> 
 

 
    </head> 
 
    <body> 
 

 
     
 
     <!-- Your content goes here --> 
 

 

 
    <script src="js/jquery-1.12.4.min.js"></script><!--jQuery --> 
 
    <script src="js/bootstrap.min.js"></script><!--Bootstrap js--> 
 
    <script src="js/main.js"></script> <!--Your custom javascript file--> 
 
    </body> 
 

 
</html>

0

を含めるべきかです。

それは次のようにする必要があります:

<script src="bower_components/jquery/dist/jquery.min.js"></script> 

ともあなたが他のスクリプトファイルの前にそれが含まれていることを確認してください。私は最初の行でのjQueryを参照https://bower.io/

関連する問題