javascript - Unknown Provider Error AngularJs - Stack Overflow

admin管理员组

文章数量:1386571

Trying my hands on angularjs authorization using the POST. My code also includes lazy loading from this POST

The code is having trouble injecting 'permissions' factory to the application. My root directory as below

app.js:

(function()
{
    var myApp = angular.module('myApp',['ngRoute']);
    var roleId = 5;
    var permissionList = {};

    myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $pileProvider, $httpProvider)
        {
            myApp.controllerProvider = $controllerProvider;
            myApppileProvider    = $pileProvider;
            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);
    }]);*/

})();

appBootstrap.js :

$script(['app/app.js'], function()
{
    angular.bootstrap(document, ['myApp']);
});

appMain.js:

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) && !permissions.hasPermission(permission))
            $location.path('/unauthorized');
    });
});

services.js:

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
                });
            }
        };
    });

directives.js:

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 && !notPermissionFlag || !hasPermission && notPermissionFlag)
                    element.show();
                else
                    element.hide();
            }
            toggleVisibilityBasedOnPermission();
            scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
        }
    };
});

Here is my uploaded file.

The error i am getting is this

.2.13/$injector/unpr?p0=permissionsProvider%20%3C-%20permissions

Could anyone tell me what is going wrong here??

Update 1: After declaring myApp once as suggested by @Chandermani now there is this error too

.2.13/$injector/nomod?p0=myApp

Trying my hands on angularjs authorization using the POST. My code also includes lazy loading from this POST

The code is having trouble injecting 'permissions' factory to the application. My root directory as below

app.js:

(function()
{
    var myApp = angular.module('myApp',['ngRoute']);
    var roleId = 5;
    var permissionList = {};

    myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $pileProvider, $httpProvider)
        {
            myApp.controllerProvider = $controllerProvider;
            myApp.pileProvider    = $pileProvider;
            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);
    }]);*/

})();

appBootstrap.js :

$script(['app/app.js'], function()
{
    angular.bootstrap(document, ['myApp']);
});

appMain.js:

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) && !permissions.hasPermission(permission))
            $location.path('/unauthorized');
    });
});

services.js:

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
                });
            }
        };
    });

directives.js:

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 && !notPermissionFlag || !hasPermission && notPermissionFlag)
                    element.show();
                else
                    element.hide();
            }
            toggleVisibilityBasedOnPermission();
            scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
        }
    };
});

Here is my uploaded file.

The error i am getting is this

http://errors.angularjs/1.2.13/$injector/unpr?p0=permissionsProvider%20%3C-%20permissions

Could anyone tell me what is going wrong here??

Update 1: After declaring myApp once as suggested by @Chandermani now there is this error too

http://errors.angularjs/1.2.13/$injector/nomod?p0=myApp

• javascript
• angularjs

Share Improve this question Follow edited Feb 24, 2014 at 13:55 VishwaKumar asked Feb 24, 2014 at 13:36 VishwaKumarVishwaKumar 3,43388 gold badges4747 silver badges7272 bronze badges 3

• Did you go to the error link? "This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example:" As you have provided a lot of code without specifying where the error occurs I'm not sure where the issue is. – JeffryHouser Commented Feb 24, 2014 at 13:44
• Yes i have rechecked but that's not the issue i guess – VishwaKumar Commented Feb 24, 2014 at 13:46
• 1 Must be something to do with Chandermani answer – VishwaKumar Commented Feb 24, 2014 at 13:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Refrence all the files in index.html your referencing only

<script type="text/javascript" rel="javascript" src="app/vendor/jquery-2.1.0.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>
<script type="text/javascript" rel="javascript" src="app/appMain.js"></script>

angular modular dependencies doesn't include the files at run-time, it just resolve the instance, if you want to resolve the files at run-time you should be using something like Require.js

---

Note: don't put ng-view on the html body tag itself, create a div inside the body and put ng-view on it, because putting it on the body will wipe-out everything else on the index.html page

I see declaration of myApp twice

app.js

var myApp = angular.module('myApp',['ngRoute']);

appMain.js:

var myApp = angular.module('myApp',['ngRoute']);

This would recreate the the module. So the second one should be

var myApp = angular.module('myApp');

本文标签： javascriptUnknown Provider Error AngularJsStack Overflow