ui-router named views example

In this example below you will see how to do a ui-router named views example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -kaik-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -kaik- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ui-router named views example</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <!-- get bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- get AngularJS -->  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
  <!-- get Angular ui-router JS -->    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>  
</head>

  
  
<body ng-controller="Ctrl">
  <div class="container">
    <ui-view class="content"></ui-view>    
    <div ui-view="header" id="header"></div>   
    <div ui-view="footer" id="footer"></div>     
  <div>
</body>
  
  
<script type="text/ng-template" id="views/header.html">
  <div class="vCentered">This is {{user.name}}</div>
</script>

<script type="text/ng-template" id="views/page1.html">
  <div class="vCentered">You are at page 1</div>
  <button class="btn btn-default" ui-sref="home.page2">Go to page 2 ></div>  
</script>
    
<script type="text/ng-template" id="views/page2.html">
  <div class="vCentered">You are at page 2</div>
  <button class="btn btn-default" ui-sref="home.page1">Go Back</div>  
</script>
  
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/-kaik-/ui-router-named-views-example-JGwewe */
.padding {
  padding: 30px;
}

.container {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
  widht: 100%;
}

.btn {
  margin-bottom: 10px !important;
}

.content {
  text-align: center;
  position: absolute;
  top: 100px;
  display: inline-block;
  width: 100%;
  height: calc(100vh - 200px );
}
.content ui-view {
  position: absolute;
  height: 100%;
}

#header {
  background-color: #337ab7;
  color: white;
  text-align: center;
  position: absolute;
  top: 0;
  display: inline-block;
  width: 100%;
  height: 100px;
}

#footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: #5bc0de;
  display: inline-block;
}

.vCentered {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}


/*Downloaded from https://www.codeseek.co/-kaik-/ui-router-named-views-example-JGwewe */
angular.module('myApp', ['ui.router'])

.controller('Ctrl', function($scope, $state){
  $scope.navigate = function(){
    $state.go('home', {username: "Marqués"});
  }
})


.controller('HeaderCtrl', function($scope){
  $scope.user = {
    name:   'Bob',
  };
  
})

.config(function($stateProvider){
		$stateProvider
    
			.state('home', {
        abstract:true, 
        views:{
          "": { template: '<ui-view></ui-view>' },
          "header": {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          "footer": { template:"<div class='vCentered'>All rights reserved</div>" }
        }
		})
    
    .state('home.page1', {
        views:{
          "": { templateUrl: 'views/page1.html'}
        }
		})
    
   .state('home.page2', {
        views:{
          "": { templateUrl: 'views/page2.html'}
        }
		}); 
  
})

.run(function ($state) {
       $state.transitionTo('home.page1'); 
});

Comments