AngularJS

【AngularJS】aタグなどでページ遷移する際にサーバー側にリクエストを送りたい場合。

html5モードが有効な時にリロードしたかったり、angularのroutingから抜け出したい場合。

aタグのtarget属性に_selfを指定してやればおk。

<a href="/index" target="_self">link</a>

 

【Angular】Angular UI Routerのつかい方自分用メモ。

まずはui-router本体を読み込む

    angular.module('app', [
        'ui.router',
    ]);

configメソッドでこんな感じで設定

    angular
        .module('app')
        .config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
            function($urlRouterProvider, $stateProvider, $locationProvider) {
            $stateProvider
                
                /**
                 * index
                 */
                .state('index', {
                    url: '/',
                    views: {
                        main: {
                            templateUrl: '/index.html',
                            controller: 'indexController',
                            controllerAs: 'index'
                        }
                    }
                })
            
                /**
                 * blog
                 */
                .state('blog', {
                    url: '/blog',
                    views: {
                        main: {
                            templateUrl: '/blog.html',
                            controller: 'blogController',
                            controllerAs: 'blog'
                        }
                    }
                })
                
                ;
            // ルーティングが一致しなかった場合のデフォルト設定はこうする。
            $urlRouterProvider.otherwise('/');
            // html5モードを有効に
            $locationProvider.html5Mode(true).hashPrefix('!');
            
        }]);

あとルーティングを入れ子にできたりもするけどそれはまた今度。

 

【AngularJS】オートリンクフィルタ(修正版)

テキストの中にリンクがあったら自動的にリンクになるやつ。
※同一URLがテキスト内に複数個あっても大丈夫なように修正

.filter('parseUrl', function($sce) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    return function(text, enable, target, style) {
        
        if (!!+enable) {
            target = target || '_blank';
            style = style || null;
            text = text.replace(exp,'<a target="' + target + '" style="' + style + '"href="$1">$1</a>'); 
            
            return $sce.trustAsHtml(text);
        }
        
        return text;
    };
});

 

【AngularJS】で変数をjson文字列に変換したりjson文字列をパースしたりする。

メモ。

■jsonエンコード

angular.toJson(obj, [pretty]);

■jsonデコード

angular.fromJson(json);

 

【AngularJS】フロントサイドでログイン認証機能を実装する。

下記URLのstackさんを参考にやってみた。っていってもほぼそのまんまだけど。

http://stackoverflow.com/questions/20969835/angularjs-login-and-authentication-in-each-route-and-controller

■constants.js(ログインが必要なページ(URI)をここで定義しておく)

app.constant('requireAuth', [
    '/admin/dashboard'
]);

■app.js

app.run(['$rootScope', '$location', 'auth', 'requireAuth',
    function($rootScope, $location, auth, requireAuth) {

    // login check
    $rootScope.$on('$routeChangeStart', function(event) {
        if (requireAuth.indexOf($location.path()) > -1 && !auth.isLoggedIn()) {
            // ログインページに飛ばす
            event.preventDefault();
            $location.path('/login');
        }
    });
}]);

■factories.js

app.factory('auth', function(){
    var user;
    
    return {
        setUser: function(aUser) {
            user = aUser;
        },
        isLoggedIn: function() {
            return (user) ? user : false;
        }
    }
});

■controllers.js(ログインが必要なコントローラーにて)

var controller = function($scope, $location, auth) {
    $scope.$watch(auth.isLoggedIn, function(value, oldValue) {
        if (!value && oldValue) {
            // ログインページに飛ばす
            $location.path('/login');
        }
    }, true);
}

こんな感じでなかなかよさ気に実装することが出来た。
ただしこのままだとページをリロードするとログアウトしてしまうため、そこは$cookieなどをうまく利用してログイン状態を維持しておくのがベター。

 

【AngularJS/Kendo-ui】Angularでkendo-uiを使う。

メモ。

CSSとJSを読み込む。

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" />

<script src="//cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="/angular-kendo.js"></script>

モジュールを読み込む。

angular.module('app', [
    'kendo.directives',
]);

あとは公式のDEMOでも見て好きに使えばおk。

http://demos.telerik.com/kendo-ui/

 

【AngularJS】angular-uiのモーダルウィンドウでcontrollerAsを指定する。

modalInstanceを生成する際に下記のようにする。

var indexController = function($modal) {
    var that = this;
    
    this.data = {};
    
    this.open = function() {

        var modalInstance = $modal.open({
            templateUrl: 'confirm.html',
            controller: 'confirmController as confirmController',
            resolve: {
                data: function() {
                    return that.data;
                }
            }
        });

        modalInstance.result.then(function(rtValue) {
            // ok function
        }, function() {
            // dismiss function
        });
    };
    
}

var confirmController = function($modalInstance, data) {
    var that = this;
    
    this.data = data;
    
    this.ok = function() {

    };

    this.cancel = function() {

    };
};

    
angular
    .module('controllers')
    .controller('indexController', ['$modal', indexController])
    .controller('confirmController', ['$modalInstance', 'data', confirmController])
;

的な感じ。

 

【AngularJS】スタイルガイド日本語訳。

よく参照するのでペタリ。

https://github.com/tama3bb/angularjs-styleguide

AngularJSで開発する際はこれに従うことをオススメする。