在jquery.load页面中使用angularjs

我正在编写一个Web应用程序来适应多设备应用程序。 我已经使用nodejs，socket.io和express来构build框架来处理视图的分布。 框架提供了一个基本的布局，控制视图和组的变化，实际的内容使用jQuery .load调用加载到div元素中。

在我的testing应用程序中，我尝试使用AngularJS实现MVCtypes的体系结构，但Angular无法加载，并且在从.load函数加载时无法工作。

我已经在这里search论坛，谷歌search了很多，而我发现的唯一的其他post是这样的： https ：//groups.google.com/forum/#!msg/angular/LufmNlNSxBM/c6rR7Ao1PPgJ

然而，我试图避免我的框架和Angular之间的耦合，有没有人知道一种方式来获取angular加载时，使用jQuery的.load方法加载？

（我很抱歉，如果这个问题不符合SO规则，这是我的第一篇文章。如果有什么不明确的地方，或者需要改变，我会这样做）

编辑：

Require.js解决了这个问题，这里是我的解决scheme和代码：

（main.js）用于configurationrequire和添加依赖项（这可以扩展为包含所有需要的依赖项，我只是使用最小的来获得它加载和运行的angular度

require.config({ paths: { angular: 'lib/angular/angular.min', jquery: 'lib/jquery-1.11.0.min', app: 'app', }, shim: { angular: { deps: ['jquery'], exports: 'angular' }, } }); 

然后我创build了一个包含在我dynamic加载的页面内的脚本，如下所示：（loadAngular.js）

 require([ 'angular', 'app' // 'services/services', // 'controllers/controllers', // 'directives/directives' ], function(angular) { angular.bootstrap(document, ['MyApp']); }); 

最终，注释行将被使用，并取消注释。

最后，这是我加载到页面上的代码，它只是使用ng-model，并在文本框中显示数字。 这纯粹用于testing目的。 （的test.html）

 <div id='unique' ng-app='MyApp'> <form action=""> <input type="number" ng-model='number'> <br> </form> <h1>The number is currently {{number}}.</h1> </div> <script src = "/js/loadAngular.js"></script> 

Answer 1

使用Require.js来加载angular.js，你可以用它来控制它加载的视图以及它没有加载的视图。 看下面的例子

http://www.codeproject.com/Articles/637430/Angular-js-example-application