How to convert jQuery code to useful AngularJS code

Question

I am new to AngularJS and would like to create functionality for the login page similar to what you will find here when you click the Forgot Password link:

http://bootsnipp.com/snippets/featured/login-amp-password-reminder#comments

Is it better to use a directive since this is behavior, not a controller? I tried quite a bit with creating a controller for it, but when I look for help on this, I find that using a controller for this may not be. Here are my last tests that were unsuccessful (the link does nothing when clicked):

on the controller side in the js file:

angular.module('mean.users') .controller('SwitcherCtrl', ['$document', function($document) { $document.ready(function () { $document.getElementById('olvidado').click(function (e) { e.preventDefault(); $document.getElementById('form-olvidado').toggle('500'); }); $document.getElementById('acceso').click(function (e) { e.preventDefault(); $document.getElementById('form-olvidado').toggle('500'); }); }); } ]) 

on the html side, I included ng-controller = "SwitcherCtrl" if necessary.

Answer 1

Thanks to all who responded. They started this work in the right direction, and I was able to improve it to get the exact answer shown below.

HTML:

 <div ng-controller="SwitcherCtrl"> <div data-fold-toggle="active"> <form id="login"> <input type="email" ng-model="email" required=""> <input type="password" ng-model="password" required=""> <button type="submit">Login</button> <a ng-click="active=!active">Forgot your password?</a> </form> </div> <div data-fold-toggle="active" style="display: none;"> <form id="forgotpw"> <input type="email" ng-model="email" required=""> <button type="submit">Reset Password</button> <a ng-click="active=!active">Account Access</a> </form> </div> </div> 

Controller and directive:

 .controller('SwitcherCtrl', function($scope) { $scope.active = true; }) .directive('foldToggle', function() { return { restrict: 'A', scope:{ isOpen: '=foldToggle' }, link: function(scope, element) { scope.$watch('isOpen', function(newVal,oldVal){ if(newVal !== oldVal){ element.toggle(200); } }); } }; }); 

Answer 2

The jQuery approach is completely incompatible with AngularJS. DOM Manipulation is allowed only in directives in the link function, otherwise this is very bad practice. Try starting from scratch and forget about jQuery. AngularJS magic happens with two-way bindings.

You can use the directive with the login controller and factory / service to store the username and password and send it to the database. There is absolutely no need for jQuery for this entry. You can check this question here: AngularJS- Login and authentication in every route and controller

edit: In your question above, this is not a directive, not a controller. A directive may have a controller that applies to a specific area. You can do the same with both, but it depends on how many times you reuse this entry fragment - I think you won’t need it, but I think it's still good practice to do it.

edit 2: if you are not reading this, please do it! I believe that you will answer most of your questions about two different (on the contrary, I would say) technologies. "Thinking in AngularJS" if I have jQuery background? In addition, since I was also from JQuery, I followed these four resources, and now I can do most of the things I want:

• Introduction to Angular.js in 50 examples (part 1) https://www.youtube.com/watch?v=TRrL5j3MIvo

• Introduction to Angular.js in 50 examples (part 2) https://www.youtube.com/watch?v=6J08m1H2BME

• Free AngularJS Online Learning for Beginners https://www.codeschool.com/courses/shaping-up-with-angular-js

• Other AngularJS resources on egghead.io https://egghead.io/technologies/angularjs

edit 3: Since I saw a lot of interest in my answer, I decided to expand it to avoid / best practices so that the code is more verifiable, maintainable and easier to switch to Angular 2

• 5 Guidelines for Preventing Angular Joint Soup http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html

• There is no soup with a volume of $, bindToController in AngularJS https://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/

• Angular JS - you probably shouldn't use $ watch in your controllers. http://www.benlesh.com/2013/10/title.html

• 11 tips for improving AngularJS performance http://www.alexkras.com/11-tips-to-improve-angularjs-performance/

Answer 3

You can try this, it uses directives and html. Regardless of whether the login name or the forgotten username is displayed, it binds to the state of the scope variable in the directive link function.

Fiddle

 <div ng-app="myApp"> <div my-auth> <div ng-show="active"> <form name="login"> <input type="email" ng-model="email" placeholder=" [e-mail] " required /> <input type="password" ng-model="passwd" required /> <button ng-disabled="!login.$valid">Login</button> </form> <a href="#" ng-click="toggle()">forgot password?</a> </div> <div ng-show="!active"> <form name="forgot"> <input type="email" ng-model="email" placeholder=" [e-mail] " required /> <button ng-disabled="!forgot.$valid">Reset Password</button> </form> <a href="#" ng-click="toggle()">access</a> </div> </div> </div> 

Directive

 angular.module('myApp', []) .directive('myAuth', function(){ return { link: function(scope, elem, attr){ scope.active = true; scope.toggle = function(){ scope.active = !scope.active; }; } }; });