错误:[$ injector:unpr]

问题描述:

我正在Angular Js工作。我正在尝试根据用户名和密码从Sql数据库创建一个登录系统。我输入了正确的用户名和密码,但是这并没有进入页面我想重定向用户主页,但我不能这样做。当我提交的用户名和密码的文本框从控制台应用程序我得到了以下错误....

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> 

这里是解决方案浏览器的屏幕截图... Click here to find the out put

这里是我的午餐开发工具.... Click here to find the out put

+0

为myService定义内的script.js文件 – Rasel

+1

我做到了,但遗憾的说还是同样的结果 – Rasel

您已经声明alertmsg外控制器功能的截屏。将其移动到myCntrl控制器工厂功能中。所以基本上因为$scope.alertmsg功能保存在$scope以外的变量没有定义,这就是为什么JS编译器大喊大叫。并且进一步的声明不会被执行。由于myService服务没有得到myAppmodule注册并说myService unknown provider

http://errors.angularjs.org/1.6.5/ $injector/unpr?p0=myServiceProvider%20%3C-%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'); 
    }; 
}); 

Apart from angularjs errors, you have fix all the error appearing in console. Likewise load jQuery before bootstrap.js

+0

OKK 。给我一分钟。我做了改变 – Rasel

+0

在那里我有来取代它的朋友 – Rasel

+0

还是同样的错误朋友 – Rasel