AngularJS

【Angular.js】Twitterのツイートボタンを表示してくれるディレクティブ。

Gistでこんなものを発見。

directives.directive('twitter', [
    function() {
        return {
            link: function(scope, element, attr) {
                setTimeout(function() {
                        twttr.widgets.createShareButton(
                            attr.url,
                            element[0],
                            function(el) {}, {
                                count: 'none',
                                text: attr.text
                            }
                        );
                });
            }
        }
    }
]);

下記のようにして使う。

<!-- まずtwitterのウィジェットを読み込む -->
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- そしたらこう -->
<a twitter data-text="{{textHere}}" data-url="{{shareLinkHere}}"></a>

 

【Angular.js/holder.js】ng-viewなどで読み込んだテンプレート内のダミー画像を正常にレンダリングさせる。

holder.jsはお手軽にダミー画像を配置できるのでワイヤー作成時など本当に重宝している。
しかしそのまんまAngularJSと組み合わせただけだと、holder.jsのスクリプトが正常に作動してくれないことが判明。

下記のようなディレクティブを定義してやることで正常にレンダリングすることができた。

app.directive('holderFix', function () {
    return {
        link: function (scope, element, attrs) {
            Holder.run({ images: element[0], nocss: true });
        }
    };
});

これを下記のようにして使えばOK。

<img data-src="holder.js/300x200" holder-fix>

 

【AngularJS/socket.io】を用いてウェブソケットアプリを構築する際。

ioのコネクションインスタンスをdiで注入してやらないと正常に動作しないので注意。

下記のようなファクトリーを定義してやればOK。

coreApp.factory('coreSocket', function($rootScope) {
    var socket = io.connect();
    return {
        on: function(eventName, callback) {
            socket.on(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback) {
            socket.emit(eventName, data, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
});
1

これを適宜コントローラーに注入してやればOK。

コントローラーはかきのような感じ。(適当に書いたやつまんまコピペ

1
coreCtrls.controller('indexCtrl', function($scope, coreSocket, $timeout) {
    
    var chatContainer = angular.element('.messages-container');
    $scope.chatStage = '';
    
    $scope.remark = function($event) {
        if ($event.type == 'keypress' && $event.which != 13) {
            return false;
        }
        coreSocket.emit('chatPosted', $scope.message);
        $scope.message = null;
    }
    
    coreSocket.on('chatPosted', function(msg) {
        $scope.chatStage += msg + '\n';
        $timeout(function() {
            chatContainer.scrollTop(chatContainer[0].scrollHeight);
        });
    });
    
    coreSocket.on('disconnect', function() {
        coreSocket.disconnect();
    });
    
});

サーバーサイドはこんな感じ。

io.on('connection', function(socket) {
    
    console.log('a user connected');
    
    socket.on('disconnect', function() {
        
        console.log('user disconnected');
    });
    
    socket.on('chatPosted', function(msg) {
        console.log(msg);
        io.emit('chatPosted', msg);
    });
    
});

ログインユーザーとかルームとかの概念はまだまだ調査ガ必要だなぁ。

 

【Node.js/AngularJS】でアプリケーションを開発する。

下記ページがとてもわかり易い。
上から順に真似していけば雰囲気がすぐにつかめる。
※Angular側の知識がある程度無いと辛いかもしれません。

http://scotch.io/tutorials/javascript/creating-a-single-page-todo-app-with-node-and-angular

これは本当に素晴らしいエントリーです。

 

【AngularJS】AngularJSのモデルとサーバーを同期させる事ができるAngularFire。

AngularJSはモデルとビューの2wayデータバインディングが強みだけど、AngularFireはそれをサーバーサイドまで拡張して、
いうなれば3wayデータバインディングを可能にしてくれるとのこと。

https://www.firebase.com/docs/web/bindings/angular/

AngularsNinjaさんでも取り上げているしこれは面白いことになりそう。

http://angularjsninja.com/blog/2013/09/01/angularfire-realtime-chat-app/

今度試してみよう。

 

【AngularJS】ngOptionsの書き方メモ。

あんまり使わないので忘れるからメモ。

オブジェクトを渡す方法と配列を渡す方法があるんだけど、とりあえず今回はオブジェクトのほう。

<select ng-options="key for (key, value) in {'ばりゅ?1': 'value1', 'ばりゅ?2': 'value2', 'ばりゅ?3': 'value3'}"></select>

これでkeyがoptionの値になりvalueがvalue=””の中に入ってくれる。

まぁ更なる詳細は公式みたほうがいいあるね。

https://docs.angularjs.org/api/ng/directive/select

 

【AngularJS】ng-appを複数共存させる方法。

まず大前提として。

1, ngAppディレクティブの入れ子は出来ません。
2, angularは一番はじめに見つけたngApp以外は自動で起動してくれません。

というのを踏まえると入れ子は厳禁、そして2つ目以降のアプリケーションは自分で起動する必要がある。
のでこうする。

// jQueryが読み込まれていると仮定
angular.element(document).ready(function() {
    angular.bootstrap($('.targetElement'), ['myApp']);
});

angular.bootstrap()の第1引数にはngApp属性が指定されているエレメントを渡す。
※この例ではjQueryが読み込まれていることを前提として$関数にセレクタを渡し、エレメントを参照させている。
そして第2引数に起動したいアプリケーション名(今回はmyAppと仮定)を指定すれば良い。

これで複数のアプリケーションを起動させることが出来る。

 

【AngularJS】orderByフィルターに複数のフィールドを指定する。

引数に配列を渡せばOK。

<ul>
    <li ng-repeat="item in lists | orderBy: ['name', 'number']"></li>
</ul>

的な感じ。