Question

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

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

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

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

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

编辑：

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

（main.js）用于配置require和add依赖项（这可以扩展为包含所需的所有依赖项，我只使用最小值来加载它并运行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并显示文本框中的数字。这纯粹用于测试目的。（的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

在jquery.load页面中使用angularjs

1 个答案: