Nie jestem pewien, jak podejść do tego na moją stronę AngularJS ...

Muszę załadować formularz logowania do dowolnej strony w witrynie (bez opuszczania strony), a następnie asynchronicznie przekazuje dane logowania użytkownika i zdobądź sukces lub niepowodzenie, a następnie załaduj szablon DIV HTML na tej samej stronie, jeśli logowanie jest udane ...

Widząc pełny przykład byłby niesamowity, ale oczywiście nie spodziewam się. Nie mogę jednak znaleźć jednego prostego przykładu w sieci (nic, co pomogłoby nowicjuszu).

Czy ktoś może wskazywać na dobre rozwiązania lub przynajmniej zrozumiałe przykłady? .. lub coś podobnego, który nie jest zaśmiecany niepowiązanym kodem ..

0
GRowing 21 listopad 2013, 04:01

2 odpowiedzi

Najlepsza odpowiedź

Używam dyrektywy dla mojego logowania, rodzaju tego. Możesz uzyskać ogólną ideę, jak to działa.

.directive('login', function($http, $rootScope) {
    return {
        restrict: 'E',
        template: " <form> " +
                  "<label>Username</label>" +
                  "<input type='text' ng-model='username'>" +
                  "<label>Password</label>" +
                  "<input type='password' ng-model='password'>" +
                  "<br>" +
                  "<input type='submit'>" +
                  "</form>",
        link: function(scope, elem, attrs) {

            elem.bind('submit', function() {

                var user_data = {
                    "username": scope.username,
                    "password": scope.password,
                };

                $http.post("http://localhost:8001/api-token-auth/", user_data)
                    .success(function(response) {
                        $http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
                        $rootScope.$broadcast('event:login-confirmed');
                        elem.slideUp();
                }); 

                scope.$on('event:auth-loginRequired', function () {
                    var main = document.getElementById("main");
                    main.hide();
                    elem.slideDown();
            });

            });

         }
     }
 });
2
Zack Argyle 21 listopad 2013, 00:14

Znalazłem rozwiązanie, które dokładnie prosiłem i można je dostosować do moich potrzeb sprawiedliwie łatwo. https://gist.github.com/clouddueling/6191173

Jest tworzony przez Michaela Calkinsa, który uważam za jeden z najnowocześniejszych i łatwych do zrozumienia źródeł dla korepetycji AngularJs. Znalazłem swoje filmy na YouTube http://www.youtube.com/watch?v=ZHMVP5APM9/ A >.

0
GRowing 21 listopad 2013, 15:45