ui-router showcase

ui-router full demo

by vural kaya

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
<section ng-app="uiRouterDemo" class="row">
  <nav class="small-4 columns">
    <ul style="list-style-type :none">
      <li>
        <button ui-sref="users">Users</button>
      </li>
      <li>
        <button ui-sref="posts">Post</button>
      </li>
    </ul>
  </nav>
  <section class="small-6  colums">

    <nav ui-view="menu"></nav>
    <section ui-view="main"></section>
  </section>
  <script type="text/ng-template" id="userCreationForm.html">
    <p>User creation form</p>
  </script>
</section>

JavaScript

angular.module('uiRouterDemo', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider.state('users', {
      url: '/users',
      views: {
        menu: {
          template: '<button ui-sref="users.create">Create</button>' +
            '<button ui-sref="users.list">List</button>'
        },
        main: {
          template: '<div ui-view="content"></div>'
        }
      }
    });

    $stateProvider.state('users.create', {
      url: '/create',
      views: {
        content: {
          templateUrl: 'userCreationForm.html'
        }
      }
    });

    $stateProvider.state('users.list', {
      url: '/list',
      resolve: {
        userList: function() {
          return ['Bob', 'Joe', 'sid'];
        }
      },
      views: {
        content: {
          controller: function($scope, userList) {
            $scope.userList = userList;
          },
          template: '<ul><li ng-repeat="user in userList">' +
            '{{user}}</li></ul>'
        }
      }
    }).state('posts', {
      url: '/posts',
      views: {
        main: {
          template: 'Posts Page !!!'
        }
      }
    })


  })