Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="pt-BR" ng-app="app">
  
  <head>
      <meta charset="utf-8" />
      <title>UI Route</title>
  </head>
  
  <body>
    
    <div data-ui-view></div>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    
    
    <!-- TEMPLATES -->
    
    <script type="text/ng-template" id="view/layout.html">
      <table border="1" width="100%">
          <tr>
              <td colspan="3"><div ui-view="header"></div></td>
          </tr>
          <tr>
              <td width="200px"><div ui-view="left"></div></td>
              <td><div ui-view></div></td>
              <td width="200px"><div ui-view="right"></div></td>
          </tr>
      </table>
    </script>
       
    <script type="text/ng-template" id="view/header.html">
      <a ui-sref="home">UI-Route</a>
      <a ui-sref="right.chat" style="float: right">right</a>
    </script>
    
    <script type="text/ng-template" id="view/left.html">
      <h1>LEFT</h1>
      <ul>
          <li><a ui-sref="home">home</a></li>
          <li><a ui-sref="contacts.index">contacts</a></li>
      </ul>
    </script>
    
    <script type="text/ng-template" id="view/right.html">
      <h1>RIGHT</h1>
      <a ui-sref="right.chat">chat</a>
      <a ui-sref="right.links">links</a>
      <div ui-view></div>
    </script>
    
    <script type="text/ng-template" id="view/right.chat.html">
      <ul>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
          <li>message</li>
      </ul>
    </script>
    
    <script type="text/ng-template" id="view/right.links.html">
      <ul>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
      </ul>
    </script>
       
    <script type="text/ng-template" id="view/home.html">
      <h1>HOME</h1>
    </script>
    
    <script type="text/ng-template" id="view/contacts.html">
      <h1>CONTACTS</h1>
​
      <a ui-sref="contacts.filters">Filters</a>
      <a ui-sref="contacts.index">Result</a>
​
      <div ui-view></div>
    </script>
    
    <script type="text/ng-template" id="view/contacts.index.html">
      <h2>Contacts Result</h2>
      <table border="1" width="100%">
          <thead>
              <tr><th>ID</th><th>NAME</th></tr>
          </thead>
          <tbody>
              <tr><td>1</td><td>contact 1</td></tr>
              <tr><td>2</td><td>contact 2</td></tr>
              <tr><td>3</td><td>contact 3</td></tr>
              <tr><td>4</td><td>contact 4</td></tr>
              <tr><td>5</td><td>contact 5</td></tr>
          </tbody>
      </table>
    </script>
    
    <script type="text/ng-template" id="view/contacts.filters.html">
      <h2>Contacts Filters</h2>
      <input type="text" placeholder="keyword" />
      <button>Filter</button>
    </script>
    
  </body>
</html>
 
var app = angular.module('app', ['ui.router']);
​
app.config(['$stateProvider', function ($stateProvider) {
​
  //------------------------------------------------------------
  // LAYOUT
  //------------------------------------------------------------
  
  $stateProvider.state('app', {
    views: {
      'header@app': {
        templateUrl: 'view/header.html'
      },
      'left@app': {
        templateUrl: 'view/left.html'
      },
      'right@app': {
        template: 'right'
      },
      '@': {
        templateUrl: 'view/layout.html'
      }
    }
​
  }).state('right', {
    abstract: true,
    parent: 'app',
    views: {
      'right@app': {
        templateUrl: 'view/right.html'
      }
    }
​
  }).state('right.chat', {
    templateUrl: 'view/right.chat.html'
​
  }).state('right.links', {
    templateUrl: 'view/right.links.html'
  });
  
  //------------------------------------------------------------
  // HOME
  //------------------------------------------------------------
​
  $stateProvider.state('home', {
    parent: 'app',
    templateUrl: 'view/home.html',
    url: '/home'
​
  });
  
  //------------------------------------------------------------
  // CONTACTS
  //------------------------------------------------------------
  
  $stateProvider.state('contacts', {
    parent: 'app',
    abstract: true,
    url: '/contacts',
    templateUrl: 'view/contacts.html'
​
  }).state('contacts.index', {
    templateUrl: 'view/contacts.index.html'
​
  }).state('contacts.filters', {
    templateUrl: 'view/contacts.filters.html'
  });
​
}]);
​
app.run(['$state', function ($state) {
  $state.go('home');
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alex-oliveirapro
0viewers