title: Unknown Provider Error AngularJs
body: <p>Trying my hands on angularjs authorization using the <a href="http://nadeemkhedr.wordpress.com/2013/11/25/how-to-do-authorization-and-role-based-permissions-in-angularjs/" rel="nofollow noreferrer">POST</a>. My code also includes lazy loading from this <a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow noreferrer">POST</a></p>
  
  <p>The code is having trouble injecting 'permissions' factory to the application. My root directory as below</p>
  
  <p><img src="https://i.stack.imgur.com/SVl7j.png" alt="enter image description here"></p>
  
  <p>app.js:</p>
  
  <pre><code>(function()
  {
      var myApp = angular.module('myApp',['ngRoute']);
      var roleId = 5;
      var permissionList = {};
  
      myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $compileProvider, $httpProvider)
          {
              myApp.controllerProvider = $controllerProvider;
              myApp.compileProvider    = $compileProvider;
              myApp.routeProvider      = $routeProvider;
              myApp.filterProvider     = $filterProvider;
              myApp.provide            = $provide;
  
              $httpProvider.responseInterceptors.push('securityInterceptor');
  
              $routeProvider
                  .when('/', {
                      templateUrl:'app/login/login.html',
                      resolve:{
                          deps: function($q, $rootScope) {
                              var deferred = $q.defer();
                              // Add dependencies here
                              var dependencies =
                                  [
  
                                      'app/services/services.js',
                                      'app/directives/directives.js',
                                      'app/login/login.js',
  
                                  ];
  
                              $script(dependencies, function()
                              {
                                  // all dependencies have now been loaded by $script.js so resolve the promise
                                  $rootScope.$apply(function()
                                  {
                                      deferred.resolve();
                                  });
                              });
  
                              return deferred.promise;
                          }
                      },
                      permission: 'login'
                  });
          });
  
      myApp.provider('securityInterceptor', function() {
          this.$get = function($location, $q) {
              return function(promise) {
                  return promise.then(null, function(response) {
                      if(response.status === 403 || response.status === 401) {
                          $location.path('partials/unauthorized');
                      }
                      return $q.reject(response);
                  });
              };
          };
      });
  
      // Get User Roles and Permissions from server
      angular.element(document).ready(function() {
          $.get('b1.0/../api/index/user-roles', function(data) {
              userRoles = data;
          });
  
          $.post('b1.0/../api/index/user-permissions', {roleId:roleId}, function(data) {
              permissionList = data;
          });
      });
  
      myApp.run(function(permissions) {
          permissions.setPermissions(permissionList)
      });
  
      // Tried this but still not working
      /*myApp.run(['permissions', function(permissions){
          permissions.setPermissions(permissionList);
      }]);*/
  
  })();
  </code></pre>
  
  <p>appBootstrap.js :</p>
  
  <pre><code>$script(['app/app.js'], function()
  {
      angular.bootstrap(document, ['myApp']);
  });
  </code></pre>
  
  <p>appMain.js:</p>
  
  <pre><code>var myApp = angular.module('myApp');
  
  myApp.controller('mainAppCtrl', function($scope, $location, permissions) {
     $scope.$on('$routeChangeStart', function(scope, next, current) {
          var permission = next.$$route.permission;
          if(_.isString(permission) &amp;&amp; !permissions.hasPermission(permission))
              $location.path('/unauthorized');
      });
  });
  </code></pre>
  
  <p>services.js:</p>
  
  <pre><code>angular.module('myApp')
      .factory('permissions', function ($rootScope) {
          var permissionList;
          return {
              setPermissions: function(permissions) {
                  permissionList = permissions;
                  $rootScope.$broadcast('permissionsChanged')
              },
              hasPermission: function (permission) {
                  permission = permission.trim();
                  return _.some(permissionList, function(item) {
                      if(_.isString(item.Name))
                          return item.Name.trim() === permission
                  });
              }
          };
      });
  </code></pre>
  
  <p>directives.js:</p>
  
  <pre><code>angular.module('myApp').directive('hasPermission', function(permissions) {
      return {
          link: function(scope, element, attrs) {
              if(!_.isString(attrs.hasPermission))
                  throw "hasPermission value must be a string";
  
              var value = attrs.hasPermission.trim();
              var notPermissionFlag = value[0] === '!';
              if(notPermissionFlag) {
                  value = value.slice(1).trim();
              }
  
              function toggleVisibilityBasedOnPermission() {
                  var hasPermission = permissions.hasPermission(value);
  
                  if(hasPermission &amp;&amp; !notPermissionFlag || !hasPermission &amp;&amp; notPermissionFlag)
                      element.show();
                  else
                      element.hide();
              }
              toggleVisibilityBasedOnPermission();
              scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
          }
      };
  });
  </code></pre>
  
  <blockquote>
    <p><a href="http://www.sendspace.com/file/x49wvo" rel="nofollow noreferrer">Here</a> is my uploaded file.</p>
  </blockquote>
  
  <p>The error i am getting is this </p>
  
  <blockquote>
    <p><a href="http://errors.angularjs.org/1.2.13/" rel="nofollow noreferrer">http://errors.angularjs.org/1.2.13/</a>$injector/unpr?p0=permissionsProvider%20%3C-%20permissions</p>
  </blockquote>
  
  <p>Could anyone tell me what is going wrong here??</p>
  
  <p><strong>Update 1:</strong> After declaring myApp once as suggested by @Chandermani now there is this error too</p>
  
  <blockquote>
    <p><a href="http://errors.angularjs.org/1.2.13/" rel="nofollow noreferrer">http://errors.angularjs.org/1.2.13/</a>$injector/nomod?p0=myApp</p>
  </blockquote>