物理システムは、ポテンシャルエネルギーが最小の状態になる傾向があります。 プログラマーも例外ではありません。 そのため、現在トレンドになっているサービスを使用して、angular.jsで開発する際の生活を簡素化する方法について説明します。 ほとんどの場合、私は控えめに私の定型的な建築ソリューションをPRし、スナックのためにコメントで私の経験とアイデアを共有することを提案します。
やる気
ルーチンを最小限に抑え、直感的なアーキテクチャを作成し、いわゆるベストプラクティスをまとめます。
角度の定型は、複雑さの度合いが異なるいくつかのプロジェクトをゼロから作成した結果であり、まず、自分のワークフローで不必要な複雑さを取り除くためにあらゆる方法で試みた結果だと言わなければなりません 。 したがって、いくつかの点で私の決定は開発の主観的な見方によって引き起こされますが、それにもかかわらず、それらはすべて時の試練に合格し、実際的な利点を示しました。
特徴
うなり声
まず、grunt.jsが必要です。 最初に、コードとスタイルファイルを収集して圧縮するために、Gruntが必要になります。 プロジェクトにはすでにGruntfile.jsに 2つのタスクがあります ： grunt installおよびgrunt build-最初はインストール中にさまざまな操作を実行でき、最初のバージョンではbowerを介して必要なライブラリをインストールできます。2番目は上記で書いたように、requireを使用してファイルを収集および縮小します。 js
バウアー
githubでの再実行を回避するには、bowerを使用してライブラリをロードする方が簡単です。 ここで、モジュールフォルダーのパスと名前を簡単に特定できる.bowerrcファイルをマークします。
Require.js
練習、ライブラリとコードがhtmlページで接続されているとき、私は個人的に認知的不協和音を引き起こします。 また、プログラムでコードを接続し、他の言語に馴染みのあるjavasciptの依存関係を判別できるようにしたかったのです。 したがって、私はRequire.jsに非常に熱心であり、それをアプリケーションのフレームワークとして使用しています。 この時点では、Require.jsの詳細な紹介はおそらく省略しますが、単にプロジェクトでの使用方法を指摘するだけです。
したがって、require.jsが提供する主なことは、モジュール性に加えて、アプリケーション全体を1つのファイルに縮小してから圧縮する機能です。 しかし、もちろん、開発中、通常のバージョンのファイルを扱いたいので、 インデックスにロジックとスタイルを接続するための2つのオプションがあります 。
<!--Development--> <link rel="stylesheet" href="app/styles/styles.css"> <!--Production--> <link rel="stylesheet" href="app/styles/styles.min.css"> <!--Development--> <script data-main="app/js/app" src="app/lib/requirejs/require.js"></script> <!--Production--> <script src="app/js/app.min.js"></script>
これにより、開発と本番を切り替えることができます。
同時に、すべてのライブラリ、モジュールなどはアプリケーションの初期化中に接続され、それらの設定はapp.jsファイルで定義されます。
require.config({ baseUrl: 'app', paths: { 'jquery': 'lib/jquery/dist/jquery', 'angular': 'lib/angular/angular', 'text': 'lib/requirejs-text/text' }, shim: { 'jquery': { exports: 'jQuery' }, 'angular': { exports: 'angular', 'deps': ['jquery'] }, 'lib/angular-route/angular-route': { 'deps': ['angular'] } }, config: { 'js/services': { apiUrl: 'http://localhost/api' } } });
次に、ファイルを調べます。
ファイル
/app /js app.js app.min.js controllers.js directives.js filters.js services.js /styles styles.js styles.min.js /templates someone-template.html index.html bower.json package.json .bowerrc Gruntfile.js
プロジェクトの全体的な構造は、特別な問題を引き起こすべきではありません。 サービス、ディレクティブ、コントローラー、フィルターは対応するファイルに設定され、アプリケーションがロードされると自動的に接続されます：
var angular = require('angular'), controllers = require('js/controllers'), services = require('js/services'), directives = require('js/directives'), filters = require('js/filters'); ... angular.forEach(services, function (service, name) { $provide.factory(name, service); }); ... angular.forEach(directives, function (directive, name) { app.directive(name, directive); }); angular.forEach(filters, function (filter, name) { app.filter(name, filter); }); angular.forEach(controllers, function (controller, name) { app.controller(name, controller); });
多くの人、そして私自身が、特定のディスプレイに結び付けられていないが、グローバルに実行されるロジックを適切に引き出す方法を最初に疑問に思ったと思います。 多くの場合、この質問に対する答えはコントローラーです。これはng-controllerを使用してindex.htmlのどこかで呼び出されます。 もちろんこれは致命的ではありませんが、個人的にはこのオプションの方が正しいと思います。
app.run(controllers.GlobalCtrl);
つまり、このコントローラーはアプリケーションの起動時に一度呼び出され、正式にはどのテンプレートにも関連付けられていません。
requirejsへの素晴らしい追加の1つは、require（）を介してAMDモジュールだけでなく、コンパイル中に含めることができる通常のテキストファイル、たとえばhtmlをロードできるテキストモジュールです。 これにより、一般的なビルドにテンプレートファイルを追加できます 。
... .when('/', { controller: controllers.MainCtrl, template: require('text!templates/main.html') }); ...
最後に、以下に関して：
$httpProvider.interceptors.push(['$q', '$error', function ($q, $error) { return { 'request': function (config) { return config; }, 'response': function (response) { return response; }, 'responseError': function (rejection) { $error('Connection error!'); return $q.reject(rejection); } } }]);
私の意見では、リクエストの処理におけるメディエーターは、クライアントとサーバーの相互作用の不可欠な部分であり、これにより、応答をフォーマットしたり、特定のケースではすべてのエラーの集中処理を実装したりできます。
必要以上に言いたくはありません、だからです。 約束されたように、私は自分の実践、考え、提案を共有するコメントで招待します。