title: how to create log in page for my project using angular?
body: <p>I am using angular.js for the very first time and really getting confused as to how to start. Any advices and/or resources are very much appreciated. 
  I'm trying to create log in page but now I'm struggling and I've been researching and I'm not winning. Can anyone help me please in my project. </p>
  
  <p><strong>Person model</strong></p>
  
  <pre><code>public partial class Person1
  {
      public int PersonID { get; set; }
      public string UserName { get; set; }
      public Nullable&lt;int&gt; UserAuthRoleId { get; set; }
  }
  </code></pre>
  
  <p><strong>Password model</strong></p>
  
  <pre><code>public partial class Password
  {
      public int BusinessEntityID { get; set; }    
      public string Password1 { get; set; }
      public int PersonID { get; set; }
  }
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>   var Call23 = angular.module("Call23", ["ngResource", "ngRoute", 'ui.bootstrap']).
  config(function ($routeProvider) {
      $routeProvider.
          when('/', { controller: LoginCtrl, templateUrl: 'login.html' }).
  
  
          otherwise({ redirectTo: '/' });
  });
  
     Call23.factory("page", function($rootScope){
         var page={};
         var user={};
         page.setPage=function(title,bodyClass){
             $rootScope.pageTitle = title;
             $rootScope.bodylayout=bodyClass;
         };
         page.setUser=function(user){
             $rootScope.user=user;
         }
         return page;
     });
  
     var LoginController = function ($scope, $routeParams, $location, LoginFactory) {
         $scope.loginForm = {
             UserName: '',
             password: '', 
             returnUrl: $routeParams.returnUrl,
             loginFailure: false,
             loginSucess: false
         };
  
  
         $scope.login = function () {
  
             var result = LoginFactory($scope.loginForm.UserName, $scope.loginForm.password, $scope.loginForm.rememberMe);
             result.then(function (result) {
                 if (result.success) {
                     if ($scope.loginForm.returnUrl !== undefined) {
                         $location.path('/');
                     }
                     else {
                         $location.path($scope.loginForm.returnUrl);
                     }
                     $scope.loginForm.loginSucess = true;
                 } else {
                     $scope.loginForm.loginFailure = true;
                 }
            });
       }
    }
  var LoginFactory = function ($http, $q) {
  return function (UserName, Password) 
      var deferredObject = $q.defer();
      $http.post(
         'login.html', {
              Email: UserName,
              Password: Password,
          }
      ).
      success(function (data) {
          if (data == "True") {
              deferredObject.resolve({ success: true });
          } else {
              deferredObject.resolve({ success: false });
          }
      }).
      error(function () {
          deferredObject.resolve({ success: false });
      });
      return deferredObject.promise;
  }
  }
  LoginFactory.$inject = ['$http', '$q'];
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;input id="UserName" type="text" class="form-control" name="UserName" data-ng-model="vm.userName" placeholder="username or email"&gt;
  
  &lt;input id="Password" type="password" class="form-control" name="Password" placeholder="password" data-ng-model="vm.password"&gt;
  </code></pre>
  
  <p>I do not know how to proceed from my app.js code now.</p>