Question

使用POST尝试使用angularjs授权。我的代码还包括来自此POST

的延迟加载

代码无法将“权限”工厂注入应用程序。我的根目录如下

enter image description here

app.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：

$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是我上传的文件。

我得到的错误就是这个

http://errors.angularjs.org/1.2.13/ $注射器/ unpr？P0 = permissionsProvider％20％3 C-％20permissions

有谁能告诉我这里出了什么问题？

更新1：现在按照@Chandermani的建议宣布myApp一次后也会出现此错误

http://errors.angularjs.org/1.2.13/ $注射器/ NOMODδP0 = MyApp来

Answer 1

仅参考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>

角度模块依赖项在运行时不包含文件，它只是解析实例，如果要在运行时解析文件，则应该使用类似Require.js

注意：不要将ng-view放在html正文标记本身上，在正文中创建一个div并在其上放置ng-view，因为将它放在正文上将会清除所有内容index.html页上的其他内容

Answer 2

我看到myApp两次声明

app.js

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

appMain.js：

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

这会重新创建模块。所以第二个应该是

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

未知的提供程序错误AngularJs

2 个答案: