Question

我需要在angularJS中创建一个简单的登录页面。我在工厂遇到问题以及如何显示数据。

所以我有一个班级：

public class UsersJsonModel
    {
        public int  Id { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
    }

我引导API控制器获取数据：

public class UsersController : ApiController
    {
        private IEnumerable<UsersJsonModel> users = new UsersJsonModel[]
            {
                new UsersJsonModel {Id = 1, Username = "Linda", Password = "123456"}
            };

        // GET api/<controller>
        public IEnumerable<UsersJsonModel> Get()
        {
            return users;
        }

        // GET api/<controller>/5
        public UsersJsonModel Get(string name, string passcode)
        {
            return users.Where(u => u.Username.Equals(name) && u.Password.Equals(passcode)).FirstOrDefault(); // string name, string passcode
        }

我做的下一步是在app.js上添加一个状态：

var app = angular.module('app', ['ionic', 'app.controllers', 'app.datacontext']);
.state('app.login', {
                    url: "/login",
                    views: {
                        'appScreen': {
                            templateUrl: "login.html",
                            controller: 'LoginCtrl'
                        },
                    },
                })

然后在datacontext中我有类似的东西，这是我的问题：

app.factory('datacontext', ['$http', '$q', '$timeout', function($http, $q, $timeout) {

 var cachedPromises = { users:null };
 var dataservice = {getUsers:getUsers};
      return dataservice; }

        function getUsers(u) {      // I try to do smth here but it does not work 
            return {
                loginUser: function(name, passcode) {
                    var deferred = $q.defer();
                    var promise = deferred.promise;

                    if (name == 'username' && passcode == 'password') {
                        deferred.resolve('Welcome ' + name + '!');
                    } else {
                        deferred.reject('Wrong credentials.');
                    }
                    promise.success = function(fn) {
                        promise.then(fn);
                        return promise;
                    }
                    promise.error = function(fn) {
                        promise.then(null, fn);
                        return promise;
                    }
                    return promise;
                }
            }
        }
       })();

在我的controller.js中，我有以下代码：

var app = angular.module('app.controllers', ['app.datacontext']); 
 app.controller('LoginCtrl', LoginCtrl);


    LoginCtrl.$inject = ['$http', '$scope', 'datacontext'];
    function LoginCtrl($http, $scope, datacontext) {
        $scope.data = {};

        $scope.login = function() {
            getUsers($scope.data.username, $scope.data.password).success(function(data) {
                $state.go('tab.dash');
            }).error(function(data) {
                var alertPopup = $ionicPopup.alert({
                    title: 'Login failed!',
                    template: 'Please check your credentials!'
                });
            });
        }
    })

在datacontext中，我知道我做错了但我不知道如何修复它。我在网上看过例子，但是他们直接使用服务，我不知道如何在我的代码中应用这些代码。

Answer 1

您登录服务/工厂的代码有点令人困惑。

目前它甚至不会编译...我猜你可能已经复制并粘贴了错误或其他东西，但这里有相关问题：

app.factory('datacontext', ['$http', '$q', '$timeout', 

    //Second parameter is the factory function
    function($http, $q, $timeout) {
      //code for factory function
    }

    //This is simply invalid
    // if it were defined inside your factory
    // function it would work, but as it stands
    // this is just a syntax error
    function getUsers(u) { 
        //code for getUsers
    }

//This is what would normally be the
// closing parenthesis for the '.factory('
// method you are calling, but it looks
// like it's closing out an IIFE instead
// Again, this is just a syntax error
})();

用此替换您的工厂dataService声明代码，确保填写我用评论替换它的代码，然后告诉我们工作原理：

app.factory('datacontext', ['$http', '$q', '$timeout',

    function ($http, $q, $timeout) {

        var cachedPromises = {users: null};
        var dataservice = {getUsers: getUsers};

        function getUsers(u) { 
            //code for getUser
        }

        return dataservice;

    }]);

如何使用Angularjs和MVC作为后端进行简单登录

1 个答案: