以AngularJS和MVC 4提交表单

我对AngulaJS是新手，我正在尝试尽可能多的例子。我在网上找到了一个很好的例子，除了注册部分。我试图注册一个用户；它没有提交表单，并且没有错误消息/异常

example.js file

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

    example.controller('LandingPageController', LandingPageController);
    example.controller('LoginController', LoginController);
    example.controller('RegisterController', RegisterController);

    example.factory('AuthHttpResponseInterceptor', AuthHttpResponseInterceptor);
    example.factory('LoginFactory', LoginFactory);
    example.factory('RegistrationFactory', RegistrationFactory);

    example.config(['$routeProvider','$httpProvider', function ($routeProvider, $httpProvider) {
        $routeProvider.
            when('/routeOne', {
                templateUrl: 'routesDemo/one'
            })
            .when('/routeTwo/:donuts', {
                templateUrl: function (params) { return '/routesDemo/two?donuts=' + params.donuts; }
            })
            .when('/routeThree', {
                templateUrl: 'routesDemo/three'
            })
           .when('/login', {
                templateUrl: 'Account/Login',
                controller: 'LoginController'
            })
           .when('/register', {
               templateUrl: 'Account/Register',
               controller : 'LoginController'
           });


        $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
    }]);

//This is the register form
<form ng-submit="register()">
    <label for="emailAddress">Email Address:</label>
    <input id="emailAddress" type="text" name="emailAddress" ng-model="registerForm.emailAddress" required />

    <label for="password">Password:</label>
    <input id="password" type="text" name="password" ng-model="registerForm.password" required />

    <label for="confirmPassword">Confirm Password:</label>
    <input id="confirmPassword" type="text" name="confirmPassword" ng-model="registerForm.confirmPassword" required />

    <button type="submit">Register</button>
</form>
<div ng-if="registerForm.registrationFailure">
    D'oh!
</div>

注册控制员：

var RegisterController = function ($scope, $location, RegistrationFactory) {
    console.log('register controller');
    $scope.registerForm = {
        emailAddress: '',
        password: '',
        confirmPassword: '',
        registrationFailure: false
    };

    $scope.register = function () {
        var result = RegistrationFactory($scope.registerForm.emailAddress, $scope.registerForm.password, $scope.registerForm.confirmPassword);
        result.then(function (result) {
            if (result.success) {
                $location.path('/routeOne');
            } else {
                $scope.registerForm.registrationFailure = true;
            }
        });
    }
}

RegisterController.$inject = ['$scope', '$location', 'RegistrationFactory'];

   [AllowAnonymous]
        public ActionResult Register()
        {
            return View();
        }

        [HttpPost]
        [AllowAnonymous]
        public ActionResult Register(LoginModel model)
        {
            return Json(new { ok = "ok", data = true, message = "Success" });
        }

这是C#控制器中的代码：

var RegisterController = function ($scope, $location, RegistrationFactory) {
    console.log('register controller');
    $scope.registerForm = {
        emailAddress: '',
        password: '',
        confirmPassword: '',
        registrationFailure: false
    };

    $scope.register = function () {
        var result = RegistrationFactory($scope.registerForm.emailAddress, $scope.registerForm.password, $scope.registerForm.confirmPassword);
        result.then(function (result) {
            if (result.success) {
                $location.path('/routeOne');
            } else {
                $scope.registerForm.registrationFailure = true;
            }
        });
    }
}

RegisterController.$inject = ['$scope', '$location', 'RegistrationFactory'];

   [AllowAnonymous]
        public ActionResult Register()
        {
            return View();
        }

        [HttpPost]
        [AllowAnonymous]
        public ActionResult Register(LoginModel model)
        {
            return Json(new { ok = "ok", data = true, message = "Success" });
        }

这是我正在使用的着陆控制器

var LandingPageController = function ($scope) {
    $scope.models = {
        helloAngular: 'I work!'
    };
};

LandingPageController.$inject = ['$scope'];

以下是索引页：

<!DOCTYPE html>
<html ng-app="example" ng-controller="LandingPageController">
<head>
    <title ng-bind="models.helloAngular"></title>
</head>
<body>
    <h1>{{models.helloAngular}}</h1>

    <ul>
        <li><a href="/#/routeOne">Route One</a></li>
        <li><a href="/#/routeTwo/6">Route Two</a></li>
        <li><a href="/#/routeThree">Route Three</a></li>
    </ul>
     <ul>
        <li><a href="/#/login">Login</a></li>
        <li><a href="/#/register">Register</a></li>
    </ul>
    <div ng-view></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
    @Scripts.Render("~/bundles/example")
    </body>
</html>

{{models.helloAngular}}









@Scripts.Render（“~/bundles/example”）

根据注释，

/register

引用了错误的控制器。

更改为：

.when('/register', {
               templateUrl: 'Account/Register',
               controller : 'LoginController'
           });

为此：

.when('/register', {
               templateUrl: 'Account/Register',
               controller : 'RegisterController'
           });

---

在您的模板中，确实有一个

ng controller=“RegisterController”

或$routeProvider中，如果您正在使用，对吗？@ShehryarAbbasi我正在使用的索引页中确实有一个ng控制器。在

$routeProvider中。当
s时，您的登录视图和注册视图都有
LoginController
，这是正确的吗？。我认为
没有看到正确的控制器。。。应该
。什么时候（'/register'
有
控制器：'RegisterController'
？@Shehryar Abbasi这就是问题所在。谢谢你。我是从C控制器的角度考虑的。你能把你的评论作为答案发表吗？很高兴知道它在工作-我已经把控制器修复作为答案发表了。=）