如何使用 jquery 加载函数加载 angularjs 应用程序答案

【问题标题】：How to load the anglularjs app by using jquery load funcrion如何使用 jquery 加载函数加载 angularjs 应用程序
【发布时间】：2016-10-18 20:38:03
【问题描述】：

我有 3 个 html 应用程序

http://localhost/apphost/app1/index.html（只是表格）
http://localhost/apphost/app2/index.html（简单的 AngularJS）
http://localhost/apphost/app3/index.html（简单的 AngularJS 与路线）

我有一个 apphost.html 文件，其中包含指向它们中的每一个的链接，它们是通过 ajax 加载的内容区。它适用于 app1，但是当内容是 AngularJS 时，我会收到错误消息。

在通过 AJAX 加载 AngularJS 应用程序的情况下，我需要它来工作。

apphost.html

<!doctype html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>::: all apps :::</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>

  
</head>
<body>

<div class="btn-group" role="group" >
    <a href="app1/index.html" class="btn btn-default" role="button" id="app1"  >App 1</a>
    <a href="app2/index.html" class="btn btn-default" role="button" id="app2"  >App 2</a>
    <a href="app3/index.html" class="btn btn-default" role="button" id="app3"  >App 3</a>
</div>

<div id="contentarea">

</div>


<script>  	


$(document).on( "click", ".btn", function() {  
	$("#contentarea").load($(this).attr("href"));
    return false;
});



</script>

</body>
</html>

app2/index.html

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
  $scope.author = {
    'name' : 'Ray Villalobos',
    'title' : 'Staff Author',
    'company' : 'Lynda.com'
  }
});

<script src="angular.min.js"></script>

<div ng-app="myApp">

    <div ng-controller = "MyController">
	  <h1>{{employee.name}}</h1>
	</div>


</div>




  <script>  	
	var myApp = angular.module('myApp', []);

	myApp.controller('MyController', function MyController($scope) {
	  $scope.employee = {
	    'name' : 'ronnie mund'
	  }
	});  

  </script>

app3/index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Angular Demo</title>
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
</head>
<body>
<div class="main" ng-view></div>

  <script>  	
  	//:::::::::::::::::: app ::::::::::::::::::::::::::::::
	var myApp = angular.module('myApp', [
	  'ngRoute',
	  'myControllers'
	]);

	myApp.config(['$routeProvider', function($routeProvider) {
	  $routeProvider.
	  when('/list', {
	    templateUrl: 'list.html',
	    controller: 'listController'
	  }).
	  when('/details/:itemId', {
	    templateUrl: 'details.html',
	    controller: 'detailsController'
	  }).
	  otherwise({
	    redirectTo: '/list'
	  });
	}]);

  	//:::::::::::::::::: controller ::::::::::::::::::::::::::::::
	var myControllers = angular.module('myControllers', []);

	myControllers.controller('listController', ['$scope', '$http', function($scope, $http) {
	  $http.get('data.json').success(function(data) {
	    $scope.artists = data;
	    $scope.artistOrder = 'name';
	  });
	}]);

	myControllers.controller('detailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
	  $http.get('data.json').success(function(data) {
	    $scope.artists = data;
	    $scope.whichItem = $routeParams.itemId;

	    if ($routeParams.itemId > 0) {
	      $scope.prevItem = Number($routeParams.itemId)-1;
	    } else {
	      $scope.prevItem = $scope.artists.length-1;
	    }

	    if ($routeParams.itemId < $scope.artists.length-1) {
	      $scope.nextItem = Number($routeParams.itemId)+1;
	    } else {
	      $scope.nextItem = 0;
	    }

	  });
	}]);

  </script>

</body>
</html>

文件夹结构

Please get Source code here

【问题讨论】：

标签： jquery angularjs ajax ngroute

【解决方案1】：

要手动加载您的 Angular 应用，您可以像下面这样手动引导它

var app=angular.module('myApp',[]);    
angular.element(document).ready(function() {
          angular.bootstrap(document, ['myApp']);
 });

【讨论】：

我需要当您单击 App2 链接时 app2 加载到 contentarea div 上。如果你愿意，我会给你源代码。