Question

我正在寻找一种方法来加载Angular JS而不是在页面加载时，但稍后在需要时加载。

我的用例是一个预先存在的Web应用程序，它使用旧式jQuery和Ajax来显示和替换页面上的各种块。这是在Angular JS之前的时间。

现在，我们需要在这个页面上开发一个更复杂的部分，为此我们要使用Angular JS，因为否则开发所需的功能会非常复杂。在不改变应用程序的情况下，我们希望将Angular仅包含在页面上的这个小部分中（附带一些复杂规则的表单：show，hide，loop等...）

我的问题是这些：

1）如何“按需”启动Angular JS？该页面最初没有加载“ng-app”，“ng-controller”或Angular JS。我可以在需要时使用jQuery添加这些属性并运行一些代码来启动它，但是如果没有页面加载事件，这就无法工作。

2）应该通过HTML片段启动Angular JS，应用程序将在需要时包含该片段。这符合应用程序工作的旧skool方式，因此我们不想改变它。

3）现有应用程序在无冲突模式下使用Prototype JS和jQuery。当Angular JS进入图片时，是否需要采取特殊步骤来防止冲突？

提前致谢。

Answer 1

你可以用

开始角度

  angular.bootstrap(document, ['myApp']);
  $('html').addClass('ng-app: myApp');

Answer 2

＆＃13;

    <html>
    	<head>
    		<script>
    			function injectAngular(e){
    				e.style.display = "none";
    				document.body.setAttribute("ng-app", "MyApp");
    				document.body.setAttribute("ng-controller", "MyCtrl");
    				document.body.setAttribute("ng-init", "name = 'test'");
    				
    				var input = document.createElement('input');
    				input.setAttribute("ng-model", "name");
    				
    				document.body.append(input);
    				
    				var span = document.createElement('span');
    				span.innerHTML = " test <br> <span ng-repeat='x in splitWord() track by $index'> {{x}} <br></span>";
    				
    				document.body.append(span);
    				
    				var script = document.createElement('script');
    				script.onload = function(){
    					var app = angular.module("MyApp", []);
    					app.controller("MyCtrl", function($scope, $http) {
    						$scope.splitWord = function(){
    							return $scope.name.split(/.{0}/);
    						};
    					});
    				};
    				
    				script.src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js";
    				document.head.append(script);
    			}
    		</script>
    	</head>
    	<body>
    		<button onclick="injectAngular(this)">Inject angular</button>
    	</body>
    </html>

＆＃13;

在已加载的非Angular网页上激活Angular JS

2 个答案: