kikukawa's diary

都内で活動するシステムエンジニアが書いてます。興味を持った技術やハマったポイント、自分用メモをつけてます。最近はweb中心

JSFiddleでangular1.3系、angular-ui-routerを使う

JavaScript AngularJS

JSFiddleはデフォルトで使用するframeworkを選択できます。
しかし、AngularJSは、バージョン1.2までしか用意されていません。
そこで、1.3系を使う方法と、ついでにangular−ui-routerを使う方法までを
自分用のひな形として残します。

サイドバーの設定

Frameworks & Extensions

No-Library (prure JS)
No wrap - in

Fiddle Options

Body tag

<body ng-app="myApp"></body>

External Resources

下記をそれぞれ追加

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js
http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js

編集画面の設定

HTML

<div ui-view></div>

JavaScript

angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',  
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('login', {
                url: '',
                template:'<h1>Hello!!!</h1><div ui-view></div>',
                resolve:{
                    loginUser:function(){return {id:1,name:'john doe'}; }
                }
            })
            .state('login.product', {
                abstract:true,
                url: '/product',
                template:'<div ui-view></div>'
            })
            .state('login.product.detail', {
                url: '/detail',
                resolve:{
                    product:function(loginUser){
                        if(loginUser.id === 1){
                            return 'product for John';
                        } else {
                            return 'product every body';
                        }
                    }
                },
                controller:function($scope,product,$state){
                    $scope.product = product;
                },
                template:'{{ product }} <br />'
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
                console.log(error); 
          })
        $state.go('login.product.detail');
    }]);