尝试使用UI-Router

简述

一个用于替代AngularJS的ngRouter的模块。
可以拥有多个视图。

• GitHub: angular-ui/ui-router

APIリファレンス

預備

搭建AngularJS开发环境

请按照这个参考进行设置。

将UI-Router集成

$ bower install angular-ui-router --save

试着使用

模板

<div ui-view="view1"></div>
<div ui-view="view2"></div>

模块的注册

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

路由设置

angular.module('myApp')
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('state1', {
                url: '/state1',
                views: {
                    'view1': {
                        templateUrl: 'views/test1.html'
                    },
                    'view2': {
                        templateUrl: 'views/test2.html'
                    }
                }
            })
            .state('state2', {
                url: '/state2',
                views: {
                    'view1': {
                        templateUrl: 'views/test2.html',
                        controller: 'Test2Ctrl'
                    },
                    'view2': {
                        templateUrl: 'views/test1.html',
                        controller: 'Test1Ctrl'
                    }
                }
            });

        $urlRouterProvider.otherwise('/state1');
    }]);

搬家

angular.module('myApp')
    .controller('myCtrl', function($scope, $state) {
        $state.go('state1');
    });

获取当前信息

活动

提供参考

• AngularUI Routerのつかいかた

AngularJS のテンプレートを入れ子にしたかったから angular-ui-router を使ってみた