Question

我有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

＆＃13;

<!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>

＆＃13;

APP2 / index.html中

＆＃13;

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

＆＃13;

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

＆＃13;

APP3 / index.html中

＆＃13;

<!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>

＆＃13;

文件夹结构

Please get Source code here

Answer 1

要手动加载角度应用，您可以手动引导它，如下所示

{{1}}

如何使用jquery load funcrion加载anglularjs应用程序

1 个答案: