相关疑难解决方法(0)

Angular中的控制器代码组织

所以,我正处于Angular的第一个重大项目之中.我有一个控制器正在做大量的工作,它达到了成千上万行JavaScript的程度.

我想以某种方式解决这个问题,但我似乎无法在任何地方找到一个可靠的例子.代码主要由用于对对象进行计算的函数组成,因此指令和模块似乎不是正确的答案,但我可能在那里错了.

你们是如何在大型Angular项目中组织代码的?我应该把它搞砸一下,还是有一种理智的方法将其拆分成易于扫描的文件?

angularjs

28
推荐指数
2
解决办法
8497
查看次数

从模板(视图)中动态加载AngularJS模块

背景: 我们假设为了论证你有100,000个视图(部分).我们还假设您具有视图范围的控制器,以及可能的视图范围的服务和过滤器.尝试设想一个托管100,000个不同的小应用程序的聚合应用程序.

问题: 当你有需要附带控制器的"部分"时,典型的解决方案是做这样的事情:

$routeProvider.when('/app1', {
        templateUrl: 'partials/view1.html',
        controller: 'controller1'
    });
Run Code Online (Sandbox Code Playgroud)

控制器通常从index.html通过以下方式加载:

<script src="js/directives/Controller1.js"></script>
Run Code Online (Sandbox Code Playgroud)

这种方法的问题在于它不能扩展.有动态加载控制器的解决方案,但它们仍然需要在各种配置中添加触摸点.

理想的解决方案: 理想情况下 - 对于数量在000的非常小的应用程序,控制器可以动态加载,也可以从部分内部加载.这将减轻管理多个文件和几个配置触摸点(更不用说网络请求)的需要,并且保持每个部分非常好.

它看起来像这样:

在路由器中:

$routeProvider.when('/apps/:appId', {
        templateUrl: 'partials/app-frame.html',
        controller: 'AppCtrl'
    });
Run Code Online (Sandbox Code Playgroud)

在包含html(app-frame)中包含相对不同的"迷你app":

<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>
Run Code Online (Sandbox Code Playgroud)

在使用appUrl进行部分解析时,在一个中定义控制器标记:

<script>
  myApp.controller('controller1', ['$scope', function ($scope) {
    $scope.foo = "bar";
  }]);
</script>


<div ng-controller="controller1">
     {{foo}}
</div>
Run Code Online (Sandbox Code Playgroud)

对于这样的情况,有很多部分和控制器和视图的1-1映射,将两者结合起来以提高开发效率和维护是有意义的.它比使用多个文件和其他配置触摸点更清晰.

问题是,这不起作用.它可能就像在应用指令之前强制加载脚本一样简单......但不知道如何做到这一点?

以下是对该问题的一些类似解释:

https://groups.google.com/forum/#!topic/angular/H4haaMePJU0

使用Angular和Compile加载部分页面控制器

来自AngularJS团队的Igor说:

I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-routing angular-template

7
推荐指数
1
解决办法
3920
查看次数