2016-03-30 2 views
2

私はテンプレートhomepage.html2次元テンプレートの外部jqueryファイルをインポートするには?

に外部jqueryのファイルをインクルードする必要があり

app.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'templates/homepage.html', 
    directives: [] 
}) 
export class AppComponent { 

} 

を次のようにコンポーネントにテンプレートがあり、角度2アプリを持っていますhomepage.htmlに外部スクリプトファイルを含めてみましたが、以下のように動作していないようです。

<script src="/src/js/jquery.min.js"></script> 
<script src="/src/js/jquery.scrollex.min.js"></script> 
<script src="/src/js/jquery.scrolly.min.js"></script> 
<script src="/src/js/skel.min.js"></script> 
<script src="/src/js/util.js"></script>  
<script src="/src/js/main.js"></script> 

boot.tsファイル私はindex.htmlの中で自分自身をの.jsファイルをロードしようとしたこの

/// <reference path="../typings/browser.d.ts" /> 
import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from "./app.component"; 

bootstrap(AppComponent); 

index.htmlを

<html> 
<head> 
    <base href="/"> 
    <title>Angular 2 Boilerplate</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.js"></script> 

<!-- 
    <link rel="stylesheet" href="src/css/app.css"> --> 
</head> 
<body> 
<my-app>Loading...</my-app> 

<script> 
    System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('app/boot') 
      .then(null, console.error.bind(console)); 
</script> 
</body> 
</html>  

のように見えるが、それは動作しません。私はかなり角度2に新しいです。

答えて

0

コンポーネントテンプレートのスクリプトタグは削除されました。

回避策は、スクリプトタグを必須に追加するか、require(...)を使用して読み込みます。 angular2: including thirdparty js scripts in component
- - https://github.com/angular/angular/issues/7720
- How to Append <script></script> in javascript?

+0

任意のクリーンな方法複数のスクリプトをロードするために


も参照してください?私は読み込む5つのスクリプトがあります。 – user2180794