AngularJS ui-router nested view

by Nicolas Lips

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<!-- We'll also add some navigation: -->
<div ui-view="content">


<script id="partials/home.html" type="text/ng-template">

<div class="grid-container">
  <div class="grid-item">
  
    <h1>Home</h1>

        <li ng-repeat="item in items track by $index" ui-sref="detail({index: $index})">
        {{ item }}
        </li>

    </div>
  
  <div class="grid-item">
  
   <form>
    	
      Edit form
      <p> - - - - - - <p>
    	<div ui-view="Animaldetail"></div>
      
    
  </form>
  
  </div>
  
</div>

</div>

</script>

<script id="partials/home.detail0.html" type="text/ng-template">
	
  <p> Enter new name  </p> 
  
	<input type="text" ng-model="animalName">
	
 <button ng-click="Submit()" > Set Edit </button>


</script>

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

JavaScript

var myApp  = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/home");
  //
  // Now set up the states
  $stateProvider
    .state('home', {
      url: "/home",
      views: {
            'content': {
                  templateUrl: "partials/home.html",
                	 controller: function($scope,DataService) {
                    $scope.items = DataService.getAnimals();
                  }
             }
        },
     
      
    })
    
    
    .state('detail', {
      url: "/home/:index",
      parent: 'home', 
      views: {
            'Animaldetail': {
                 templateUrl: "partials/home.detail0.html",
                  controller: function($scope, $stateParams , DataService) {
                      
                    $scope.animalName = 																															DataService.getAnimalByIndex($stateParams.index);
                    
                    $scope.Submit = function(){
                    
                      DataService.setAnimalName($stateParams.index , 																		$scope.animalName);
                    }

                  } // end ctrl
             }
        }
      
    })
    
});

myApp.service('DataService', function() {
    this.ateGrassTotal = 0;
    
    var animals = [
                    'Eagle', 
                    'Duck',
                    'Rabbit',
                    'Spider'
                  ];
    
    this.getAnimals = function() {
         
        return animals;
     };
      
      this.setAnimalName = function(index,newName){
      
      animals[index] = newName;
      
      };
      
      this.getAnimalByIndex = function(index){
      
      	return animals[index];
      };
});