2016-06-15 17 views
1

2つのアプリケーション、角型アプリケーションとjqueryアプリケーションがあります。 jQueryを使って角型アプリケーションをロードしたい/jqueryアプリケーションに角型アプリケーションを含める

index.htmlを

<html> 
    <head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
    </head> 
    <body> 
    <div id="div1"></div> 
    <script> 
     $("#div1").load("public/angular.html");//load angular app 
    </script> 
    </body> 
</html> 

公共/ angular.html

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="public/app.js"> 
    </head> 
    <body ng-controller="MyController"> 
    <h1>{{message}}</h1> 
    </body> 
</html> 

公共

angular.module("myApp", []); 

angular.module("myApp").controller('AppController', function($scope){ 
    $scope.message = "Hi everyone !"; 
}); 
をapp.js:これは私のコード(本当に簡単)であります

それは可能でしょうか?それは正しい方法ですか?

返信用Thx!

+0

理由だけではiframeを使用していませんか? – SoluableNonagon

答えて

0

おかげアブドゥにngのアプリ チェックマニュアル初期化よりも、手動ではなく、角度のブートストラップを行う必要があります!それが答えでした!

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    </head> 
    <body> 
    <div id="div1"></div> 
    <script> 
     $("#div1").load("public/angular.html");//load angular app 
    </script> 
    </body> 
</html> 

angular.html /公共

<html> 
    <body> 
    <div ng-controller="MyController"> 
     Hello {{greetMe}}! 
    </div> 

    <script> 
     angular.module('myApp', []).controller('MyController', ['$scope', function ($scope) { 
     $scope.greetMe = 'World'; 
     }]); 

     angular.element(document).ready(function() { 
     angular.bootstrap(document, ['myApp']); 
     }); 
    </script> 
    </body> 
</html> 
関連する問題