Codakey
Play
← Back to angular-ui/ui-router

How to Deploy & Use angular-ui/ui-router

AngularUI Router Deployment and Usage Guide

Prerequisites

  • Node.js (version 10 or higher) and npm
  • AngularJS (version 1.x) - UI-Router is designed for AngularJS applications
  • Browser with ES5 support (for production deployments)

Installation

Installing UI-Router in your AngularJS project

  1. Via npm (recommended):

    npm install @uirouter/angularjs

  2. Via CDN (for quick prototyping):

    <script src="https://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.js"></script>
<!-- or minified version -->
<script src="https://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.min.js"></script>

  3. Add as a dependency to your AngularJS module:

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

Configuration

Basic State Configuration

Configure states in your AngularJS application using the $stateProvider:

angular.module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        template: '<h1>Home</h1>'
      })
      .state('about', {
        url: '/about',
        template: '<h1>About</h1>'
      });

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

HTML Configuration

Use the ui-view directive to define viewports:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
  <script src="https://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <a ui-sref="home">Home</a>
  <a ui-sref="about">About</a>
  <div ui-view></div>
</body>
</html>

Build & Run

Development

  1. Set up a basic AngularJS project structure:

    my-app/
├── index.html
├── app.js
└── package.json

  2. Run a local development server:

    # Using http-server (install globally if needed)
npm install -g http-server
http-server -o

  3. Or use a build tool like webpack or gulp:

    # With webpack-dev-server
npm install --save-dev webpack webpack-dev-server
webpack serve --mode development

Production

  1. Build your application:

    # With webpack
webpack --mode production

  2. Serve the built files:

    # Using http-server
http-server dist -p 8080

Deployment

Static Hosting (Recommended for SPA)

UI-Router applications are Single Page Applications (SPAs) that work well with static hosting:

  • Vercel (formerly Zeit Now):

    npm install -g vercel
cd dist
vercel

  • Netlify:

    npm install -g netlify-cli
cd dist
netlify deploy --prod

  • GitHub Pages:

    # Build and deploy to gh-pages branch
npm run build
git subtree push --prefix dist origin gh-pages

Server-Side Rendering (Advanced)

For server-side rendering, consider using AngularJS with a backend framework:

  • Express.js with AngularJS: 
    const express = require('express');
const app = express();
const path = require('path');

app.use(express.static('dist'));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => console.log('Server running on port 3000'));

Troubleshooting

Common Issues and Solutions

  1. State not loading:

    • Ensure the state is properly registered in the config block
    • Check that the ui-view directive is present in your template
    • Verify the state name in ui-sref matches the registered state

  2. 404 errors on page refresh:

    • Configure your server to always serve index.html for unknown routes
    • For static hosting, use _redirects file (Netlify) or vercel.json (Vercel): 
      {
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

  3. Dependency injection issues:

    • Use array notation for minification-safe dependency injection: 
      $stateProvider.state('home', {
  controller: ['$scope', function($scope) {
    // controller code
  }]
});

  4. UI-Router not loading:

    • Check that the script tag is included before your app.js
    • Verify the AngularJS module dependency is correctly specified
    • Check browser console for JavaScript errors

  5. Nested views not working:

    • Ensure parent states have ui-view directives
    • Check that nested states are properly configured with parent references
    • Verify the state hierarchy in your configuration

Additional Resources

← Project overviewView alternatives to angular-ui/ui-router →