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>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  
  <ui-view></ui-view>
  <hr>
  
  <script type="text/ng-template" id="state-1.html">
    <h1>state 1</h1>
    <h2>$stateParams: {{params}}</h2>
    <p>(you can see it always empty)</p>
    <button ng-click="go()">go to state 2</button>
  </script>
  
  <script type="text/ng-template" id="state-2.html">
    <h1>state 2</h1>
    <h2>$stateParams: {{params}}</h2>
    <p>(you can see it always empty)</p>
    <button ng-click="go()">go to state 1</button>  
  </script>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
</body>
</html>
 
console.clear();
​
var app = angular.module('app', [
  'ui.router'
]);
​
app.config(function($stateProvider) {
  $stateProvider
        .state('state1', {
            url: '',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              };
              
              console.log('state1 params:', $stateParams);
            }
        })
        .state('state2', {
            url: 'state2',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state1', { someOtherParam : 'lazy lizard' });
              };
              
              console.log('state2 params:', $stateParams);
            }
        });
});
​
Output 300px

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

Dismiss x
public
Bin info
dooblewebpro
0viewers