Include eckige App in jquery App

Ich habe 2 Anwendungen, eine eckige App und eine jquery App. Ich möchte meine eckige App mit jQuery laden. Das ist mein Code (wirklich einfach):Include eckige App in jquery App

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>

public/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>

public/app.js

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

angular.module("myApp").controller('AppController', function($scope){ 
    $scope.message = "Hi everyone !"; 
});

Ist es möglich, es zu tun? Ist es ein richtiger Weg?

Thx für die Antwort!

Quelle

2016-06-15 Raptor Jesus

warum nicht nur ein iframe benutzen? – SoluableNonagon

müssen Sie manuell eher Winkel Bootstrap tun, als ng-App Prüfung Manuelle Initialisierung in here

Quelle

2016-06-15 15:35:42 abdoutelb

Dank Abdou, du hast Recht! Das war die Antwort!

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>

public/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>

Quelle

2016-06-16 07:24:41

Antwort

Verwandte Themen