Item: AngularJS ui-router: 2nd level nesting
Rating: 3.4
Author: -kaik-

1 Downloads
76 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>AngularJS ui-router: 2nd level nesting</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Test</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

  
<body> 
  <ui-view></ui-view>
</body>
  
  
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-kaik-/angularjs-ui-router-2nd-level-nesting-oxeLvZ */
.abstractState {
  height: 100px;
  width: 100%;
  background-color: red;
}

.firstChild {
  height: 60px;
  width: 100%;
  background-color: darkred;
}

.secondChild {
  height: 100px;
  width: 100%;
  background-color: white;
}


/*Downloaded from https://www.codeseek.co/-kaik-/angularjs-ui-router-2nd-level-nesting-oxeLvZ */
angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  
  $stateProvider.state('main', {
    url: '',
    template: '<button class="button button-positive" ui-sref="abstractState.firstChild">'+
                 'Go to firstChild'+
              '</button>'
  });
  
  $stateProvider.state('abstractState', {
        abstract:true,
        url: 'abstract',
        template: '<div class="abstractState"></div>'+
                     '<ui-view></ui-view>'+
                  '<div class="abstractState"></div>'
    });

    $stateProvider.state('abstractState.firstChild', {
        url: '/firstChild',
        template: '<div class="firstChild">' + 
                     '<button class="button button-light" ui-sref="abstractState.firstChild.secondChild">'+
                         '2nd nested level'+
                     '</button>'+
                  '</div>'+
                  '<ui-view></ui-view>'+
                  '<div class="firstChild"></div>'
    });
  
    $stateProvider.state('abstractState.firstChild.secondChild', {
        url: '/secondChild',
        template: '<div class="secondChild">' + 
                     '<button class="button button-assertive" ui-sref="main">'+
                         'back to main'+
                     '</button>'+
                  '</div>'
    });  
  
});