/// var myApp = angular.module('testModule'); interface MyAppScope extends ng.IScope { items: string[]; things: string[]; } myApp.config(( $stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider, $urlMatcherFactory: ng.ui.IUrlMatcherFactory) => { var matcher: ng.ui.IUrlMatcher = $urlMatcherFactory.compile("/foo/:bar?param1"); $urlMatcherFactory.caseInsensitive(false); var isCaseInsensitive = $urlMatcherFactory.caseInsensitive(); $urlMatcherFactory.defaultSquashPolicy("nosquash"); $urlMatcherFactory.strictMode(true); var isStrictMode = $urlMatcherFactory.strictMode(); $urlMatcherFactory.type("myType2", { encode: function (item: any) { return item; }, decode: function (item: any) { return item; }, is: function (item: any) { return true; } }); $urlMatcherFactory.type("fullType", { decode: (val) => parseInt(val, 10), encode: (val) => val && val.toString(), equals: (a, b) => this.is(a) && a === b, is: (val) => angular.isNumber(val) && isFinite(val) && val % 1 === 0, pattern: /\d+/ }); var obj: Object = matcher.exec('/user/bob', { x:'1', q:'hello' }); var concat: ng.ui.IUrlMatcher = matcher.concat('/test'); var str: string = matcher.format({ id:'bob', q:'yes' }); var arr: string[] = matcher.parameters(); $urlRouterProvider .when('/test', '/list') .when('/test', '/list') .when('/test', '/list') .when(/\/test\d/, '/list') .when(/\/test\d/, ($injector: ng.auto.IInjectorService, $location: ng.ILocationService) => '/list') .when(/\/test\d/,['$injector', '$location', ($injector: ng.auto.IInjectorService, $location: ng.ILocationService) => '/list']) .when(matcher, '/list') .when(matcher, ($injector: ng.auto.IInjectorService, $location: ng.ILocationService) => '/list') .when(matcher, ['$injector', '$location', ($injector: ng.auto.IInjectorService, $location: ng.ILocationService) => '/list']) .otherwise("/state1"); // Now set up the states $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html", params: { param1: "defaultValue", param2: undefined } }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function ($scope: MyAppScope) { $scope.items = ["A", "List", "Of", "Items"]; } }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: ['$scope', function ($scope: MyAppScope) { $scope.items = ["A", "List", "Of", "Items"]; }] }) .state('state2', { url: "/state2", templateUrl: "partials/state2.html" }) .state('state2.list', { url: "/list", templateUrl: "partials/state2.list.html", controller: function ($scope: MyAppScope) { $scope.things = ["A", "Set", "Of", "Things"]; } }) .state('list', { parent: 'state3', url: "/list", templateUrl: "partials/state3.list.html", controller: function ($scope: MyAppScope) { $scope.things = ["A", "Set", "Of", "Things"]; } }) .state('state4', { url: "/state4", templateUrl: function($stateParams: ng.ui.IStateParamsService){ //Logic could go here based on $stateParams return "partials/state4.html"; } }) .state('index', { url: "", views: { "viewA": { template: "index.viewA" }, "viewB": { template: "index.viewB" } } }) .state('route1', { url: "/route1", views: { "viewA": { template: "route1.viewA" }, "viewB": { template: "route1.viewB" } } }) .state('route2', { url: "/route2", views: { "viewA": { template: "route2.viewA" }, "viewB": { template: "route2.viewB" } } }); }); interface IUrlLocatorTestService { currentUser: any; } // Service for determining who the currently logged on user is. class UrlLocatorTestService implements IUrlLocatorTestService { static $inject = ["$http", "$rootScope", "$urlRouter", "$state"]; constructor( private $http: ng.IHttpService, private $rootScope: ng.IRootScopeService, private $urlRouter: ng.ui.IUrlRouterService, private $state: ng.ui.IStateService ) { $rootScope.$on("$locationChangeSuccess", (event: ng.IAngularEvent) => this.onLocationChangeSuccess(event)); $rootScope.$on('$stateNotFound', (event: ng.IAngularEvent, unfoundState: ng.ui.IUnfoundState, fromState: ng.ui.IState, fromParams: {}) => this.onStateNotFound(event, unfoundState, fromState, fromParams)); } public currentUser: any; private onLocationChangeSuccess(event: ng.IAngularEvent) { if (!this.currentUser) { // If the current user is unknown, halt the state change and request current // user details from the server event.preventDefault(); // Note that we do not concern ourselves with what to do if this request fails, // because if it fails, the web page will be redirected away to the login screen. this.$http({ url: "/api/me", method: "GET" }).success((user: any) => { this.currentUser = user; // sync the ui-state with the location in the browser, which effectively // restarts the state change that was stopped previously this.$urlRouter.sync(); }); } } private onStateNotFound(event: ng.IAngularEvent, unfoundState: ng.ui.IUnfoundState, fromState: ng.ui.IState, fromParams: {}) { var unfoundTo: string = unfoundState.to; var unfoundToParams: {} = unfoundState.toParams; var unfoundOptions: ng.ui.IStateOptions = unfoundState.options } private stateServiceTest() { this.$state.go("myState"); this.$state.go(this.$state.current); this.$state.transitionTo("myState"); this.$state.transitionTo(this.$state.current); if (this.$state.includes("myState") === true) { // } if (this.$state.is("myState") === true) { // } if (this.$state.href("myState") === "/myState") { // } this.$state.get(); this.$state.get("myState"); this.$state.get("myState", "yourState"); this.$state.get("myState", this.$state.current); this.$state.get(this.$state.current); this.$state.get(this.$state.current, "yourState"); this.$state.get(this.$state.current, this.$state.current); this.$state.reload(); // http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#properties if (this.$state.transition) { var transitionPromise: ng.IPromise<{}> = this.$state.transition; transitionPromise.then(() => { // transition success }, () => { // transition failure }).catch(() => { // transition failure }).finally(() => { // transition ended (success or failure) }); } // Accesses the currently resolved values for the current state // http://stackoverflow.com/questions/28026620/is-there-a-way-to-access-resolved-state-dependencies-besides-injecting-them-into/28027023#28027023 var resolvedValues = this.$state.$current.locals.globals; } } myApp.service("urlLocatorTest", UrlLocatorTestService); namespace UiViewScrollProviderTests { var app = angular.module("uiViewScrollProviderTests", ["ui.router"]); app.config(['$uiViewScrollProvider', function($uiViewScrollProvider: ng.ui.IUiViewScrollProvider) { // This prevents unwanted scrolling to the active nested state view. // Use this when you have nested states, but you don't want the browser to scroll down the page // to the nested state view. // // See https://github.com/angular-ui/ui-router/issues/848 // And https://github.com/angular-ui/ui-router/releases/tag/0.2.8 $uiViewScrollProvider.useAnchorScroll(); }]); } interface ITestUserService { isLoggedIn: () => boolean; handleLogin: () => ng.IPromise<{}>; } namespace UrlRouterProviderTests { var app = angular.module("urlRouterProviderTests", ["ui.router"]); app.config(($urlRouterProvider: ng.ui.IUrlRouterProvider) => { // Prevent $urlRouter from automatically intercepting URL changes; // this allows you to configure custom behavior in between // location changes and route synchronization: $urlRouterProvider.deferIntercept(); }).run(($rootScope: ng.IRootScopeService, $urlRouter: ng.ui.IUrlRouterService, UserService: ITestUserService, $urlMatcher: ng.ui.IUrlMatcher) => { $rootScope.$on('$locationChangeSuccess', e => { // UserService is an example service for managing user state if (UserService.isLoggedIn()) return; // Prevent $urlRouter's default handler from firing e.preventDefault(); UserService.handleLogin().then(() => { // Once the user has logged in, sync the current URL to the router: $urlRouter.sync(); }); }); // Configures $urlRouter's listener *after* your custom listener var listen: Function = $urlRouter.listen(); var href: string; href = $urlRouter.href($urlMatcher); href = $urlRouter.href($urlMatcher, {}); href = $urlRouter.href($urlMatcher, {}, {}); $urlRouter.update(); $urlRouter.update(false); $urlRouter.push($urlMatcher); $urlRouter.push($urlMatcher, {}); $urlRouter.push($urlMatcher, {}, {}); }); }