AngularJS simple Loginform

Я только начал создавать прототип в AngularJs/Bootstrap. Я новичок в угловой, но кажется достаточно интересным, чтобы оценить некоторые предстоящие веб-проекты. Шаг 1: чтобы получить простую регистрационную форму для работы с жестко заданными значениями и не беспокоить связь с бэкэнд-сервисом.AngularJS simple Loginform

Однако я прочитал кучу учебников, но не могу заставить маршрутизацию работать, таинственная переменная $ location всегда неопределена, независимо от того, сколько раз я ее проезжаю. Возможно, использование этого старомодно? Я попробовал несколько примеров с этого сайта, но никто не работает, $ location is'nt среди нас больше кажется? Последний пример, который я попробовал:

angular.module('myApp.controllers', []). 
controller('loginController', ['$scope', function($scope, $route, $routeParams, $location) { 
     $scope.auth = function() { 
      //check something useful 
      $location.url('/view2'); 
     }; 
}])

Если кто-то имеет простой и рабочий пример (или URL-адрес для надежного источника информации) в форме и контроллер, который используют маршрутизацию на другой частичный, я был бы рад.

С уважением

источник

2013-11-12 elwis

отправьте код, где $ location не работает, пожалуйста. –

Это будет работать:

controller('loginController', ['$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) { 
     $scope.auth = function() { 
      //check something useful 
      $location.url('/view2'); 
     }; 
}])

Каждый ресурс, который вы хотите, чтобы ввести в контроллер должен быть передан в виде строки в массиве.

источник

2013-11-12 09:02:38

О, это просто и приятно. Полагаю, меня путают со всеми примерами в Интернете, часто с другим дизайном, а затем с проектом «угловое семя». Спасибо! – elwis

Я борюсь с той же проблемой. Я опубликовал this question. Ответ пролить свет. Затем я смог заставить пользователей войти в систему, и только тогда они смогут получить доступ к другим ссылкам на навигационной панели. Тогда у меня была проблема с навигационной панелью, видимой на экране входа в систему. Таким образом, я создал обход:

1) Я разделил страницы: используя ng-include Мне удалось загрузить login.html по умолчанию. login.html и index.html не имеет ng-view.

2) После того, как проверка подлинности пользователя, ng-view должны быть включенными, так что все виды необходимых на навигации может работать

index.html

<html ng-app="plunker"> 

     <head> 
     <meta charset="utf-8" /> 
     <title>AngularJS Plunker</title> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="angular.min.js"></script> 
     <script src="angular-route.min.js"></script> 
     <script src="app.js"></script> 
     </head> 

     <body ng-controller="AppCtrl"> 
     <div ng-include="template.url"></div> 
     </body> 

</html>

login.html

<h1>Login Page</h1> 

<form ng-submit="login(username, password)"> 
    <label>User name</label> 
    <input type="text" ng-model="username" class="ng-pristine ng-valid"> 
    <label>Password</label> 
    <input type="password" ng-model="password" class="ng-pristine ng-valid"> 
    <br/> 
    {{loginError}} {{loggedUser}} 
    <br/><br/> 
    <button class="btn btn-success" ng-click="">Submit</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</form>

Затем, если аутентификация проходит, я меняю шаблоны (ng-include) и сделать home.html страницу по умолчанию

app.controller('AppCtrl', function($scope, authentication) { 
    $scope.templates = 
    [ 
    { url: 'login.html' }, 
    { url: 'home.html' } 
    ]; 
    $scope.template = $scope.templates[0]; 
    $scope.login = function (username, password) { 
    if (username === 'admin' && password === '1234') { 
     authentication.isAuthenticated = true; 
     $scope.template = $scope.templates[1]; 
     $scope.user = username; 
    } else { 
     $scope.loginError = "Invalid username/password combination"; 
    }; 
    }; 

};

home.html имеет ng-view, который будет делать обычный, и пользователь имеет доступ к другим страницам.

Это то, что у меня есть, вот working example, надеюсь, что это поможет.

источник

2013-11-12 09:11:08

Интересно, что я буду ближе разбираться, спасибо – elwis

Мне нужна полная функциональность входа, например, если бы существовал пользователь, позволяющий им входить в систему, если не перенаправлять их на страницу регистрации, если пользователи забыли свой пароль, чтобы они могли сбросить пароль с помощью OTP до номер мобильного телефона. –

AngularJS simple Loginform

ответ

Смежные вопросы