Question

我在Angular Js工作。我正在尝试根据用户名和密码从Sql数据库创建一个登录系统。我输入正确的用户名和密码，但这不会转到页面我想重定向用户主页但我不能这样做。当我从Console Application中将用户名和密码提交到文本框中时出现以下错误....

angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.5/$injector/unpr?p0=myServiceProvider%20%3C-%20myService%20%3C-%20myCntrl
    at angular.min.js:7
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at angular.min.js:46
    at d (angular.min.js:43)
    at e (angular.min.js:44)
    at Object.invoke (angular.min.js:44)
    at O.instance (angular.min.js:94)
    at q (angular.min.js:69)
    at f (angular.min.js:62)

这是我的Module.Js代码......

var app = angular.module("myApp", [])
.controller("myCntrl", function ($scope, myService) {

    $scope.LoginCheck = function () {
        var User = {
            UserName: $scope.uName,
            Password: $scope.password
        };
        $("#divLoading").show();
        var getData = myService.UserLogin(User);
        getData.then(function (msg) {
            if (msg.data == "0") {
                $("#divLoading").hide();
                $("#alertModal").modal('show');
                $scope.msg = "Password Incorrect !";
            }
            else if (msg.data == "-1") {
                $("#divLoading").hide();
                $("#alertModal").modal('show');
                $scope.msg = "Username Incorrect !";
            }
            else {
                uID = msg.data;
                $("#divLoading").hide();
                window.location.href = "/Home/Index";
            }
        });
        debugger;
    }

    function clearFields() {
        $scope.uName = '';
        $scope.uPwd = '';
    }

    //move this function inside `myCntrl` controller function.
    $scope.alertmsg = function () {
        $("#alertModal").modal('hide');
    };
    });


app.service("myService", function ($http) {

    this.UserLogin = function (User) {
        var response = $http({
            method: "post",
            url: "/Login/Login",
            data: JSON.stringify(User),
            dataType: "json"
        });
        return response;
    }

});

这是登录控制器代码..

 public class LoginController : Controller
    {// GET: /Login/  
        public ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public string Login(UserLogin data)
        {
            bool isPasswordCorrect = false;
            string un = data.UserName;
            string Password = data.Password;
            using (HalifaxDatabaseEntities entity = new HalifaxDatabaseEntities())
            {
                var user = entity.UserLogins.Where(u => u.UserName == un).FirstOrDefault();
                if (user != null)
                {
                    if (Password == user.Password)
                    {
                        Session["LoginID"] = user.ID;
                        Session["Username"] = user.Firstname + ' ' + user.Lastname;
                        return user.ID.ToString();
                    }
                    else
                    {
                        return "0";
                    }
                }
                else
                {
                    return "-1";
                }
            }
        }
    }
}

这是我的HTML代码......

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <title></title>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/LoginScript/Module.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/ui-bootstrap-csp.css" rel="stylesheet" />
</head>
<body>

    <div ng-controller="myCntrl">
        <h1>
            <img src="~/Content/images/Loginicon.png" />
        </h1>
        <br />
        <div id="alertModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- dialog body -->
                    <div class="modal-body">
                        <button type="button" id="btn" value="Close" class="close" data-dismiss="modal">×</button>
                        {{msg}}
                    </div>
                    <!-- dialog buttons -->
                    <div class="modal-footer">
                        <button type="button" ng-click="alertmsg()" class="btn btn-primary">OK</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="panel panel-success" style="width: 50%;">
                <div class="panel-heading">Login</div>
                <div class="panel-body" style="box-shadow: -6px 2px 46px 7px #888888; padding: 20px;">
                    <form name="loginForm" novalidate>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3" style="text-align: right;">
                                        Username :
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="Uname" placeholder="Username" ng-model="uName" name="Username" required autofocus />
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3" style="text-align: right;">
                                        Password :
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="password" placeholder="Password" ng-model="password" name="Password" required autofocus />
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
                                                    <p style="position: absolute; top: 30%; left: 45%; color: White;">
                                                        please wait...<img src="~/Content/images/load.png">
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-5" style="text-align: right;">
                                                <button id="btnLogin" type="submit" class="btn btn-success" ng-disabled="!(password && uName)" ng-click="LoginCheck()">Login</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是解决方案资源管理器屏幕截图...

以下是我在开发人员工具午餐时的屏幕截图....

Answer 1

您已在控制器功能外声明alertmsg。将其移到myCntrl控制器工厂功能中。所以基本上因为$scope.alertmsg函数保持在$scope变量之外的函数没有被定义，这就是JS编译器在那里大喊大叫的原因。并且进一步的陈述没有被执行。由于myService服务未在myApp有角度的module注册，并且显示myService unknown provider

http://errors.angularjs.org/1.6.5/ $注射器/ unpr？P0 = myServiceProvider％20％3 C-％20myService

var app = angular.module("myApp", [])
.controller("myCntrl", function ($scope, myService) {

    $scope.LoginCheck = function () {
        //code as is
    }

    function clearFields() {
        $scope.uName = '';
        $scope.uPwd = '';
    }

    //move this function inside `myCntrl` controller function.
    $scope.alertmsg = function () {
        $("#alertModal").modal('hide');
    };
});

除了angularjs错误之外，您还修复了出现的所有错误安慰。同样在jQuery
之前加载bootstrap.js

错误：[$ injector：unpr]

1 个答案: