CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uirouter--angularjs

State-based routing for AngularJS 1.x applications with nested states, multiple views, and sophisticated routing capabilities

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

UI-Router for AngularJS

UI-Router for AngularJS is a comprehensive state-based routing framework that provides sophisticated client-side routing for AngularJS 1.x applications. It models applications as hierarchical trees of states, enabling nested views, state parameters, resolve dependencies, and URL synchronization with extensive customization options.

Package Information

  • Package Name: @uirouter/angularjs
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @uirouter/angularjs angular@">=1.2.0"

Core Imports

import * as uiRouter from "@uirouter/angularjs";
import { StateProvider, StateService, Ng1StateDeclaration } from "@uirouter/angularjs";

For CommonJS:

const uiRouter = require("@uirouter/angularjs");
const { StateProvider, StateService } = require("@uirouter/angularjs");

Angular module registration:

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

Basic Usage

import "@uirouter/angularjs";

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      
      // Configure default route
      $urlRouterProvider.otherwise('/home');
      
      // Define states
      $stateProvider
        .state('home', {
          url: '/home',
          template: '<h1>Welcome Home</h1>',
          controller: 'HomeController'
        })
        .state('about', {
          url: '/about',
          templateUrl: 'about.html',
          controller: 'AboutController',
          resolve: {
            userInfo: ['UserService', function(UserService) {
              return UserService.getCurrentUser();
            }]
          }
        })
        .state('users', {
          url: '/users',
          component: 'userList'
        })
        .state('users.detail', {
          url: '/{userId}',
          component: 'userDetail',
          resolve: {
            user: ['$stateParams', 'UserService', 
              function($stateParams, UserService) {
                return UserService.getUser($stateParams.userId);
              }]
          }
        });
    }]);

Architecture

UI-Router for AngularJS is built around several key components:

  • State Management: Hierarchical state tree with nested states and inheritance
  • View System: Multiple named views per state with flexible targeting
  • URL Integration: Bi-directional URL synchronization with parameter encoding
  • Transition System: Lifecycle hooks and asynchronous transition handling
  • Dependency Injection: Full Angular 1.x DI integration with resolve patterns
  • Component Integration: Support for Angular 1.5+ components alongside controllers

Capabilities

State Configuration

Core state definition and registration functionality for defining application states with views, URLs, and lifecycle hooks.

interface StateProvider {
  state(name: string, definition: Ng1StateDeclaration): StateProvider;
  decorator(name: string, func: BuilderFunction): StateProvider;
}

interface Ng1StateDeclaration {
  name?: string;
  url?: string;
  params?: { [key: string]: any };
  abstract?: boolean;
  parent?: string | StateDeclaration;
  views?: { [key: string]: string | Ng1ViewDeclaration };
  template?: string | Function;
  templateUrl?: string | Function;
  templateProvider?: IInjectable;
  controller?: IInjectable | string;
  controllerAs?: string;
  component?: string;
  resolve?: { [key: string]: IInjectable };
  onEnter?: Ng1StateTransitionHook | IInjectable;
  onExit?: Ng1StateTransitionHook | IInjectable;
  onRetain?: Ng1StateTransitionHook | IInjectable;
}

State Configuration

State Navigation

State navigation and querying services for programmatic navigation and state inspection.

interface StateService {
  go(to: StateOrName, params?: RawParams, options?: TransitionOptions): Promise<StateDeclaration>;
  reload(reloadState?: StateOrName): Promise<StateDeclaration>;
  get(stateOrName?: StateOrName): StateDeclaration | StateDeclaration[];
  includes(stateOrName: StateOrName, params?: RawParams, options?: { relative?: StateOrName }): boolean;
  is(stateOrName: StateOrName, params?: RawParams, options?: { relative?: StateOrName }): boolean;
  href(stateOrName: StateOrName, params?: RawParams, options?: HrefOptions): string;
}

State Navigation

View Management

View declaration and component integration for rendering state content with Angular 1.x templates and components.

interface Ng1ViewDeclaration {
  template?: string | Function;
  templateUrl?: string | Function;
  templateProvider?: IInjectable;
  controller?: IInjectable | string;
  controllerAs?: string;
  controllerProvider?: IInjectable;
  component?: string;
  componentProvider?: IInjectable;
  bindings?: { [key: string]: string };
  resolveAs?: string;
}

View Management

Transition Hooks

Transition lifecycle management with hooks for controlling state transitions and implementing cross-cutting concerns.

interface TransitionService {
  onBefore(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function;
  onStart(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function;
  onEnter(criteria: HookMatchCriteria, callback: TransitionStateHookFn, options?: HookRegOptions): Function;
  onRetain(criteria: HookMatchCriteria, callback: TransitionStateHookFn, options?: HookRegOptions): Function;
  onExit(criteria: HookMatchCriteria, callback: TransitionStateHookFn, options?: HookRegOptions): Function;
  onFinish(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function;
  onSuccess(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function;
  onError(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function;
}

Transition Hooks

URL Management

URL configuration and routing rules for mapping URLs to states and handling URL-based navigation.

interface UrlService {
  url(newUrl?: string, replace?: boolean): string;
  path(): string;
  search(): { [key: string]: any };
  hash(): string;
  onChange(callback: Function): Function;
}

interface UrlRouterProvider {
  rule(ruleFn: RawNg1RuleFunction): UrlRouterProvider;
  otherwise(rule: string | RawNg1RuleFunction): UrlRouterProvider;
  when(what: RegExp | UrlMatcher | string, handler: string | IInjectable): UrlRouterProvider;
}

URL Management

Directives

Angular 1.x directives for declarative state navigation and view rendering in templates.

// uiView directive - renders views from active states
interface UiViewDirective {
  name?: string;           // Optional view name for targeting
  autoscroll?: boolean;    // Auto-scroll behavior
  onload?: Function;       // Expression evaluated when view updates
}

// uiSref directive - creates links to states  
interface UiSrefDirective {
  uiSref: string;         // State name and parameters
  uiSrefOpts?: object;    // Additional transition options
}

// uiSrefActive directive - applies CSS classes when state is active
interface UiSrefActiveDirective {
  uiSrefActive: string;   // CSS classes for active state
  uiSrefActiveEq?: string; // CSS classes for exact state match
}

Directives

Parameter Management

Parameter type system and configuration for URL parameters and state parameters with validation and transformation.

interface ParamDeclaration {
  value?: any;
  type?: string | ParamType;
  array?: boolean | string;
  squash?: boolean | string;
  dynamic?: boolean;
  inherit?: boolean;
  raw?: boolean;
}

// Built-in parameter types
type BuiltInParamTypes = 'string' | 'int' | 'bool' | 'date' | 'json' | 'path' | 'query' | 'hash' | 'any';

Parameter Management

Types

Core types and interfaces used throughout the API:

type StateOrName = string | StateDeclaration;

type RawParams = { [key: string]: any };

interface TransitionOptions {
  relative?: StateOrName;
  inherit?: boolean;
  notify?: boolean;
  reload?: boolean | string;
  custom?: { [key: string]: any };
}

interface HrefOptions {
  relative?: StateOrName;
  lossy?: boolean;
  inherit?: boolean;
  absolute?: boolean;
}

type IInjectable = Function | Array<string | Function>;

type HookResult = boolean | TargetState | void | Promise<boolean | TargetState | void>;

interface Ng1StateTransitionHook {
  (...injectables: any[]): HookResult;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@uirouter/angularjs@1.1.x
Publish Source
CLI
Badge
tessl/npm-uirouter--angularjs badge