将 angularJS 个应用程序包含在 jquery 个应用程序中

Question

我有 2 个应用程序，一个 angular 应用程序和一个 jquery 应用程序。我想用 jQuery 加载我的 angular 应用程序。这是我的代码（非常简单）：

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 !";
});

可以吗？这是正确的方法吗？

感谢回复！

Answer 1

您需要手动执行 angular bootstrap 而不是 ng-app 检查 here

中的手动初始化

Answer 2

谢谢阿卜杜，你是对的！这就是答案！

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>

将 angularJS 个应用程序包含在 jquery 个应用程序中

Include angularJS app in jquery app

jquery

encapsulation

include

angularjs