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 ng-app="testapp">
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<script type="text/ng-template" id="index.html">
  <div ng-repeat="product in products">
    <a ui-sref="detail({partNumber:product.partNumber})">{{product.partNumber}}</a> 
  </div>
</script>
  
<script type="text/ng-template" id="modal.html">
  <div>
    <h1>test</h1>
  </div>
</script>
  
<div class="main" ui-view></div>
  <h2>Detail Below</h2> 
<div ui-view="detail"></div>
  
​
</body>
</html>
​
​
 
var app, products;
​
app = angular.module('testapp', ['ui.router']);
​
products = [{ partNumber: "01000", description: "A part 1" },{ partNumber: "01002", description: "A part 2" },{ partNumber: "01000/55612", description: "A part with dashes" }];
​
​
app.config([
  '$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider.state('index', {
      url: '/',
      templateUrl: 'index.html',
      controller: ['$scope', '$state',
                  function ($scope, $state) {
                    $scope.products = products;
                  }]
    });
    $stateProvider.state('detail', {
      url: '/detail/:partNumber',
      templateUrl: 'modal.html',
      controller: ['$scope', '$state', '$stateParams',
                  function ($scope, $state, $stateParams) {
                    console.log($stateParams.partNumber);
                  }]
    });
    return $urlRouterProvider.otherwise('/');
  }
]);
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers