2016-06-15 3 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> 

общественности/app.js

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

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

Можно ли это сделать? Правильно ли это?

Thx для ответа!

+0

почему бы не просто использовать IFRAME? – SoluableNonagon

ответ

1

вам нужно сделать угловую начальную загрузку вручную, а не нг-приложение проверки ручной инициализации в here

0

Спасибо Абду, вы правы! Это был ответ!

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> 
Смежные вопросы