nested view added

index.html

@@ -22,6 +22,7 @@
     <script src="/js/lib/jquery/jquery-2.2.0.min.js" charset="utf-8"></script>
     <!-- Bootstrap -->
     <script src="/js/lib/bootstrap/bootstrap.min.js" charset="utf-8"></script>
+    <script src="/js/underscore.js" charset="utf-8"></script>
     <!-- Daplie Modules -->
     <script src="/assets/oauth3.org/oauth3.core.js" charset="utf-8"></script>
     <script src="/assets/oauth3.org/oauth3.dns.js" charset="utf-8"></script>
@@ -43,6 +44,7 @@
     <!-- Services -->
     <script src="/assets/oauth3.org/oauth3.ng.js" charset="utf-8"></script>
     <script src="/js/services/auth-service.js" charset="utf-8"></script>
+    <script src="/js/services/shows-service.js" charset="utf-8"></script>
     <!-- Controllers -->
     <script src="/js/controllers/login-controller.js" charset="utf-8"></script>
     <script src="/js/controllers/profile-controller.js" charset="utf-8"></script>
@@ -54,6 +56,8 @@
     <script src="/js/controllers/website-controller.js" charset="utf-8"></script>
     <script src="/js/controllers/dns-controller.js" charset="utf-8"></script>
     <script src="/js/controllers/email-controller.js" charset="utf-8"></script>
+    <script src="/js/controllers/shows-controller.js" charset="utf-8"></script>
+    <script src="/js/controllers/showsDetail-controller.js" charset="utf-8"></script>
     <!-- Divrectives -->
     <script src="/js/directives/achievement-directive.js" charset="utf-8"></script>
     <script src="/js/directives/todo-directive.js" charset="utf-8"></script>

js/app.js

@@ -112,6 +112,20 @@ app.config(['$stateProvider', '$urlRouterProvider', 'localStorageServiceProvider
       }
     }
   })
+  .state('app.shows', {
+    url: 'shows',
+    views: {
+      'content@': {
+        templateUrl: 'templates/shows.html',
+        controller: 'ShowsController',
+      }
+    }
+  })
+  .state('app.shows.detail', {
+    url: '/detail/:id',
+    templateUrl: 'templates/shows-detail.html',
+    controller: 'ShowsDetailController'
+  })
   .state('app.dns', {
     url: 'dns',
     views: {

js/controllers/shows-controller.js

@@ -0,0 +1,3 @@
+app.controller('ShowsController', ['$scope','ShowsService', function($scope, ShowsService) {
+ $scope.shows = ShowsService.list();
+}]);

js/controllers/showsDetail-controller.js

@@ -0,0 +1,3 @@
+app.controller('ShowsDetailController', ['$scope','$stateParams', 'ShowsService', function($scope, $stateParams, ShowsService) {
+   $scope.selectedShow = ShowsService.find($stateParams.id);
+}]);

js/services/shows-service.js

@@ -0,0 +1,27 @@
+app.factory('ShowsService',function(){
+  var shows = [{
+    id: 1,
+    name: 'Walking Dead',
+    description: 'The Walking Dead is an American post-apocalyptic horror drama television series developed by Frank Darabont. It is based on the comic book series of the same name by Robert Kirkman, Tony Moore, and Charlie Adlard. It stars Andrew Lincoln as sheriff\'s deputy Rick Grimes, who awakens from a coma to find a post-apocalyptic world dominated by flesh-eating zombies.'
+  },
+  {
+    id: 2,
+    name: 'Breaking Bad',
+    description: 'Breaking Bad is an American crime drama television series created and produced by Vince Gilligan. The show originally aired on the AMC network for five seasons, from January 20, 2008 to September 29, 2013. The main character is Walter White (Bryan Cranston), a struggling high school chemistry teacher who is diagnosed with inoperable lung cancer at the beginning of the series.'
+  },
+  {
+    id: 3,
+    name: '7D',
+    description: 'The 7D is an American animated television series produced by Disney Television Animation, and broadcast on Disney XD starting in July 7, 2014. It is a re-imagining of the titular characters from the 1937 film Snow White and the Seven Dwarfs by Walt Disney Productions'
+  }];
+
+
+  return {
+    list: function(){
+      return shows;
+    },
+    find: function(id){
+      return _.find(shows, function(show){return show.id == id});
+    }
+  }
+});

templates/partials/menu.html

@@ -17,6 +17,12 @@
       <p class="button-title">apps</p>
     </a>
   </div>
+  <div class="button-container" ui-sref-active="active">
+    <a ui-sref=".shows">
+      <button type="button" name="button" class="btn btn-default side-menu-button"><i class="fa fa-plane fa-2x" aria-hidden="true"></i></button>
+      <p class="button-title">blah</p>
+    </a>
+  </div>
   <!--
   <div class="button-container" ui-sref-active="active">
     <a ui-sref=".bolt">

templates/shows-detail.html

@@ -0,0 +1,4 @@
+<h3>{{ selectedShow.name }}</h3>
+<p>
+  {{ selectedShow.description }}
+</p>

templates/shows.html

@@ -0,0 +1,7 @@
+<ul>
+  <li ui-sref-active="selected" ng-repeat="show in shows">
+    <a ui-sref=".detail({ id: show.id })">{{ show.name }}</a>
+  </li>
+</ul>
+
+<div class="detail" ui-view></div>