blocks|key|251504|text|我最近一直在使用require模块和angular，并且我已经实现了部分参数和控制器的延迟加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251505|无需对角度源(1.0.2版)进行任何修改即可轻松完成此操作。|251506|存储库：https://github.com/matys84pl/angularjs-requirejs-lazy-controllers。|offset|length|251507|还有一个实现使用了Charles+Fulnecky制作的yepnope+(https://github.com/cmelion/angular-yepnope)。|251508|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/matys84pl/angularjs-requirejs-lazy-controllers|1|https://github.com/cmelion/angular-yepnope^0|0|0|4|1T|0|0|11|16|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$F|10|G|11|1|12]]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I've been playing lately with require modules and angular and I've implemented lazy loading of partials and controllers. 

It can be easily done without any modifications to Angular sources (version 1.0.2). 

Repository: <a href="https://github.com/matys84pl/angularjs-requirejs-lazy-controllers" rel="noreferrer">https://github.com/matys84pl/angularjs-requirejs-lazy-controllers</a> . 

There is also an implementation that uses yepnope (<a href="https://github.com/cmelion/angular-yepnope" rel="noreferrer">https://github.com/cmelion/angular-yepnope</a>) made by Charles Fulnecky.

blocks|key|468260|text|我们所需要的就是将此代码放入我们的应用程序配置中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|468261|++application.config+[
++++"$provide",+"$compileProvider",+"$controllerProvider",+"$routeProvider"
++++,+($provide,+$compileProvider,+$controllerProvider,+$routeProvider)+->

++++++application.controller+=+$controllerProvider.register
++++++application.provider+=+$provide.provider
++++++application.service+=+$provide.service
++++++application.factory+=+$provide.factory
++++++application.constant+=+$provide.constant
++++++application.value+=+$provide.value
++++++application.directive+=+->+$compileProvider.directive.apply+application,+arguments

++++++_when+=+$routeProvider.when

++++++$routeProvider.when+=+(path,+route)+->
++++++++loaded+=+off
++++++++route.resolve+=+new+Object+unless+route.resolve
++++++++route.resolve[route.controller]+=+[
++++++++++"$q",
++++++++++($q)+->

++++++++++++return+loaded+if+loaded

++++++++++++defer+=+$q.defer()

++++++++++++require+[
++++++++++++++route.controllerUrl
++++++++++++],+(requiredController)+->
++++++++++++++defer.resolve()
++++++++++++++loaded+=+on

++++++++++++defer.promise
++++++++]

++++++++_when.call+$routeProvider,+path,+route|code-block|syntax|javascript|468262|为了使用add，需要在我们需要的模块中添加组件(+provider，constant，directive等)。就像这样：|468263|define+[
++"application"
++"services/someService"
],+(
++application
)+->

++application.controller+"chartController",+[
++++"$scope",+"chart",+"someService"
++++,+($scope,+chart,+someService)+->

++++++$scope.title+=+chart.data.title

++++++$scope.message+=+chart.data.message

++]|468264|someService.coffee文件：|468265|define+[
++"application"
],+(
++application
)+->

++application.service+"someService",+->

++++@name+=+"Vlad"|468266|并将我们到控制器的路径添加到controllerUrl中以进行路由：|468267|++application.config+[
++++"$routeProvider"
++++,+($routeProvider)+->

++++++$routeProvider

++++++++.when+"/table",
++++++++++templateUrl:+"views/table.html"
++++++++++controller:+"tableController"
++++++++++controllerUrl:+"controllers/tableController"
++++++++++resolve:
++++++++++++table:+($http)+->
++++++++++++++$http
++++++++++++++++type:+"GET"
++++++++++++++++url:+"app/data/table.json"
++]|468268|tableController.coffee文件：|468269|define+[
++"application"
++"services/someService"
],+(
++application
)+->

++application.controller+"tableController",+[
++++"$scope",+"table"
++++,+($scope,+table)+->

++++++$scope.title+=+table.data.title

++++++$scope.users+=+table.data.users

++]|468270|并且所有组件在我们需要的地方都有“惰性”加载。|468271|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

All we need is put this code in our application config, as that:

<pre><code> application.config [
 "$provide", "$compileProvider", "$controllerProvider", "$routeProvider"
 , ($provide, $compileProvider, $controllerProvider, $routeProvider) -&gt;

 application.controller = $controllerProvider.register
 application.provider = $provide.provider
 application.service = $provide.service
 application.factory = $provide.factory
 application.constant = $provide.constant
 application.value = $provide.value
 application.directive = -&gt; $compileProvider.directive.apply application, arguments

 _when = $routeProvider.when

 $routeProvider.when = (path, route) -&gt;
 loaded = off
 route.resolve = new Object unless route.resolve
 route.resolve[route.controller] = [
 "$q",
 ($q) -&gt;

 return loaded if loaded

 defer = $q.defer()

 require [
 route.controllerUrl
 ], (requiredController) -&gt;
 defer.resolve()
 loaded = on

 defer.promise
 ]

 _when.call $routeProvider, path, route
</code></pre>

For use add require our components in modules where we need ( provider, constant, directive etc ). Like that:

<pre><code>define [
 "application"
 "services/someService"
], (
 application
) -&gt;

 application.controller "chartController", [
 "$scope", "chart", "someService"
 , ($scope, chart, someService) -&gt;

 $scope.title = chart.data.title

 $scope.message = chart.data.message

 ]
</code></pre>

someService.coffee file:

<pre><code>define [
 "application"
], (
 application
) -&gt;

 application.service "someService", -&gt;

 @name = "Vlad"
</code></pre>

And add to controllerUrl our path to controller for routing:

<pre><code> application.config [
 "$routeProvider"
 , ($routeProvider) -&gt;

 $routeProvider

 .when "/table",
 templateUrl: "views/table.html"
 controller: "tableController"
 controllerUrl: "controllers/tableController"
 resolve:
 table: ($http) -&gt;
 $http
 type: "GET"
 url: "app/data/table.json"
 ]
</code></pre>

tableController.coffee file:

<pre><code>define [
 "application"
 "services/someService"
], (
 application
) -&gt;

 application.controller "tableController", [
 "$scope", "table"
 , ($scope, table) -&gt;

 $scope.title = table.data.title

 $scope.users = table.data.users

 ]
</code></pre>

And all components have "lazy" load in place where our need.

I've been playing with the seed app for AngularJS and I noticed that most dependencies (controllers, directive, filters, services) for the app are loaded up front. I was wondering how to modularize an Angular app into smaller bytes, where dependencies aren't loaded unless required.

For example, if I had a large application that had a cart, add/edit shipping address, search results, product details, product lists, etc... A user on a shopping site may never encounter any of these views, but it looks like (from the seed app) that the code for these all views are loaded in at startup.

How is modularity mitigated in AngularJS?

How is modularity mitigated in AngularJS?

路由

我一直在使用AngularJS的seed应用程序，我注意到该应用程序的大多数依赖项(控制器、指令、过滤器、服务)都是预先加载的。我想知道如何将一个Angular应用程序模块化成更小的字节，除非需要，否则不会加载依赖项。例如，如果我有一个大型应用程序，其中包含购物车、添加/编辑发货地址、搜索结果、产品详细信息、产品列表等...

问在AngularJS中模块化是如何减轻的？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在AngularJS中模块化是如何减轻的？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在AngularJS中模块化是如何减轻的？
EN