1. ui-router 是以状态驱动的，一个状态等价于该应用内的一个ui部分。
2，使用实例如下，当一个状态被激活后，它所代表的模板html就会被插入到ui-view中。
<!-- in index.html --> <body ng-controller="MainCtrl"> <section ui-view></section> </body>
var myApp = angular.module("myApp", ['ui.router']);myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/PageTab"); $stateProvider .state("PageTab", { url: "/PageTab", templateUrl: "PageTab.html" }) .state("PageTab.Page1", { url:"/Page1", templateUrl: "Page1.html" })});3. 如何激活一个state，方法有三：
1.调用$state.go(to [, toParams] [, options]),to参数是以".”来分隔父状态和子状态
$state.go('contact.detail')将会跳到 'contact.detail'状态$state.go('^')将会跳到父状态.$state.go('^.sibling')将会跳到兄弟状态.$state.go('.child.grandchild')将会跳到子孙状态.
$state.go()- Click a link containing the
ui-srefdirective. Learn More - Navigate to the
urlassociated with the state. Learn More
4. 如何定义state对应的template
$stateProvider.state('contacts', { // 直接写入template内容 template: '<h1>My Contacts</h1>' }) $stateProvider.state('contacts', { templateUrl: 'contacts.html' // 填写template文件地址 }) $stateProvider.state('contacts', { templateUrl: function ($stateParams){ return '/partials/contacts.' + $stateParams.filterBy + '.html'; //template是一个function 返回值为template文件地址 } }) $stateProvider.state('contacts', { templateProvider: function ($timeout, $stateParams) { return $timeout(function () { return '<h1>' + $stateParams.contactId + '</h1>' }, 100); } })