所以,我正处于Angular的第一个重大项目之中.我有一个控制器正在做大量的工作,它达到了成千上万行JavaScript的程度.
我想以某种方式解决这个问题,但我似乎无法在任何地方找到一个可靠的例子.代码主要由用于对对象进行计算的函数组成,因此指令和模块似乎不是正确的答案,但我可能在那里错了.
你们是如何在大型Angular项目中组织代码的?我应该把它搞砸一下,还是有一种理智的方法将其拆分成易于扫描的文件?
背景: 我们假设为了论证你有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
来自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)