Get started with angular-ui-router CDN

MIT licensed

AngularUI Router: Declarative routing, view navigation for AngularJS apps.

Tags:
  • angular
  • ui
  • angular-ui
  • ui-router
  • router
  • state-machine
  • state-tree

Stable version

Copied!

How to start using angular-ui-router CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with angular-ui-router CDN - cdnhub.io</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://cdn.cdnhub.io/angular-ui-router/1.1.0/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
  <style>
    .ng-hide.ng-scope { display: none !important; }
  </style>
</head>
<body ng-app="myApp">
  <nav ng-controller="NavController">
    <a href="#/home">Home</a> |
    <a href="#/about">About</a>
  </nav>
  <div ng-view></div>

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

        $urlRouterProvider.otherwise('/');
      })
      .controller('NavController', function($state) {
        this.goHome = function() {
          $state.go('/');
        };

        this.goAbout = function() {
          $state.go('/about');
        };
      });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions