AngularJSのDRYルーティング

Angular JSでルーティングを設定することは、最も難しいことではありません。 したがって、ルートを操作する際に「 繰り返さないでください 」という原則を遵守するのに役立つ可能性のある解決策の1つだけを提案します。











最初に、URLをla RESTのスタイルで作成することをお勧めします。 チーム内でのこのような合意は、プロジェクトが大幅に成長したときに役立ちます。



私たちのサイトが動物飼料を販売しているとしましょう。

URLは次のようになります。

フィードリスト-/＃！/ Dogfoods

フィードページ-/＃！/ Dogfood /：id

いくつかの追加フィード情報-/＃！/ Dogfood /：id / details



/＃！/が必要な理由がわからない場合は、 ここにいます 。 つまり、このようなリンクは、ajaxサイトのseo-friendsと見なされます。



次に、「ドライ」ルーティングと見なすものについて話しましょう。 すべてが単純です-これはURLが定数にある場合です。 それが全体のアイデアです。



これを行うには、URLのリストを.constantに入れるだけです 。 ROUTESと呼びましょう。

.constant('ROUTES', (function () { return { DOGFOODS: '/dogfoods', DOGFOOD: '/dogfood/:id', DOGFOOD_DETAILS: '/dogfood/:id/details' } })())
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ルーティングを構成します。

 .config(['$routeProvider', 'ROUTES', function ($routeProvider, ROUTES) { var pathToIncs = '/pages/'; //,     $routeProvider.when(ROUTES.DOGFOODS, {templateUrl: pathToIncs + 'dogfoods.html', controller: 'dogfoodsCtrl'}); $routeProvider.when(ROUTES.DOGFOOD, {templateUrl: pathToIncs + 'dogfood.html', controller: 'dogfoodCtrl'}); $routeProvider.when(ROUTES.DOGFOOD_DETAILS, {templateUrl: pathToIncs + 'dogfood_details.html', controller: 'dogfoodsDetailsCtrl'}); }])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OK、それはうまくいくはずです。 おそらく今では不要に見えますが、今度は定数を繰り返し使用します。

たとえば、サイトのメインメニュー。 htmlテンプレートでは、次のように簡単に記述します。

 <a href="ROUTES.DOGFOODS">Dogfoods list</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、それは理にかなっていますか？ これで、すべてのURLが1か所にまとめられ、名前を変更する必要がある場合に手作業での作業が少なくなります。 はい、IDEからのサポートがあります。



ああ、ちょっと。 url定数が必要なスコープがわからないため、それらをrootScopeに入れる必要があります。 私には、これはミサゴの汚染ではないようです-URLがそこにあります。



たとえば、次のようにこれを行うことができます。

 .run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) { $rootScope.ROUTES = ROUTES; }])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私も自分自身をそのようなサービスにすることを提案します：

 factory('redirectFactory', ['$location', 'ROUTES', function ($location, ROUTES) { return { goDogfoods: function () { $location.path(ROUTES.DOGFOODS); } }; }])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

redirectFactoryサービスの名前はそれ自体を意味します-例えば、コントローラーや他のサービスからリダイレクトを行うため、例えば、許可、ログアウトなどの間に



だから、うんちが私の中に飛んでいるのをすでに見ています。 実際、パラメーター化されたURLはどうですか？ ここで、フィルターが役立ちます。

私たちが持っているパラメータは言語だとしましょう。 たとえば、 /＃！/ Eng / dogfoodsのようなURLを取得します。

ROUTES定数を変更します。

 .constant('ROUTES', (function () { var langParam = '/:lang'; return { DOGFOODS: langParam + '/dogfoods', ... } })())
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

routeFilterフィルターを作成します。

 .filter('routeFilter', ['$filter', function ($filter) { return function (route) { var langParam = '/:lang'; var langVal = '/*   */'; return route.replace(langParam, langParam.replace(langParam, '/' + langVal)); }; }])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

素晴らしい、今は次のようにしています。

 <a href="/#!{{ROUTES.DOGFOODS | routeFilter}}">Dogfoods list</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

確かに、この後にフィルターをjsで適用する必要があります。

たとえば、 redirectFactoryサービスは次のようになります。

 .factory('redirectFactory', ['$location', 'ROUTES', '$filter', function ($location, ROUTES, $filter) { var 'routeFilter' = $filter('routeFilter'); return { goDogfoods: function () { $location.path(routeFilter(ROUTES.DOGFOODS)); }, ... }])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それがおそらくすべてです。

おわりに

現在、Angular JSに欠けているのは、レシピのコレクションとベストプラクティスです。 常に努力する余地があるので、すべてをよりエレガントに打ち負かすことができると確信しています。 しかし、貯金箱に別のレシピを追加したかっただけです。 私の説明があなたに役立つことを願っています。