我使用angularjs创建了一个Web Api项目

时间:2017-05-26 06:37:55

标签: angularjs asp.net-mvc asp.net-web-api

我创建了一个cshtml视图页面,其MVC控制器脚本中的get方法在cshtml文件中编写。当我点击该按钮时,我已经放置了一个按钮Register New User,它应该重定向以注册我使用$state.go的HTML页面。我创建了一个名为app.js和register.js的模块来调用API控制器中的post方法寄存器。 但问题是单击Register New User按钮,页面未重新加载到Register.html。 有人帮我解决了这个问题 cshtml代码                                                         

                <input id="Password" type="text" ng-model="Emp.Password" placeholder="Password" required /></br>

                <input type="submit" value="Login" /></br>
                <input type="reset" value="Reset" /></br>

            </div>

        

        <input type="button" ng-click="Register()" value="Register New User" />
    </div>
</body>
</html>

<script>
    // var myapp = angular.module("myApp", ['ui.router']);
    (function (app) {
        'use strict';

        app.controller("LoginController", ["$scope", "$http", "$location", "$window", "$state", function ($scope, $http, $location, $window, $state) {

            $scope.Emp = {};
            console.log("cont mvc");
            $scope.Submit = function (Emp) {
                console.log("inside", $scope.Emp);
                $http({
                    method: "POST",
                    url: '/Webapplication2/Test/Login',
                    data: $scope.Emp,
                })
                .then(function successCallback(response) {
                    console.log("response", response.data);
                    //$window.location.href = '/Home/Display';
                    if (response.data == "CORRECT UserName and Password") {
                        console.log("if condition")
                        alert("CORRECT UserName and Password");
                        //$state.go("Display");
                        //$window.location.href = '/WebApplication2/Test/Display';


                        $window.alert("Hello " + $scope.Emp.UserName);
                    }
                    else if (response.data == "INCORRECT UserName or Password") {
                        alert("INCORRECT UserName or Password");
                    }
                })
            }
            $scope.Register = function () {
                console.log("reg button");
                $state.go('Register');
                //$window.location.href = '/Webapplication2/Test/Register';
            }
        }]);
    })(angular.module('myApp', ['ui.router']));
</script>

模块app.js代码

(function(){     'use strict';

var app = angular.module('myApp', ['ui.router']);
app.config(['$StateProvider', '$UrlRouteProvider', '$state', '$scope', '$http', '$location', '$window', '$logProvider',
    function ($StateProvider, $UrlRouteProvider, $state, $scope, $http, $location, $window, $logProvider) {
        console.log("modulejs");
        $UrlRouteProvider.otherwise("/Login");

        $StateProvider
        .state('Login', {
            url: 'Home/Login',
            templateUrl: "/Views/Home/Login.cshtml",
            controller: 'LoginController'
        })



        .state('Register', {
            url: 'Test/Register',

            templateUrl: "/Views/Test/Register.html",
            controller: 'RegisterController'
        })

    }])

})(); Register.js代码 (功能(app) {

console.log("cont register");
app.controller("RegisterController", function ($scope, $http, $location, $window,$state) {
    console.log("cont2");
    $scope.Submit = function (Emp) {
        console.log("inside", Emp);
        $http({
            method: "POST",
            url: '/Webapplication2/Test/Register',
            data: $scope.Emp,
        })

        .then(function (response) {
            //$window.location.href = '/Webapplication2/Test/Display';
            //$msgbox.alert("Hello " + $scope.Emp.UserName);
            $window.alert("Hello " + $scope.Emp.UserName);
        })
    }
    $scope.Login = function () {
        console.log("login button")
        $state.go('Login');
        //$window.location.href = '/Webapplication2/Test/Login';
    }
});
})(angular.module('myApp',[]));

1 个答案:

答案 0 :(得分:0)

为什么您使用angular.module作为参数执行 IIFE

var app = angular.module('myApp', ['ui.router']); // app is global variable we can refer anywhere by the `window`

  // here already refer the app module
 app.controller("RegisterController", function ($scope, $http, $location, $window,$state) {
       //...... code
})(angular.module('myApp', ['ui.router']));

删除您的 IIFE 参数,如下所示更改您的控制器。

 app.controller("RegisterController",["$scope", "$http", "$location", "$window","$state", function ($scope, $http, $location, $window,$state) {
           //...... code
    }]);

(function () {

  app.controller("RegisterController",["$scope", "$http", "$location", "$window","$state", function ($scope, $http, $location, $window,$state) {
               //...... code
        }])
 }());