0

私はAngularJSを初めて使用し、モバイルWebアプリケーションを構築しようとしています。さまざまな機能のコントローラー、サービス、ルートを書き始めたとき、index.htmlJSとCSSに含まれるものは日々成長しているようです。たとえば、コントローラーの作成を開始すると、すべての機能のサービスがindex.htmlに含まれるようになります。コーディングのアプローチには根本的な問題があると思います。ホームページのルートが「/home」または「/」の場合、home.htmlはホームページに関連するJSファイルとCSSファイルのみをダウンロードする必要があります。しかし、home.html（view）は、すべてのページのJavascriptとCSSライブラリ全体をダウンロードしているようです。機能に関連するコントローラー、サービス、ディレクティブのJavascriptファイルのみをページにダウンロードするようにアプリを設計するにはどうすればよいですか。簡単な例で説明していただければ幸いです。

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">

<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>
4

1 に答える 1

1

ファイルの合計ペイロード サイズについてはそれほど心配する必要はありませんが、ビルド プロセスと、HTTP リクエストをできる限り減らすようにすることについて考えてください (home.html に含める必要があるのは 1 つの css と 1 つの js だけです)。これはもっと重要です。また、すべてを縮小します。ng-boilerplate をチェックすることをお勧めします。これはAngularアプリの出発点であり、採用すべきベストプラクティスのほとんどを備えています.

https://github.com/joshdmiller/ng-boilerplate

さまざまなディレクトリ レベルのすべての readme ファイルを必ずお読みください。

于 2013-04-17T15:31:58.613 に答える