Browse: Home » AngularJS

AngularJS

【AngularJS】$routeProviderのwhen()でcontrollerAsを指定する。

メモ。

when('/path/to/target', {
    templateUrl: '/index.html',
    controller: 'indexController',
    controllerAs: 'indexController'
})

てな感じ。

 

2014/09/04 _onichannn , ,

【AngularJS】$scope.$apply()の日本語訳。

素晴らしい記事を見つけたのでペタリ。

http://qiita.com/akkun_choi/items/22048f31f9add7fda2c5

$apply()に関してはAngularNinjaさんの下記記事もとてもわかりやすい。

http://angularjsninja.com/blog/2013/12/27/angularjs-apply/

 

2014/09/04 _onichannn , ,

【Angular.js】特定の要素をAngularの管轄外に置く。

特定の要素内だけバインディング対象外にしたい場合など。

<ANY ng-non-bindable>
</ANY>

ng-non-bindableを用いることでバインド対象から除外することが可能。

 

2014/08/18 _onichannn , ,

【Angular.js】Googleアナリティクスへ正常にリクエストを送信する。

ビューのロード完了イベントを拾ってga()メソッドをコールすればOK。

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.path() });
});

 

2014/08/18 _onichannn , ,

【Angular.js】ng-patternで半角のみの入力を許可する。

メモ。

<input type="text" name="userId" ng-pattern="/^[\x01-\x7E]+$/">

これで全角文字を禁止し、半角カタカナも弾くことが出来る。

 

2014/08/12 _onichannn , ,

【Angular.js】config()メソッドに注入できるインスタンスは各種providersのみなので注意。

HTML5モードなどをconfig()メソッドで設定する際に独自のサービスを注入、実行したかったのでためしたところ
どうしてもインジェクターでエラーを吐くので調査してみたところ、「.config()」に注入できるのは$routeProviderのような
プロバイダーのみしか注入出来ないことが判明。

ちなみ「.run()」ブロックではサービスのインスタンスしか注入出来ないことも判明（例:$route）。

これはなかなかエラーが特定出来ずにはまってしまったので今後特に要注しなければ。

 

2014/08/12 _onichannn , ,

【Angular.js】のSEO対策。

angular製のアプリをgoogleに正しく取得してもらうためには、下記記事の通り、ヘッダー内に多少の細工を施す必要がある。

まずは、このページがダイナミックアプリケーションであることを伝えるために、下記metaタグを追加する。

<meta name="fragment" content="!">

次にJavascriptnのwindowオブジェクトに下記変数を定義。

window.prerenderReady = false;

最後にビューのレンダリングが完了した際に上記変数をtrueにしてやる。

window.prerenderReady = true;

window.prerenderReadyに関しては記述の必要性に関して下記のページが参考になる。

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io

window.prerenderReadyのセクションに

There is a high probability that you will not need to include this snippet, but the option is there if you need it.

のような記述が見受けられる。
これは「この記述は必要じゃない可能性が高いけれども、もし必要であるならばオプションとして用意されているよ」って意味なのかな？
兎に角これで動的なタイトルであっても、Google先生は正しく補足してくれるようになる模様。
今後も要調査項目かな。

 

2014/08/12 _onichannn , , ,

【Angular.js】keypressイベントを拾う。

いちいちビューから$eventを渡して判定処理をかくのもダサいので、ディレクティブで定義されてるものを見つけてきた。

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

ビューでこう使う。

<div>
    <input type="text" ng-enter="doSomething()">    
</div>

うん。これは便利。

 

2014/08/12 _onichannn , ,