javascript 未知的提供者错误 AngularJs

Unknown Provider Error AngularJs

提问by VishwaKumar

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

尝试使用POST进行 angularjs 授权。我的代码还包括从这个POST延迟加载

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

代码在向应用程序注入“权限”工厂时遇到问题。我的根目录如下

app.js:

应用程序.js：

(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);
    }]);*/

})();

appBootstrap.js :

appBootstrap.js ：

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

appMain.js:

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:

服务.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:

指令.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);
        }
    };
});

Hereis my uploaded file.

这是我上传的文件。

The error i am getting is this

我得到的错误是这个

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

http://errors.angularjs.org/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

更新 1：按照@Chandermani 的建议声明一次 myApp 后，现在也有此错误

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

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

回答by Nadeem Khedr

Refrence all the files in index.html your referencing only

仅引用 index.html 中的所有文件

<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

angular 模块化依赖在运行时不包含文件，它只是解析实例，如果你想在运行时解析文件，你应该使用类似Require.js 的东西

---

---

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

注意：不要把ng-viewhtml body标签本身放在ng-view上面，在body里面创建一个div然后放上去，因为把它放在body上会抹掉index.html页面上的其他东西

回答by Chandermani

I see declaration of myApptwice

我看到myApp两次声明

app.js

应用程序.js

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

appMain.js:

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

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