Post
Ask Question

AngularJS menu using JSON

First of all to create menu in AngularJS make your html page like this:

Html code

  1. <div ng-app="HHF" ng-controller="MenuCtrl">   
  2.    <menu menus='menus' location='pull-left'></menu>   
  3. </div>   
Then In the javascript file add the below code in the directives:
  1. angular.module('HHF', [])    
  2.     .directive('menu', function() {    
  3.         return {    
  4.             restrict: 'E',    
  5.             replace: true,    
  6.             scope: {    
  7.                 loc: '@location',    
  8.                 menus: '='    
  9.             },    
  10.             link: function($scope, $element) {    
  11.                    
  12.             },    
  13.             template: '<ul class="nav {{loc}}">' +     
  14.                          '<li ng-repeat="m in menus.left">' +     
  15.                              '<a href="{{m.link}}">{{m.text}}</a>' +     
  16.                          '</li>' +     
  17.                       '</ul>'    
  18.         };    
  19.     })    
  20.         
  21.     .controller('MenuCtrl', function ($scope) {    
  22.         $scope.menus = {    
  23.             "current": "index",    
  24.             "left": [{    
  25.                 "active": true,    
  26.                 "link": "\/",    
  27.                 "text": "Home"},    
  28.             {    
  29.                 "active": false,    
  30.                 "link": "\/awards",    
  31.                 "text": "Awards"},    
  32.             {    
  33.                 "active": false,    
  34.                 "link": "\/players",    
  35.                 "text": "Players"},    
  36.             {    
  37.                 "active": false,    
  38.                 "link": "\/episodes",    
  39.                 "text": "Episodes"},    
  40.             {    
  41.                 "active": false,    
  42.                 "link": "\/about",    
  43.                 "text": "About"},    
  44.             {    
  45.                 "active": false,    
  46.                 "link": "\/contact",    
  47.                 "text": "Contact Us"}],    
  48.             "rightLink": "\/session\/index",    
  49.             "rightText": "Log In"    
  50.         };    
  51.     });   
And the last step is the css use the below style in the css file:
  1. </style>   
  2.    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">   
  3.    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>   
  4. <style>