SEOのメタデータを保存するためのAngularJSサービス

このチュートリアルでは、動的SEOメタデータにこのサービスを使用しようとしました。 https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html SEOのメタデータを保存するためのAngularJSサービス

しかし、問題に直面する - サービスがコントローラのビューの外でアクセスできないようです。ここで<div ui-view></div>

は私が実装しようとしているサービスである：コントローラーで

app.service('SeoMetaService', function() { 

     var metaDescription = ''; 
     var metaKeywords = ''; 
     var title = ''; 
     return { 
      metaDescription: function() { return metaDescription; }, 
      metaKeywords: function() { return metaKeywords; }, 
      title: function() { return title; }, 

      reset: function() { 
       metaDescription = ''; 
       metaKeywords = ''; 
       title = ''; 
      }, 
      setMetaDescription: function(newMetaDescription) { 
       metaDescription = newMetaDescription; 
      }, 
      appendMetaKeywords: function(newKeywords) { 
       for(var i=0;i<newKeywords.length;i++){ 
         if (metaKeywords === '') { 
          metaKeywords += newKeywords[i]; 
         } else { 
          metaKeywords += ', ' + newKeywords[i]; 
         } 
       } 
      }, 
      setTitle: function(newTitle) { title = newTitle; } 
     }; 
    });

用法：

：簡素化メインページ（1ページアプリ）、上

app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) { 
$(document).ready(function() { 
    var keywords = ["bla bla","bla bla blah"]; 
    SeoMetaService.setTitle("title bla bla bla"); 
    SeoMetaService.setMetaDescription("description bla bla bla"); 
    SeoMetaService.appendMetaKeywords(keywords); 

    console.log(SeoMetaService.metaDescription()); 
    console.log(SeoMetaService.metaKeywords()); 
}); 
}]);

<html ng-app="MainPage"> 
<head> 
    <title>{{SeoMetaService.title()}}</title> 

    <meta name="description" content="{{ SeoMetaService.metaDescription() }}"> 
    <meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}"> 
    <base href="/"> 
</head> 

<body> 
<div ui-view></div> 
</body>

したがって、の問題は -iです角度サービスはシングルトンであると考えていました。しかし、コントローラを実行してデータを設定した後は、HTMLで表示されません。

どのように修正するか/何をすべきですか？

出典

2016-08-23 user1935987

角度コントローラの中でjQuery（ '$（document）.ready（）'）を使用しないでください。あなたはそれを必要とせず、コントローラ内のどのような方法でもDOMとやりとりするべきではありません。 – deceze

どうしてですか？私は時々使う。 – user1935987

何のため？ドキュメント*は、コントローラが実行するまでに準備が整うため、余計です。そして、コントローラからDOMを操作しないでください。なぜなら、jQuery mushを書くことに戻るからです。Angularの中核的な強みの1つは、サービス/コントローラ/ビューへの厳密な分離です。これにより、アプリケーションを適切にモジュール化して保守性を高めることができます。途中で複雑なアプリケーションを作成し、それらを拡張して変更する必要があると、コントローラーをDOMに結びつけるとすぐに醜いスポットに遭遇します。 – deceze

WelcomeControllerをViewのレベルで定義したと思います。

したがってSeoMetaServiceは、<div ui-view></div>にある内部のhtmlでのみ表示されます。

あなたはSeoMetaServiceのみコントローラWelcomeControllerを定義するタグの内部にアクセス可能であるので、<html>または<head>のレベルでコントローラWelcomeControllerを定義する必要があります。

また、JQueryへの参照を削除し、にSeoMetaServiceを公開する必要があります。

コードはそのようなものでなければなりません。

HTML：

<head ng-controller='WelcomeController'> 
<title>{{SeoMetaService.title()}}</title> 

    <meta name="description" content="{{ SeoMetaService.metaDescription() }}"> 
    <meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}"> 
    <base href="/"> 
</head>

更新コントローラ：たとえばビューでは、タイトルを更新することができ変えるのであなたは、また別のコントローラにSeoMetaServiceの内容を変更することができます

app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) { 

    var keywords = ["bla bla","bla bla blah"]; 
    SeoMetaService.setTitle("title bla bla bla"); 
    SeoMetaService.setMetaDescription("description bla bla bla"); 
    SeoMetaService.appendMetaKeywords(keywords); 

    console.log(SeoMetaService.metaDescription()); 
    console.log(SeoMetaService.metaKeywords()); 

    // Added to the scope SeoMetaService 
    $scope.SeoMetaService = SeoMetaService; 


}]);

注意を、メタ記述、および新しいビューの内容を反映するメタキーワードを含む。あなたは、キーワード、タイトル、メタ記述およびメタキーワードが更新されるコントローラMyViewControllerを使用してビューを入力するとここでは、コントローラMyViewController

app.controller('MyViewController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) { 

    var keywords = ["xxx","yyy"]; 
    SeoMetaService.setTitle("title my view"); 
    SeoMetaService.setMetaDescription("description my view"); 
    SeoMetaService.appendMetaKeywords(keywords); 

}]);

のための可能な例です。

出典

2016-08-23 07:24:19

サービスはコントローラやスコープにも公開されていないので、それだけではあまり役に立ちません。 – deceze

あなたは正しいです。私はまた、SeoMetaServiceを$ exampleに追加しました –

私が理解したように、 ''のコントローラを作成してその中に 'SeoMetaService'を宣言する必要があります。コントローラからそれを変更できるようになります「」タグの中にあります。 – user1935987

SEOのメタデータを保存するためのAngularJSサービス

答えて

関連する問題