javascript - 在 jquery.load 页面中使用 angularjs

Question

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

在我的测试应用程序中，我尝试使用 AngularJS 实现 MVC 类型的体系结构，但 Angular 无法加载并且在从 .load 函数加载时不起作用。

我在这里搜索了论坛并用 Google 搜索了很多，我发现的唯一另一篇帖子是:https://groups.google.com/forum/#!msg/angular/LufmNlNSxBM/c6rR7Ao1PPgJ

但是，我试图避免我的框架和 Angular 之间的耦合，有没有人知道在使用 jQuery 的 .load 方法加载时获取 Angular 加载的方法？

(如果这个问题不符合 SO 规则，我深表歉意，这是我的第一篇文章。如果有任何歧义或需要更改，我会这样做)

编辑:

Require.js 解决了这个问题，这是我的解决方案和代码:

(main.js) 用于配置要求和添加依赖项(这可以扩展到包括所有需要的依赖项，我只是使用最小值让它加载和运行 Angular

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

然后我创建了一个脚本，该脚本包含在我动态加载的页面中，如下所示: (loadAngular.js)

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

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

最后，这是我加载到页面上的代码，它只使用 ng-model 并在文本框中显示数字。这纯粹用于测试目的。 (测试.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，你可以通过它来控制在哪些view上加载，在哪些view上不加载。看下面的例子

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