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="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div ui-view></div>
  
<script type="text/ng-template" id="masterPage">
  <h1>{{title}}</h1>
  <hr>
  <h3>Modal Open? {{modalOpen}}</h3>
  <hr>
  <a ui-sref="app.page">Page</a> | 
  <a ui-sref="app.book">Book</a>
  <ui-view></ui-view>
</script>
<script type="text/ng-template" id="childPage">
  <h2>{{title}}</h2>
  <button ng-click="toggleModal()">Open Modal</button>
</script>
</body>
</html>
 
var app = angular.module('app', ['ui.router']);
​
app
.config(function($stateProvider, $urlRouterProvider) {
  
  
  $stateProvider
  .state('app', {
    abstract: true,
    controller: 'AppCtrl',
    templateUrl: 'masterPage'
  })
  .state('app.page', {
    url: '/page',
    controller: 'PageCtrl',
    templateUrl: 'childPage'
  })
  .state('app.book', {
    url: '/book',
    controller: 'BookCtrl',
    templateUrl: 'childPage'
  });
  
  $urlRouterProvider.otherwise("/page");
  
})
.controller('AppCtrl', function($scope, $rootScope) {
  $scope.title = "App Ctrl";
  $scope.modalOpen = false;
  $rootScope.$on('toggle-modal', function() {
    $scope.modalOpen = !$scope.modalOpen;
  });
})
​
.controller('PageCtrl', function($scope, $rootScope) {
  $scope.title = "Page Ctrl";
  $scope.toggleModal = function() {
    $rootScope.$broadcast('toggle-modal');
  };
})
​
.controller('BookCtrl', function($scope, $rootScope) {
  $scope.title = "Book Ctrl";
  $scope.toggleModal = function() {
    $rootScope.$broadcast('toggle-modal');
  };
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers