angularJs--Ui-Router详解

Module Configuration

Configure your states in your module's config method.

Be sure to include ui.router as a module dependency.

angular.module("myApp", ["ui.router"]).config(function($stateProvider){
    $stateProvider.state(stateName, stateConfig);
})

$stateProvider

$stateProvider.state(stateName, stateConfig)

Creates a new application state. For alternate usage, see Object-based States

The parameters for .state() are:

stateName

String

A unique state name, e.g. "home", "about", "contacts". To create a parent/child state use a dot, e.g. "about.sales", "home.newest". Read more about nested states: Nested States & Nested Views

// The state() method takes a unique stateName (String) and a stateConfig (Object)
$stateProvider.state(stateName, stateConfig);

// stateName can be a single top-level name (must be unique).
$stateProvider.state("home", {});

// Or it can be a nested state name. This state is a child of the above "home" state.
$stateProvider.state("home.newest", {});

// Nest states as deeply as needed.
$stateProvider.state("home.newest.abc.xyz.inception", {});

// state() returns $stateProvider, so you can chain state declarations.
$stateProvider.state("home", {}).state("about", {}).state("contacts", {});

stateConfig

Object

The stateConfig object has the following acceptable properties. This is just a reference, for usage and details please click the "Learn more..." links.

template, templateUrl, templateProvider

Three ways to set up your templates. Only use one per state (or view, see below)!

template String HTML content, or function that returns an HTML string

templateUrl String URL path to template file OR Function, returns URL path string

templateProvider Function, returns HTML content string

Learn more about state templates

controller, controllerProvider

A controller paired to the state

controller Function OR name as String

controllerProvider Function (injectable), returns the actual controller function or string.

Learn more about controllers

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

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/index');
    $stateProvider
        .state('index', {
            url: '/index',
            views: {
                '': {
                    templateUrl: 'views/index.html'
                },
                'topbar@index': {
                    templateUrl: 'views/topbar.html'
                },
                'main@index': {
                    templateUrl: 'views/home.html'
                }
            }
        })
        .state('index.usermng',{
            url:'/usermng',
            views:{
                'main@index':{
                    templateUrl:'views/usermng.html',
                    controller:function($scope,$state){
                        $scope.addUserType = function(){
                            $state.go("index.usermng.addusertype");
                        }
                    }
                }
            }
        })
        .state('index.usermng.highendusers', {
            url:'/highendusers',
            templateUrl:'views/highendusers.html'
            
        })
        .state('index.usermng.normalusers', {
            url:'/normalusers',
            templateUrl:'views/normalusers.html'
        })
        .state('index.usermng.lowusers', {
            url:'/lowusers',
            templateUrl:'views/lowusers.html'
        })
        .state('index.usermng.addusertype',{
            url:'/addusertype',
            templateUrl:'views/addusertypeform.html'
        })
        .state('index.permission',{
            url:'/permission',
            views:{
                'main@index':{
                    template:'这里是权限管理'
                }
            }
        })
        .state('index.report',{
            url:'report',
            views:{
                'main@index':{
                    template:'这是报表管理'
                }
            }
        })
        .state('index.settings',{
            url:'settings',
            views:{
                'main@index':{
                    template:'这是系统设置'
                }
            }
        })
}]);